Website design research --- Colour & Homepage frame

When everything is black and white, the design will be very serious. It is because of the origin of cultural connotations of black and white's newspapers and early photography. On the otherwise, yellow and black together usually means dangerous. When we see a bright colour like magenta, it will interest us. That's why I use it to be the background colour of my horizontal menus. and I use green to text when hover, because it is the complementary colour to red, at the same time, green means go or be active in the real world. When This makes it clear to the user that the area can be clicked. When the colour became darker, it means this part has been activated, it is like the button in the real world has been pressed. They create a vibrant look, especially when used at full saturation. Let us see how it looks. Red, blue and green is split complementary colour for producing vibrancy in space and distinguish the different state.

Now, these parts were just thrown together, and this is my initial idea of my homepage's frame.

I put the navigation at the top of the computer because if there is a considerable amount of menu want to be saw when we click on these. There must have some space for the menu to fall down. This is a convenient place to put something where you can ignore it when you want to. Meanwhile, branding should be very visible.  So I change the position of it under the menu choices.

Website design research --- Pre-design

When I start my project, there are three questions need to be answered.

• What is it?
• Who is it for?
• Where does it live?

It is my portfolio and the reason I create it is for finding my prospective customers and my potential employers or being the materials for applying school in the future. It will be displayed on mobile and computer platforms.

The first step is to think about the look and feel of my website.

Next, I have done some visual research and find some free copy-right images on the internet.

There pictures about structure, information, computer, light and special material. In brief, I want to link them to the digital stuff. Because my major is digital design. Then I extract the colour from these pictures. They are the mood and feel of imagery of these pictures, and they will be used in my website design.

I processed these images in photoshop to be the background of my homepage. Here is the process.

Copy another one: hold 'Alt' + drag mouse / Ctrl C + Ctrl V / Ctrl J (copy a layer) + 'move tool(V)'

Change the blending mode to try more effect.

I put it on my website, let us see how it works.

Image reference:

Unsplash (2020). [image] Available at: https://unsplash.com/photos/ewKDwf05Eds [Accessed 20 Feb. 2020].
Unsplash (2020). [image] Available at: https://unsplash.com/photos/VKg1oXU-vzo [Accessed 20 Feb. 2020].
Unsplash (2020). [image] Available at: https://unsplash.com/photos/ZMRMFULofus [Accessed 20 Feb. 2020].
Unsplash (2020). [image] Available at: https://unsplash.com/photos/Cd84YdL9px8 [Accessed 20 Feb. 2020].
Unsplash (2020). [image] Available at: https://https://unsplash.com/photos/VFjc-lx-BUo [Accessed 20 Feb. 2020].
Unsplash (2020). [image] Available at: https://unsplash.com/photos/euQVngjZGSI [Accessed 20 Feb. 2020].
Unsplash (2020). [image] Available at: https://unsplash.com/photos/YYUM2sNvnvU [Accessed 20 Feb. 2020].
Unsplash (2020). [image] Available at: https://unsplash.com/photos/xX2aYSBsyKo [Accessed 20 Feb. 2020].
Unsplash (2020). [image] https://unsplash.com/photos/aiqKc07b5PA [Accessed 20 Feb. 2020].

Website design research --- Interface Conventions

I did more research into UI principle, here is what I have found.

The 4 Golden Rules of UI Design

'The UI design principals are:

Place users in control of the interface

Make it comfortable to interact with a product

Reduce cognitive load

Make user interfaces consistent'

(Nick Babich, 2018)

Good UIs give the sense of control to their users. Make them easier to understand and grasp the use of the product quickly. Otherwise, It needs to allow users to try the product without the fear of failure. This means the user should always be allowed to redo whatever they have done. When a user knows that problems can be easily fixed,  that will encourage the user to explore the unfamiliar options. So it is important to keep the undo/redo button in the right place. Especially the undo button is more helpful, it lets users make changes and go back to the last step. One good example of it is google blogger with an undo button when users insert wrong information.

