Week 7

Practical

Flowchart

Before officially entering web design, designer need to formulate the rough flowchart of the web page. This can help designers better connect each section when designing the prototype of a web page. 

Flowchart

The next step is to draw sketches of the web page UI. This step is to visualize the designer's imagination and help the web design process flow more smoothly.

 

Low-Fidelity Wireframes

Afterward, designers can begin preparing low-fidelity wireframes. This is to convert the sketches from the previous step into a digital version. It is obvious that there are some differences between the two. This is because the purpose of sketches is to guide designers in the general direction of design. This does not mean that designers need to design entirely based on sketches. 

High-Fidelity Wireframes

After confirming that there is no problem with low-fidelity wireframes, you can proceed to the next step, high-fidelity wireframes. The only difference between high-fidelity wireframes and low-fidelity wireframes is that high-fidelity wireframes require content to be added to them. This includes copywriting, the use of homepage colors, and font styles.

Lecture

A visually appealing website layout effectively guides user navigation and increases engagement. 

Through proficient in employing various layout types, including single column, two columns, and asymmetrical designs, designers is able to present content innovatively. By understanding and integrating reading patterns like the Z pattern, designers can optimize user interaction and keep visitors engaged on websites.

Designers also can organise information efficiently on website layouts to ensure seamless navigation and intuitive design. This involves structuring content logically to prioritize important information and present it prominently, while less critical details are displayed in a subdued manner. Also, the significance of negative space and proper spacing in enhancing overall design and user experience. Designer can guide user attention to key areas of the website by strategically using visual elements such as contrast and emphasis.