BHGD3134 WEB DESIGN & PRODUCTION - WEEK 7 PROGRESSION

BHGD3134  WEB DESIGN & PRODUCTION

WEEK 7 PROGRESSION (A2)

Creating Website Structures: Flowchart, Sketches, Wireframe & Mockup

Flowchart

 The complete flowchart of how my final website should be work. From Welcome page then About then Portfolio the Contact, last Blog.

Subparts of each pages/interface also stated in the flowchart.

Sketches

Rough sketch of how the overall website will be looking like. Minor changes will be occurred during the process of executing the final artwork / website.

Wireframe (Low-Fidelity)

A low fidelity wireframe is an application, web page, or digital screen's skeleton. It will contain the basic components that the final project will feature. Designers and programmers can see potential locations for buttons, text, images, and interactive features with low fidelity wireframes. The figure below is my website low-fidelity wireframe. 

Wireframe / Mockup (High Fidelity)

In the later phases of the design process, a high quality wireframe depicts the appearance and feel of the final product. High-fidelity wireframes use real content, typefaces, colors, image dimensions, and branding features in addition to the placeholders and "lorem ipsum" text seen in low-fidelity wireframes. The figure below shows the high-fidelity wireframe, in another word is the websites mockup.

LECTURE (FIRDAY, APRIL 5TH 2024)

On the seventh week of lecture, the lecturer stated aesthetics and usability must be balanced in website layout design. The website should appear good, no doubt, but it should also serve the user's purpose as effectively as possible. The goals of a website layout is information display, user engagement and branding. One technique to style the design elements for greater contrast and prioritize some material over others is to use visual hierarchy. Depending on the objective of the page, the most crucial elements of the layout are those that the user must quickly recognize. Headlines, value propositions, calls to action, and navigational aids are examples of these. Reading patterns are shown by directed lines and describe the typical ways that readers scan pages.

Then, "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 viewers must scroll down to view, whereas "above the fold" refers to content that is accessible as soon as the page loads. A grid system is a design that follows strict parameters and principles. Columns, which are areas set aside for content placement, and gutters, which are the voids in between columns, comprise the grid.

Last but not least, simply said, white space, also known as negative space, is the empty space in a design that has no content. White space might be the most valuable component of a website layout, despite being simple to ignore and frequently tempted to pack with material. Adding on, there are three common types of website layout mentioned by the lecturer , which is single column layout, two column layout and asymmetrical layout.