Week 7

Week 7 

Lecture - In week 7 lecture class, lecturer talk about the fundamentals of website layout. Website layout design is about balancing aesthetics with practicality. An effective website layout arranges information in a clear and logical sequence, ensuring coherence. It enhances visual appeal and directs users' attention to key elements. Furthermore, it contributes to branding by employing spacing, alignment, and scale strategically.

The lecturer discussed the concept of visual hierarchy, which involves styling design elements to create contrast and emphasize specific content. Reading patterns, represented by directional lines, illustrate how users typically scan web pages. The fold marks the point where a web page is cut off due to screen size limitations. A grid system provides a layout structure based on precise measurements and guidelines. White space, also known as negative space, refers to the empty areas within a design.

Regarding website layouts, the lecturer mentioned several common types. A single-column layout organizes content sequentially in one column. A two-column layout presents content side-by-side in a split-screen format. Asymmetrical layouts achieve balance in unexpected ways, such as featuring a large visual element on one side paired with smaller elements on the other.


Practical - In week 7 practical we creating a website structures inside include flowcharts, sketches, wireframes & mockups. First i need to customize my flowcharts, and doing the sketches and the mock drafts for the website wireframe for this week. In my flowcharts, i have home, portfolio and a contact. In the home page i will put a profile talking about me and a cv to introduce myself, the second will be the portfolio. The portfolio will have 3 different content such as logo deign, poster advertising and campaign, and the last will be the contact. After i finished my flowchart, i start doing my sketches for my website page.

Sketches 

After i finish the sketches, i started to do my low-fidelity wireframes and high fidelity wireframes. Here you can see i using the dark color as my main color, and using different layout and design in each of the page. In the home page, there will have my picture and the below will be the show reel. And for the about page, I will also put a picture of myself and do a short introduction, and for the portfolio page, i will put my 3 different content of my service so that customers know what type of services that i provide. lastly will be contact, the contact page will have my phone number, gmail and social media so that can easy to find me and know about me.  


Low- fidelity wireframes 

High - fidelity wireframes




评论

发表评论

此博客中的热门博文

Week 1

图片
Week 1  Lecture- The first lecture session of this week is talking about some of the basic of the web design and some of the principles that students may use when they finish or start their assignments. First and foremost, the lecturer let the students start to create their blogs for the lecture class and practical class so that the students learn how to observe from the inspiration. Therefore, they can create an interesting website. The most important thing that the lecturer mentioned in the class is user interface (UI) and user experience (UX). User interface is all about the interaction and visuals such as the toggles, icons and other visual elements. While the user experience is about all the interaction with the users.  Week 1 Practical -This is our first practical class; the lecturer explains the assignment to student that what to complete in this semester for 14 weeks. Lecturer wanted student to open a blogger for e-portfolio and open a board for web design in Pinterest...
阅读全文

Week 14

 Week 14 Lecture- In the lecture session of week 14, students showcased their work for Assignment 3, which involved designing websites for clients. Each group, including ours (Group 3 Group 1), presented the layouts and features of their respective websites. During the presentations, the website functionalities were demonstrated by navigating through different sections and highlighting key navigation features. Every student attentively observed and absorbed the presentations delivered by the different groups.
阅读全文