Exercise 1: Instagram post
My Code Pen link: https://codepen.io/JoyceSKY/pen/JjdxqRv
Weekly log 1
What would you ask if you received a web design project and why?
I would consider the conveniences of the web. Most of the users use the web because they do not want to spend a long time to collect information. They want to get the main ideas in a quicker way. If they want to spend a long time reading, they may prefer books rather than the web. Therefore, I should consider the user experience first if I received a web design project. Take an example, I will ask whether some icons and buttons can be easily understood by target users. Also, if the design layout is too complex may affect the readability of the text on the web. Since the conveniences of the web may affect the user experience, it is usually the main concern for me.
WEB PROJECT
Weekly log 2: Persona
I choose my friends as my persona because she contain a strong and unique personality which can give me some new inspirations. After talking with her, I have learned that self management is important. She is not only care about her design assignments, but also her visual and personality design. The consideration and management allow she to present herself confidently. Therefore, I decided to recreate salon web to arouse people awarenesses of managing your visual and personalities. Also, I hope I can increase the creditability of salon by providing more information which inspired by persona's hobby and the consideration of hair style and quality.
Weekly log 3: AIDA Method
At first, I think price list must be put on the beginning of the web. However, I have totally different insights after seeing a Youtube video of introducing AIDA method. Awareness is an elements that can perceive your attention at first sight. Therefore, we need a eye-catching hero image. Also, awareness talk about why you should care. Therefore, I put the reason of choosing this salon instead of others at beginning. Then, I may provide some discount or service that can attract people to choose this salon. When they really desire to this salon, I will finally provided more details such as hair stylists and price. All the ideas and requirements of web can be observed from the daily behavior of your persona such as what kind of informations that she always concern about.
Exercise 2: Web Structure Wireframe
Design Direction
Wireframe
Since my persona love Japanese culture and Japanese hair style, she inspired me to cultivate a Japanese style web. To emphasize strong characteristic and style of Japan, I have designed to use Japanese comic book as my design layout reference. I hope the web can be like a story and customers will addict into it slowly rather than just providing information to the customers. My whole layout design is according to AIDA method which allow customer to read through the web step by step and make a appointment successfully. Also, I hope my whole design is cool and fashionable concerning persona's personalities. I think a fashionable design can increase creditability of salon.
Exercise 3: Hero Image layout
Concerning the art direction, I also change my hero image into comic layout. From the inspiration of Fillmore style, I designed to apply two or three color on web only. Therefore, the web will not become messy and the theme will be more focused. At first, I use yellow and red colors in my hero image where I expected to be cool. However, the style can not emphasis the Japanese culture. In contrast, it is a little bit like a American style. Therefore, I research again and find that most of the Japan posters and Fillmore style use strong contrast color such as blue and orange. So, I change the color with light background. To emphasize the beauty and personality of the character, I use a flower pattern as background which is inspired by art nouveau which can show that this salon is able to change a person into a fashion and modern style. Also, I think the interaction is funny when those hands cross over the layout.
Web Anatomy
Interaction
I use a simple scrolling effect for the whole web instead of parallax effect because I want to keep the layout appropriately. When you scrolling, the blocks will appear slowly. I use scrolling effect to pretend the action of reading comic book page by page which is entertaining. It can engage customers into the web easily.
Difficulties
During the project, I got a lot of problem with the layout design of web. I find that responsive web is convenient but annoying at the same time. Responsive web can fit in different device with appropriate gird system quickly. However, the layout keep changing which is difficult to satisfy with all the device. I think this is the main problems of beginners. To take an demonstration, my design is comic style with complicated layout which is difficult to fit in some small device. When the device is too small, all the thing will be overlap seriously. Although I cannot fix all of them, it is a good experience for me which increase my problem-solving skill.
Final Web Design
My web design link: https://beyond-the-fringe-salon.webflow.io
Reflection
I love this course because the project allows me to find my own interesting topic and provide chances for me to discover my own style of web. Although making a web is time consuming, I enjoy it.
Through the course, I realize that user experience is important in design.The characteristic and behavior of your persona may produce a different style of web design. The changes of human behavior may affect the arrangement of layout and content. My salon web design is one of the examples that reflect specific user experience which is based on the observation of my persona's hobbies and interest. Through the observation, we can build up a linkage between design and daily life.
After the project, I hope to improve my time management. I put too much time on exploring ideas and drawing draft. I always hesitate and dissatisfied with my design and remake it for several time which is my weakness. Therefore, the time of improving the layout in Webflow and adding animation have been compressed seriously. Aiming perfect is good. However, we should make a balance to aim for a best standard in a shortened time. If I have time, I would like to improve my animation to be more fluent and entertaining.