• 'Create' an easy-to-navigate interface' (Nick Babich, 2018)    Users should be put in their comfort zone by providing some information about the location they are, the history they have accessed, and what they can do next.
• Provide visual clues. (Nick Babich, 2018)  like underline for currently selected titles, highlights for already selected navigation options, and other visual information give users a visual reminding of where they are on this page or this website. Never make them confused.
• Predictability.    Users should be provided with clues that help them predict the result after the action. They should never be confused about 'what will happen if I press this button.'

Reference:

Babich, N. (2020). The 4 Golden Rules of UI Design | Adobe XD Ideas. [online] Ideas. Available at: https://xd.adobe.com/ideas/process/ui-design/4-golden-rules-ui-design/ [Accessed 22 Feb. 2020].

Website design research --- UI & UX

The first step, I research the meaning of  UI(user interface) and UX(user experience), it is the basic knowledge of the website design. The user means the viewer interacting with the content, and the interface is the way that the user accesses that content. Marshall McLuhan pointed out famously that the medium is the message. But with interface design, it is believed more like the medium affects the message.

Furthermore, I want to find the relationship between UI and UX. UI is usually the term of talking about how it looks. It's about visual design and how we access digital content. UX is about the feeling of digital content with the user.

UI & UX

UI designer pays more attention to form, aesthetics and look&feel or organization of the information. UX designer more focuses on how the interface feels and on the navigation and the story and the structure of the whole website.

Mostly the UI designer is looking at the visual identity, that often has more graphic design or visual skills and the UI designer is focus on how to get the user engaged with the content of the website, and this is often improved by the user's feedback and experience.

Final, the website's visual look will be the first thing of user sight before they check the content of the site, but the designer will be given a large number of material like text, images and etc... to create a form. and they should be organized and presented in a way that makes sense for the user.

Target Market

The media consumption of this application is Age: teenager; Gender: unlimited. Race: unlimited. Marital Status: unlimited; Number of children: unlimited. Occupation: artists, cartoonist, animator. Annual income:£13,000~£57,350(usually between the skilled working class to the lower middle class). Education level: high school to undergraduate. Living status: unlimited.

This is a professional art sharing app, inspired by Pixiv, Behance and Artstation. Which all have a final purpose of growing your artistic reputation, getting discovered by employers and opening up to different opportunities.  

                                                         DEMOGRAPHICS

The age demographic consists of people aged between the age of 18 and 40. These people are interested in improving and sharing their cartoons and comics with this 

Being an art sharing platform. It was designed for people who want to share their art to a similar audience.

The app has a membership-based monetization system. This way no annoying advertisements will bother people on the app. Which in turn means it is targeted at people who are looking for a premium experience.

This also appeals to artists who want a sharing platform that is not covered in unwanted advertisements. 

The location demographic is based in the USA and EU because these regions have a lot of influence in the gaming and animation industries, which require a lot of professional artists to function. 

                                                        PSYCHOGRAPHICS 

The target audiences have:

- a deep need for art exposure. 

- a need to improve their visual library as well as complete conducting artist research.

- to showcase their artistic progress. 

- Interests in stylised comic book and animation art styles.

- They value feedback and improving their artwork. 

This app would be targeted the millennials and gen z generations due to the boom in the animation and gaming industries which came with the rise of the internet and social media. 

Social media platforms are popular among these generations, being a crucial factor in their development.

Logo - revision

After the presentation, I got some useful feedback and suggestion. There is no clear and detail explanation in my last version and only black and white make it looks boring and hard to understand. So I want to record the process of this logo in this blog and explain my ideas to you in more detail.

Firstly, I start to think about the colour of my design. Obviously, most of the colour in it is bright, because this is a social application and it is about creating and communication. The primary colour is yellow. "It is often described as cheery and warm and increase metabolism and it is also the most attention-getting colour."（Kendra Cherry 2020）Yellow and purple are complementary colours, so I use it with different colour temperature, the left one is cold and the right one is warm. It seems like a process of temperature from low to high. I think I haven't explained the meaning of the figure in the centre very clearly. It's a man with a very energetic and exaggerated action to express the vitality of this application, and there are three English characters in this figure(arms, body and legs). They are the initials of creativity, communication and colourful.

 The green and red are used in the corner, they are a very strongly contrasting colour. It can help guide the eyesight to the centre with lines, without it, your eyesight will only move from top-left corner to right-bottom corner. 

