W7- Wireframes Development

WEEK 7

PRACTICAL

WIREFRAMES

Lecturer assigned us for the part 2 of assignment 2 which is doing the flowchart, low-fidelity wireframes and high-fidelity wireframes/mock-ups. 

FLOWCHART

The first step to do when start to designing a website is to create a flowchart that determine the user flow for a website. 
The website will be including 3 pages which are projects, about and contact. Below each pages have different sections. 

SKETCHES



Explore in the sketches of low fidelity wireframes and choose which one is the most suitable for my website design, vibe and feeling. It allows me to give the option to myself to develop my website. 

LOW-FIDELITY WIREFRAMES




The low fidelity is to create the overall structure for the website. It serves as the base of the website. Therefore, I've explore many types of the layout, text size to make sure the consistency between each pages and also it's suits for the feelings of my website. After the exploration, I've choose the best wireframes to proceed to the high-fidelity wireframes. 

HIGH-FIDELITY WIREFRAMES


The high fidelity is almost the mock-ups for the website. To shows out the overall visuals, feelings and vibes. I've already put some of the images and texts inside. The exploration of doing high fidelity wireframes is that allows me to know how to keep the consistency for all of the pages in the website. The overall design will be playing with text sizes as mentioned in the last few weeks of blogs. The colours will be also neutral colours that can balance up the overall visuals.

LECTURE

WEBSTIE LAYOUT

The lecturer stressed the importance of balancing aesthetics and usability in website layout design, ensuring it effectively serves user needs and engages audiences. A good website layout organizes information, makes it easy to scan, and facilitates user engagement. It also leads audiences towards interests and encourages exploration. A good layout also aids branding by aligning, spacing, and scale, ensuring consistency and consistency.

VISUAL HIERACHY & READING PATTERN

The visual hierachy is the way to lead the direction of looking in the website that guides to audiences where to look at. Thus, the important messages has to be obvious and set as the points to lead the audiences to look at it. It includes Headlines, value propositions, calls to action, and navigational aids are examples of these. 

Reading patterns are represented by directional lines and describe the typical ways that users scan pages. Placing elements along the viewer's sight lines strategically is how you incorporate reading patterns into your layouts. The Z pattern (Zig-zag) is the most popular pattern to take into consideration.



ABOVE THE FOLD

As the lecturer said that "The fold" in web design refers to the point at which a web page breaks because of screen size restrictions. "Below the fold" refers to content that users must scroll down to view, and "above the fold" refers to content that is visible as soon as the page loads. So the designers has to play well with the design using the fold and be careful of it. 


GRID SYSTEM

Next, A grid system is a design that follows strict parameters and guidelines. Columns, which are areas set aside for content placement, and gutters, which are the voids in between columns, comprise the grid. The content and visuals placement or layout have to be align with the grid. Thus, it will shows the consistency and cleanliness for the website. 


WHITE SPACES

White space is also known as negative space. It is the empty space in a design that has no content. White space can be the most valuable component of a website layout, despite being simple to ignore and frequently tempted to pack with content. If playing well with the white spaces, it can creates a clean and minimalist vibes for the designs. 


THE COMMON TYPES OF WEBSITE LAYOUTS

The lecturer displayed the common types of website layouts in the lecture slides. Which are mentioned in the last few weeks' lesson.  The first type is single column layout. Which the content is arranged sequentially in one column, usually with a centered alignment, in a single column layout, it's usually used in mobile size (version) of website that is easy for the audiences or users to scroll and look. 



Then, the second type of website layout is two column layout, The two column layout shows content side by side, occasionally in a split-screen configuration. Next, the third types of website layout is asymmetrical layout which by combining a large-scale image on one side with numerous smaller elements on the other. It works well to increase emphasis by making some parts more dramatic.



Comments

Post a Comment

Popular posts from this blog

A1- Summary

Image
 A1 SUMMARY:   This task has taught me about the design process as a whole. The techniques for designing the logo, website banner, and CV. Furthermore, I discovered how useful logo design standards are; when I utilise architecture and professional rules, the results are more exact and excellent.  During the process of creating the website banner. I learned about the importance of images; they define the overall atmosphere of the website and must be properly chosen. Furthermore, I experimented with several layouts and images to achieve the desired style (as demonstrated in the weekly notebook below). The more I investigated, the more possibilities I had for the final and learned from them. The knowledge I learned for my CV is simple and formal. It doesn't have to be elaborate; it's just simple information to let the company know about me; it should be catchy but not overly fancy. As a result, I discovered that using an icon is an effective method to highlight the mos...
Read more

W1-Website design fundamentals

Image
WEEK 1 PRACTICAL During the first week practical, the lecturer was assigning us for the assignments that the students need to complete in the 14 weeks of the semester. Firstly, the students need to create a Pinterest board to shows the inspiration of the students from there for the assignments and create a blog page for the weekly journal for explaining the ideas that we get inspired by.  The images below are the styles that I get inspired by. Which they are all using a very interesting ways to create a creative designs by playing with contrast of the size of font, the font they are using are modern which is mostly Sans Serif and the simple but large subject matters (images) that can deliver the message directly and strong with the visuals.   I like the design of the UI and UX of them. Which they will move or the subject matter will slowly transforming  according to our movement of the cursor  and yet the designs are clean and simple by using a plain background ...
Read more

W2- Logo Development

Image
WEEK 2 PRACTICAL During the second week of the practical session, the lecturer brief about the part 1 of the assignment 1 which is related to create a logo. The first thing that the students need to do is to find references for the logo. To know that what they want to do and what visual message that they want to deliver to the viewers.  LOGO & LOGOTYPES The differences between logo and logotypes is that logo representing the simplified icons, visuals and symbol. While the logotypes is about text. It's about the full name of the logo, a kind of description that describe the logo. Everything that relates to "types" that means typography in design. Lecturer used McDonald's as the example, the alphabets "M" is the simplified of the McDonald's. The first 10 years of McDonald's, they are not using just only alphabet "M" in their logo. They constantly renewing and evolving their logo. Therefore, I have found a few references as shown below:  R...
Read more