Interactive Design / Project 1: Landing Page Design Prototype
24/04/2023 - 08/05/2023 / Week 4 - Week 6
Kim Min Ah / 0356145
Interactive Design / Creative Media / Taylor's Design School
PROJECT
Project 1: Landing Page Design Prototype
ClASS NOTES
Week 4 (26/04/2023)
Further Reading
-Every great landing page is a composition of core elements.
-Know the rules well, so you can break them effectively.
-Understand the anatomy and rules of the landing page first, then find clever ways to optimize the page depending on the goal of the website.
Components of a Landing Page
-A unique selling proposition
-A hero image or video
-The benefits of your offering
-Some form of social proof
-A single conversion goal (or call to action button)
Week 5 (01/05/2023)
Lecture Video
To design a large website successfully, it is important to organize information logically; so users can easily find what they are looking for.
To organize a website
chunking
-dividing the content of the sites into chunks of information
-The contents within each chunk can be arranged in a hierarchical order.
Information Architecture:
-It describes the overall general ideas and structure of a website.
-Every website has an information architecture, but it is particularly crucial in a large and complex website.
Fig 1.1.1 Information architecture example, Envatotuts
https://webdesign.tutsplus.com/tutorials/what-is-information-architecture-ux-tips-and-examples--cms-40064
Mental models:
-Users build mental models when they face a brand-new and complex information system.
-The success of the arrangement of a website depends on how well the site’s information architecture matches the user’s expectations.
-Efficient website design depends on a balance of major menus or home pages with individual content pages.
Goldilocks problem:
-When the structure of a website is too shallow or too deep.
Site structure themes:
Hierarchy
-Simple and inevitable in web design.
Most websites adopt multitiered hierarchical or tree architecture(It has a powerful advantage for complex websites).
Sequences
-most appropriate organization E.g.) chronological, alphabetical, topics from general to specific, etc
Site files and directory structure:
-A site diagram is useful in the web page production phase.
-The pattern of the directories of the website should reflect the major content divisions and structures.
Fig 1.1.2 Site files example, Web Style Guide
Wireframe:
-Concern about the possible look and ambience of the home page.
-Must contain strategic goals, functions and structure of the site.
-Brings a consistent modular structure.
Week 6 (08/05/2023)
Web standards:
W3C(World Wide Web Consortium) has defined many web dozens of web standards markup languages.
Among them, the ones we are going to use:
HTML
CSS
Why is web standard important?
To provide a better experience for both developers and users.
How does the web work?
-Through domain
-Through a network of servers (DNS servers) IP address
HTML
< >
An opening tag and a closing tag
<element>information</element>
<p> : paragraph
</p> : paragraph closed
Attributes provide information about the contents of elements.
e.g.)
<p lang=“eng-us”>Paragraph in English</p>
HTML has six levels of headings:
<h1> main headings
<h2> subheadings
.
.
Bold
<b></b>
Italic
<I></i>
Ordered list
<ol>
<li>The list items</li>
<li>The list items</li>
<li>The list items</li>
</ol>
Links
<a></a>
INSTRUCTIONS
Fig 1.1.3 Interactive Design Module Booklet
Project 1: Landing Page Design Prototype
Original website
Design Problem & Direction
Fig 1.1.4 Website description
Fig 1.1.5 Wireframes progress
Fig 1.1.6 Wireframes
Fig 1.1.7 Prototype progress, Adobe XD
Fig 1.1.8 prototype (PDF)
FEEDBACK
Week 6 (08/05/2023)
-Use metal module.
-The logo is easy to recognize when it’s located on the left side. (Menu icon on the right)
-Still not enough information.
-Have to provide an extra page to show the hidden navigation bar (menu).
-More description and emphasis on coupons.
Design Problem & Direction
Fig 1.1.9 Final design problem & direction (PDF)
Fig 1.2.1 Final wireframes
Fig 1.2.2 Final prototype (JPG)
Fig 1.2.3 Final prototype (PDF)
FEEDBACK
Week 9 (29/05/2023)
The chosen website for projects 1 and 2 is too simple. Need to choose another website for Project 1.
Second attempt
Fig screenshot of the new chosen website
Yale school
Header
Navigation:
Home
About the school
Apply to the school
Exhibitions
Publications
News
Public events
Side
Visitor Log in
Edit this page
Page History
Body
Quick links
Description of the Web page
News banner
Happening at SOA
Community bulletin board
calendars & newsletters
Footer
Design Problem & Direction
Prototype link
https://xd.adobe.com/view/01124980-4dce-4718-b269-76e3f29286a3-5441/
REFLECTION
Experience
For the past five weeks, I could learn a lot through working on weekly exercises and Project 1: Creating a Landing page prototype. I learned not only about learning the fundamental components and structure of a website but also about the importance of interaction between websites and users.
Observation
I observed that designing a webpage with high usability is quite challenging than it seems. There are many things to consider to maintain a good flow on a website: the order, alignment, and an adequate amount of visuals. In addition, to communicate without unnecessary confusion, the size, thickness, and colours of letters need to be considered carefully. I tried to come up with the best outcome I could at my current learning stage, but I believe some parts of my design still require more improvements. I need to do more research and reading for further progress.
Findings
I found that the lectures by Mr.Shamsul were helpful for me to comprehend a basic understanding of overall learning progress. Moreover, I've got to practice what I absorbed in classes by working on weekly exercises after listening to the lectures; in that way, I managed to memorize it better.
Comments
Post a Comment