omgdonnali-blog

[omgdonnali-blog]

Finalisation 

This week, I have revised some details on the website including adjusting the badges’ margins, make the category column wider (on the challenge page), and fixing the size of logo on the landing page.

I have also uploaded my website folder to online server through FileZilla. It was my first time of using FileZilla, so I spent some time asking help from the lecturer. 

Finally, my website was published and here is the link:

 http://digitalmedia.rmit.edu.au/~s3697603/outfitbook/landing.html

------------------------------------------------------

Reflection

Throughout the implementation of this project, I have achieved my main objective which people can express their fashion tastes while staying at home. Meanwhile, I have conducted one social project and a website during the project. 

Social Project

The objectives: 

Observing participants’ attitudes toward “outfit sharing online” (whether they will accept or not)

Obtain photo sources from real people (more realistic)

Number of participants: 

14 (includes me as the host)

Active particpants: 

4-6 (each time)

Out of my consideration:

 Participants prefered to send old photos rather than dress up. It is surprisingly for me because most of the participants I invited to the group are active on instagram which some of them love to take selfies at home. 

Participants lost interest in the activities easily. 

Possible causes: 

Not interested in the themes 

Private groupchat, no actually likes

Too many messages 

Sustainbility:

Ecological - medium level 

make use of old clothes & previous photos

Social - medium level

connection between pariticipants reduces over time

some pariticipants don’t know anyone in the groupchat, not willing to talk

can be conducted for quite a long time

Reflection:

Research about the target audience before conducting the project 

Invite common friends if possible 

Website Project

By constructing my online public space, Outfitbook, I have improved my web coding skill significantly. Moreover, I have learned about different research tools to plan for my website. The result meets my expectation which the website is accessible, responsive and sustainable. 

In terms of sustainability, Outfitbook is not influenced by time which dress-up themes can be posted at anytime in the future. Also, it is easy for users to participate, as they just need to send their photos to my email. Therefore, no extra softwares used except photoshop and email software. 

Since this website project is developed during quarantine period, it provides as another way for people to do at home. 

[omgdonnali-blog]

Problem Solved - column display

I just found that I forgot to add a close bracket for media query (max-width: 378px)... All working! 

I also adjusted the “margin-right” parameter of the green badges. For now, users can view the number of images beside the theme buttons on their mobile devices. 

I have uploaded my website folder to a online server, Netlify, which I can fix errors and update the website easily. Here is the link:

https://gallant-chandrasekhar-080b80.netlify.app/index.html

[omgdonnali-blog]

Week 11 - Revise & Implement

In this presentation week, we have viewed everyone’s works and made comments about some possible things that could be implemented.

1.  The ABOUT page (Fig.1-2):

Problem mentioned by classmate. “ABOUT” page not responded ( because I haven’t add anything on it)

Implementation:

Page added & unified in visual style.

2. Inresponsive navigation bar (Fig.3-5) :

As Figure 3 & 4 showed, the nav bar is not responsive. In specific, the logo is scaled which is too small to view. 

Implementation:

Following examples on W3School.com, I have revised the nav bar to a responsive one when screen width scales to 500px or less.

3. Upload alert box (Fig.6-8):

This week, I have fixed a problem which struggles me a lot. In the previous testing, the alert box always resized to a narrow box which is not correspond to what I have coded. 

Now I have made the cloud icon display to “none” when it resized. It looks better. 

---------------------------

Constraint needed to be solved:

The image grid in the CHALLENGE page is not displayed into one column in the mobile device, though the code is written “column-count: 1″. Also, the number badges are partially covered by the border line. Therefore, my next step is to fix these problems and make the CHALLENGE page more responsive.

[omgdonnali-blog]

W10 - User testing (5ppl) , Solved

1. add depth(shadow at the back of the image),

2. add some instruction above the pagination ( guiding users how to drag the images)

3. the last filter, “Favorite Weekend” displayed the same content as the “Art Gallery”. 

4. add footer ( inspired by others’ websites)

Generally, the feedbacks tended to be positive, so I just need to fix some small things regarding the visual. 

[omgdonnali-blog]

Week 9 - Solved 3D Swiper

I have tried several times before to create a 3D swiper through codes from the internet, but it was not working. After consulting with Ben, I found that I used the wrong link for swiper’s CSS & JS. Therefore, I put the code in Brackets and replaced with new links. Finally I got the swiper working. 

The next step is pasting the code to Dreamweaver (Fig.3). I found one problem that no image displayed after replacing the background image path in “swiper slide” (Fig.4). My solution is inserting the image under the “swiper slide” div and adding “width 100%” as inner style. It defined the size of the image within the slider box.  

[omgdonnali-blog]

Week 8 Update

Added a new page - Challenges

Feature: filtered images based on categories

Things to work on: 

1. button design

2. commence another dress-up challenge on the ins group

[omgdonnali-blog]

I just found that Webflow free plan only allows users to create up to two pages for one project. Thus, I have to move my project to Dreamweaver which I plan to learn it through the weekend to catch up.  