Then I use the clip mask tools to limit the shape into the square, that makes it looks more formal.

I used a font called '04b 31', the left one is original and the right one is stretched. I want to make some change because the original one is too long. But I am not sure if it works. So I disgust to do the next step first.

I try to add some colourful shadow. Because I want to make it looks more attractive and interesting. So it is used colour from the figure to be more harmonious.

I add the shadow for both two versions, I think the left one is more natural and the right one has a strangle angle, so I choose the left one to be my final piece.

I make a screenshot from my phone and check the sketch. It's more attractive than other applicants because of the colour and rich shape.

Kendra Cherry (2020). The Impact of the Color Yellow on Your Mood. [online] Verywell Mind. Available at: https://www.verywellmind.com/the-color-psychology-of-yellow-2795823 [Accessed 8 Feb. 2020]. 

UI board & Peer and Tutor feedback

This is the Feedback after my presentation from Peer and Tutor Feedback.  I did not do well in this presentation because of lacking research before. It cause I can not explain the aim of this design and detail. So I modified my design based on the feedback and do the target market research. And I added a design description to my later blog.

Alpha version of 'Creator'

The software I use to make this user interface is 'Balsamiq'. It's my first time to use it, but I have to say it's very easy to use. It provides a lot of icons that you can just drag out and use them. So far, the only drawback is it doesn't have many interactive functions. The answer from the official is they do not provide the function that you can not do on the paper.

They are the Sign-in page and Sign-up page. You can log in through click blue button or create a new account by clicking the green button. If you need any help, just click the button on the bottom right corner.

Then you will get into the feedback page, and you can put your question into the text area. If you have noticed the red arrow on the top left corner, that's the hyperlink label, you can point to the other page by using it.

This is the home pages module, you can see a lot of hyperlink on them. It was divided into three parts: Illustrations, Mangas and Novels. You can see there is a little icon and number on the top right corner of the image. That means how many pictures in that linking, and you can click the heart button, it will turn to red to prove that you like it. 

This is another module, as its name, you can watch the Newest works from other artists, and the 'Recommended Users' module will take you to the hot artists recently.

If you know the name of the work, the artist or the label, this will be a very convenient function page. What you only need to do is enter the keyword and the system will help you to find what you want.

This is the sidebar page, you can open it by clicking the little button on the top left corner. You may say 'You put some same function as the home page, it will make the interface look not concise enough.' But what I want to make is an integrated panel that you can go to everywhere in this application through this panel.

You can submit your work on this page, and you must give it tags, it's one of the unique selling points of this application. The more detailed the tags classify, the easier it is for users to find what they want.

You can check your work here.

Here is your collection of work, and you can use the filter to chose what you want.

You can check your browsing history here.

This is designed for users' personal space.

This is the rough structure of my application. I will go on to add new functions and new interface style.

The process of making the Logo

The software I used was Adobe Illustrator to make the logo. First, the sketch was put in the lowest layer, decrease the opacity and be locked(keyboard: 'Ctrl+2'; unlocked: 'Ctrl+Alt+2'). I used the Rounded Rectangle Tool to make the border. The stroke is 10pt, and the colour is black. There is no other colour in this design because the mangas are used to be black and white.     

The next step, I want to add some lines, So I used the Line Segment Tool and copy another one, then you can hold 'Control' and press 'D' to repeat the last step to make a lot of duplicates.

 The 'Clipping mask'(keyboard:'Ctrl+7') is the technique of how to make the group of lines limited in the square. So the first thing you need to do is group the lines by 'Ctrl+G', then choose the rounded square and the group of lines and hold Ctrl, press '7'. The result will be like this.

I adjusted the lines manually by 'Directly Selection Tool'.

The blend tool(W) can make the shape with gradient size and you can use the repeat function I have just told 'Ctrl+D' to make the different combination.

You can use the Clipping mask technique in here too.

 Finally, I adjust the direction of the dot matrix.

This is the 'Login' page of my application. I'm still working on it and I will show it in the next post.