[omgdonnali-blog]

 Webflow - Mouse Hover Effect

For this week, I was working on the landing page layout for my website. While finish constructing the style (e.g. colors), I have also inserted a navigation bar and website logo.

Overlapped two div blocks with background images

By changing opacity of the div, users can see different background  while the mouse hovers on the each portrait photo, as showed in the video above. 

Layout: Image Grid

Inspired by Pinterest, I decide to make a vertical clickable theme list to display a range of themes. Also, photos are going to be showed in grid on the right of the website. In this way, it is easier for users to understand where to click and what they will see.

Regarding the image style, they will be similiar to Pinterest images which have rounded border and gap between each. 

For the theme list, I plan to create a list of buttons that categorize images which only related images will be displayed when click on. For now, I have only added a button and I will search for more information about “image filtering”.  

[omgdonnali-blog]

Activity 2: Brunch with friends

[omgdonnali-blog]

Samples for PS outfit selfies

Activity 1: Friday Night 

[omgdonnali-blog]

Theme 2 Groupchat Screenshot

[omgdonnali-blog]

Social Project: Theme 2

For the second activity, I have annouced the theme as “Brunch with Best Friends”. I have received four photos included one posted by myself. I guess the reason for responses fewer than before is that people get bored of this or they have somehow lost their interests eventually. 

However, the number of responses I got from the groupchat were apparently lower than the ones received from first activity. I found that people seemed misunderstood the photo requirement which they can send any photos, not only the ones taken in specific places (e.g. brunch places). Thus, as some people did not have photos taken in cafe or restaurant, they prefer to check others’ photos instead

Also, I will plan well how to make the social project more interesting to participate. I tried to propose some popular challenges from Instagram, such as #pillowchallenge and #mugshot, but the general attitude tends to show that participants still prefer to send old pics instead of dressing up. One more thing is that these old photos have reminded senters of the good old days which is surprisingly to know. Consequently, I decided to shift my project goal from “fashion at home” to “recall memory”. 

[omgdonnali-blog]

Process: Brainstorming on website layout

From week 5 to 6, I have researched for inspirations and done some brainstorming. When I constructed the layouts for the landing page and the one for “search results” (showing the outfits under the keyword put) , I considered how to show the content in limited number of pages. This is because new users can understand my website’s features easily, based on their previous web browsing experience. 

Also, I want to express a sense of aesthetic while maintain the structure. Thus, as shown in the last image, I produced one layout idea that was satisfied with my objective. Inspired by Pinterest’s “quickpinning” feature,  on the home page, users can quickly enter one dress-up challenge they like by putting their mouse on the top, which will show “upload” and “browse” options. 

[omgdonnali-blog]

Website Construction

This week, I have done some research on website layout and a few online tutorials for Webflow. It reduces the steps to create a web page which can save me lots of time. But one thing I have been wondering is how to add extra function, cropping background automatically, to the website. In this stage, I just got familiar with Webflow’s basic functions, so I will look at that further next week.

One constraint I have been working on is the landing page layout. I have set my color palette for the website. 

But, should I focus on the functional part or aesthetic one? I’ve asked a couple of my friends and my lecturer Ben, they all suggested to make the website straightforward is better. Therefore, I should consider how to combine the aesthetic and function together into one. 

W6 - Conducting the first activity

This week, I have proposed the first dress up theme, Friday Night, to the groupchat. At the beginning, everyone was exciting and looking forward to each other’s photo. I have received a number of photos from most of the participants, though some still show no response to the content.

Today I’ve proposed the second theme, Brunch with Besties. However, compared to the first activity, the group was very silent which I only got some replies. So far, I haven’t receive any photo yet.

Problems I found:

participants easy to lose interest in this

some people are still too shy to participate ( most of them know each other somehow) / hard to engage

Possibilities to change:

Propose the theme privately to each participant

Keep them engaging in the group

Screenshots of second activity:

[omgdonnali-blog]

Inspiration: Home page

1. https://dribbble.com/shots/10466597-Page-Search

It is straightforward and aesthetic. Providing popular research keywords below the search bar is clever. 

2. https://dribbble.com/shots/9261428-Travel-Agency-Project

Since this is a travel agency website, travelers will search their ideal travel destinations through this website. Similar to the first one, there are popular travel destinations below the search bar to give travelers some inspirations.

For my project, I think what I can learn from these websites’ home pages is that more than simply searching, I can provide some info below to attract viewers and pursuade them to click in. 

3. https://dribbble.com/shots/3882070-Tickestream-search-animation

Search bar - animation ( asking viewers questions) 

4.https://dribbble.com/shots/2572851-Blog-Search

The website displays categories on the right side while stays neat at the same time. The concept of Search is interesting and can be a design reference to my project. 

[omgdonnali-blog]

Project storyboard 

[omgdonnali-blog]

I asked my friends to send me some photos so I can photoshop them to the scenes they like. The responses were surprisingly positive which they felt the photos were funny.