Interactive Design Task 1: HTML Document Development & HTML, CSS Document Development, CSS Layout Model
23.4.2024 - 11.6.2024 ( Week 1 - Week 8)
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Interactive Design
Task 1: HTML Document Development & HTML, CSS Document Development, CSS Layout Model
Jump Link
1.
Lectures
1.1 Week 1
1.2 Week 2
1.3 Week 3
2.
Instructions
2.1 Exercise 1: Web Analysis
2.1.2 Website 1: Vendredi Society
2.1.3 Website 2: TRIONN
2.2 Exercise 2: Web Replication
2.2.2 Web 1: Morgan Stanley
2.2.3 Web 2: Ocean Health Index
3. Feedback
4. Reflections
Lectures
Week 1
Mr Shamsul gives us a briefing bout MIB of Interactive Design.
- Weekly exercises: Only three, weighted 5%, 5%, and 10%. Final exercise: recipe cards.
- Submission: E-portfolios only, no images.
- Assignments: Sketch 5 drafts before Project 1. Use A4 paper or tablet for wireframes. Projects: prototype (Project 1), online interactive (Project 2), single-page fan page (Final).
- Website analysis: Includes navigation, search bars, titles, images, clickable caption links, labels, and action buttons. Visual hierarchy: font size, headlines. Design: Simple, top image, bottom footer, visible top bar, secondary links, ample white space.
- Reminder: Font readable top to bottom, left to right. Centre alignment for short sentences, left alignment for cleanliness with longer sentences; avoid right alignment.
Lecture Note 1: Usability: Designing Products for User Satisfaction
Usability
- Essential in UX Design for effective user interaction.
- The second level of UX Design.
- Features should accommodate user needs and contexts.
- The interface should be easy to navigate without expert knowledge.
- Highly usable interfaces efficiently guide users to goals.
- Consistency in web design is crucial for both visual elements and functionality.
- Ensures coherence across headers, footers, sidebars, and navigation bars.
- Consistent design enhances user intuition.
- Includes uniform navigation, layout, fonts, and branding.
- Crucial for users to recognize and learn patterns.
- For example, all buttons should have the same appearance and function.
|
| Fig1.1 Page in Sime Darby.com.my |
- User interfaces should be simple.
- Simplicity means minimizing steps, using clear symbols and terminology, and preventing errors.
- Simple designs lead to better user experiences.
- Helps users achieve goals faster and more efficiently.
- The more visible, the more likely users to know and use.
- Conversely, hidden elements are hard to find and use.
- Users should easily see options and access them.
- Communicates interaction results.
- Signals success or failure of task performance.
- Example: Hovering over navigation items on desktops/laptops triggers colour change or submenu loading.
- Alerts users to potential errors.
- Aim to make tasks error-free.
- Important because humans are prone to mistakes.
|
| Fig1.2 Example of Error Prevention |
- Complex Interfaces
- Confusing Navigation
- Poor Feedback
- Inadequate error handling
|
| Fig2.15 Prototype in Figma |
For our group task, we are tasked with designing a new app for a local restaurant. The app should allow users to easily access information about the restaurant's menu, location, and operating hours, as well as make reservations. In addition to these requirements, we need to consider usability principles such as consistency, simplicity, and visibility throughout the app design process. And we decided to use Figma to do the prototype.
Fig2.16 Understanding Website Structure PPT
- Website structure is essential for creating a user-friendly and accessible website.
- It impacts user experience, SEO, and overall website performance.
- A well-structured website facilitates easy information retrieval and keeps users engaged.
- Prioritizing a clear and intuitive website structure enhances usability and search engine visibility.
A website typically consists of three main parts: the header, body, and footer. Within the body, content is organized using headings to create a hierarchical structure. Navigation menus further aid users in moving around the website.
Instructions
Interactive Design MIB
From Week 1 to Week 8, weekly class exercises are conducted to provide students with basic website creation and development knowledge. These exercises aim to demonstrate students' understanding of web development through prototyping and development processes.
Exercise 1: Web Analysis (Week 2）
- Analyze an existing website and identify areas for improvement.
- Help to develop critical thinking skills and gain insights into web design.
Exercise 2: Replicate a website (Week 3)
- Replicate an existing website to gain a better understanding of its structure.
- Help to develop design skills using Photoshop and Adobe Illustrator.
Exercise 3: CSS Layout (Week 8)
Exercise 1: Web Analysis
- We need to choose 2 websites from the link given do a web analysis, and write the report in an e-portfolio.
- I divide it into 6 main parts, which are purpose and goals, design and layout (use of colour, typography, and imagery), content (quality and relevance) ( accuracy, clarity, and organization), functionality (usability, navigation, forms, and interactive elements), performance ( load times, responsiveness, and compatibility with different devices and browsers), strength and weakness and consider how they impact the user experience.
|
| Fig1.3 The Website of Vendredi Society |
The first website I chose is called Vendredi Society, which is a digital design studio based in France, working worldwide. Their motto is "deliver brands with high objectives."
Purpose and Goals
The purpose of this website is to showcase their work in order to attract talented individuals and brand collaborations. It covers a wide range of fields, including Otio Home in the Internet of Things, Press Play On Tape in the music industry, PrestaShop in e-commerce solutions, as well as Mojo App and Horse by Renault. These encompass designs in branding, websites, apps, motion graphics, user experience (UX), campaigns, and content.Design and Layout
Colour
|
| Fig1.4 Color Plate using |
The website has a good colour scheme, using colours that are not too sharp
but just right. They strike a balance where the saturation is not too high to be glaring or abrupt, nor too low to be dull and unappealing. Additionally, they use yellow for key projects, which grabs the reader's attention, and correspondingly use yellow icons throughout the site. The well-chosen colours create a comfortable browsing experience.
Typography
|
| Fig1.5 Typography |
This website primarily utilizes two types of fonts, serif and sans-serif.
Sans-serif, on the other hand, is employed for the remaining content, offering a clean appearance. In terms of titles, underlines are utilized to emphasize expression. Regarding content, neither italics nor bold fonts are used; instead, differences are shown through the grayscale of colours.
However, this approach may lead to readers overlooking the content, particularly if the colour is light or if it blends with the background colour. Finally, alignment is balanced, primarily leaning towards left and centre alignment, which presents a simple, tidy, easily understandable, and uncluttered appearance.
There are some deficiencies in font sizes, especially in titles, where the differences in font sizes are minimal, making it easy to confuse. It would be best to choose bold fonts or alternative fonts. Line spacing and letter spacing do not appear to have been specifically adjusted, but overall, the text remains easy to read.
Imagery
|
| Fig1.6 Imagery |
In terms of imagery, the website includes a plethora of relevant photos and videos that keep viewers engaged without causing confusion. The quality of the images is also good, avoiding pixelation or loading issues.
Videos play smoothly and seamlessly, featuring finished project showcases, sketches, and related content. The blending of colours is well done, avoiding any clashes. Image sizes are consistent, preventing uneven layouts or imbalance.
The formatting is clear, ensuring smooth loading without any buffering issues. However, the abundance of images and videos may pose problems in cases of device lag or poor network connectivity.
Layout
|
| Fig1.7 layout |
I believe it can be divided into three categories. The first category consists of single images or videos paired with content. Next, the second category features a theme and its corresponding content, segmented into several sections. The final category is for browsing, allowing users to scroll for more content or even jump to other pages for browsing.
The website name and logo are positioned in the top left corner, not overly large or conspicuous. They change colour depending on the background, making them easily noticeable without excessively drawing attention.
In terms of layout, while whitespace can alleviate eye fatigue, in some sections, there's too much whitespace, making it look empty and giving the impression of insufficient content.
Content
Quality and Relevance
|
| Fig1.8 Quality and Relevance |
In terms of content, it includes details about individual projects, introductions, key performance indicators, attributes, platform content, and even designer slogans, among others. This ample information caters to users' basic needs and provides a certain level of understanding about these contents.
Additionally, the relevant images and videos, with their smoothness and blended colours, can attract attention, with even design sketches included.
Accuracy
The content included is generally highly accurate, as it primarily consists of straightforward presentations showcasing past work without complex descriptions. This makes it easy to understand and avoids the feeling of monotony due to excessive text.The sources of the content are reliable, with corresponding links provided to allow for further understanding of related information.
Clarity
|
| Fig1.9 Clarity |
The content is simple and clear, with each section having a title. Important parts are highlighted with dark-coloured fonts, emphasizing and strengthening key points. Additionally, in the content sections, important elements are highlighted with special colours to enhance their attractiveness.
There is also no use of overly complex language, allowing viewers to
easily and clearly understand the intended message. Furthermore, relevant
images and videos contribute to the clarity of the content.
Organization
|
| Fig1.10 Organization |
This section excels because each content segment fills the
entire page, avoiding distractions and making it easy for readers to focus
on the theme and understand the material. Most of the content is
well-presented through images and videos, providing relevant examples and
facilitating comprehension.
The paragraphs are clearly delineated, preventing large amounts of
content from being mixed together. The only shortfall is that the titles
are not particularly prominent in size, which might make them seem less
integral to the content. However, using dark-coloured fonts to emphasize
key points within the content helps compensate for this drawback.
Functionality
Usability
|
| Fig1.11 usability |
Additionally, simplicity and visibility are well-executed, with prominently displayed yet unobtrusive buttons. Feedback is very responsive, providing quick responses to button presses. Error prevention is effectively implemented since all buttons are simple and concise, reducing the likelihood of errors due to overly complex displays.
Navigation
|
| Fig1.12 Navigation |
The navigation structure clearly and simply displays the themes of the pages, letting the viewer know what the current content is. Regardless of where the page is, the navigation keys remain at the top of the screen. When the mouse hovers over them, they change colour, indicating they can be pressed, and they also exhibit colour changes.
The navigation content is not overly cluttered or filled with too much information, avoiding unnecessary confusion for the viewer.
Interactive Element
|
| Fig1.13 Interactive Element |
There are quite a few interactive elements on the website.
Whether it's the navigation buttons, which change colour when hovered
over, or clickable text that flashes to indicate clickability.
Additionally, in the image display section, there are five contents, and
the location of the screen interface will display among them.
Furthermore, when scrolling to the end, it automatically returns to the
first page, creating a sense of endless scrolling. Text underlines or
arrow movements also serve as interactive elements. Among them, my
favourite is the rotating circle in the videos, which creates a sense of
space and is very smooth. The appearance of the two figures' photos is
also very textured.
Performance
Load Times
The loading time of this page is still very fast, without
any lag or issues with images failing to load. Transitions between text,
images, and videos are all very smooth. Although there are many images and
videos, it doesn't affect the speed.
The only
issue that might arise is if the webpage is left open for a long time,
which could lead to gradually increasing lag due to high cache usage.
Responsiveness
|
| Fig1.15 Device Different |
The first issue is with the navigation buttons on tablets; although they change colour when hovered over, the original text remains visible, causing overlap. The second issue, also on tablets, is that images do not fully display as the page scrolls down. However, the layout becomes more compact, which I personally prefer for a content-rich feel. Nevertheless, there is still plenty of whitespace.
Compatibility with different devices and browsers
|
| Fig1.16 Mistakes |
In terms of compatibility, the website is supported on smartphones, tablets, and computers. Different browsers have virtually no impact on the webpage; its performance remains consistent across all of them. There are no instances of offsetting, lagging, crashing, or failing to load.
Strength
For the strengths of this website, I believe it successfully
showcases its work with content that is simple and easy to understand. The
concise content and straightforward descriptions prevent any confusion.
The integration of colours and fonts effectively emphasizes key points,
with colours blending seamlessly without any jarring contrasts. The
content quality is high, without any exaggeration or false information.
The abundance of images and videos keeps the experience engaging and
avoids dullness. The navigation is clear and user-friendly, with no
actions that defy common sense.
It is also compatible across devices, with no need for lengthy loading
times, ensuring a smooth overall experience that is comfortable for
viewers.
Weakness
The drawbacks include excessive whitespace, which creates a
sense of lacking content. The whitespace is too large, contributing to
this feeling.
The titles could be more prominent to avoid blending in with the content.
Additionally, on tablets, there may be issues with the overlapping of
navigation button content, as well as images not displaying fully and
being obscured.
Solution
These drawbacks are actually minor and may go unnoticed by
the average user. However, addressing them would enhance the user
experience, making it more comfortable and easier to differentiate
content.
Decreasing whitespace, adjusting the layout, and modifying titles using
bold, italics, or different fonts to enhance differentiation can be
beneficial. As for the issues on tablets, improvements in interface
display are necessary.
These issues do not impact the website's goals and purpose, as they are
not related to content or major issues.
|
| Fig1.17 TRIONN |
The second website I chose is called TRIONN, which is a design agency based in India. With extensive experience and a professional team, they are committed to crafting design vision into a legacy that endures.
Purpose
|
| Fig1.18 Light and Dark Mode |
They say, "We roar with creativity, staying updated with the latest tech to make your brand a formidable force in the digital wilderness and deliver exceptional website and app experiences." These objectives are clearly displayed on their website and reflected in the services they offer.
Goals
Their goal is dedicated to providing their partners with
excellent websites and platforms to showcase and promote their products
and fields, achieving a win-win situation through successful promotion.
In terms of design, improvements in UI and UX by skilled professionals
can allow users to be attracted to the content clearly and simply, while
smooth and seamless apps or websites will make users feel comfortable,
thus willing to use and promote them.
Each project they collaborate on includes an introduction, clearly
displaying their mission, and ends with a brief slogan to summarize.
Design and Layout
Colour
|
| Fig1.19 Color Plate |
The colours used on this website are not overly complex or vibrant. It features both light mode and dark mode for viewers to switch between, which is excellent. They don't have to figure out how to enable dark mode themselves, as it could affect the display of content and their user experience.
The careful attention to colour selection by the designers is evident. They haven't simply copied and pasted colours but have made subtle adjustments in saturation and grayscale based on the main colour scheme, as reflected in the colour palette mentioned above.
In the light mode, pure white isn't used, and in the dark mode, pure black isn't used, preventing white from being glaring and black from being dull. The overall integration is harmonious. Red and yellow are used to emphasize important messages, and strong colour contrasts attract attention.
In terms of headings, colours are gradually filled in the fonts, and the colour coordination with movement makes it easier for people to notice the headings. The colour contrast in the content is sufficient, making it very easy to understand and read.
Typography
|
| Fig1.20 typography |
On this website, only one font is used throughout, both in headings and
content, which is a sans-serif font, giving it a clean look. It aligns
with the website's style, presenting content in a clean and efficient
manner with high readability.
Additionally, it appears to be a custom font, with modifications such as
the 'K' resembling a lightning bolt shape and slight alterations to
letters like 'g' and 'j', adding uniqueness and creativity compared to
standard fonts.
There is a noticeable difference in font sizes between headings and
content, creating a visual hierarchy. Line spacing and letter spacing have
also been adjusted to create a slightly compact appearance without
sacrificing readability; this balance is well-maintained.
Regarding font layout, left alignment and centre alignment are frequently
used, with the bold use of right alignment being quite rare. However,
since the content is concise, it does not pose a challenge to viewers.
Imagery
|
| Fig1.21 Imagery |
Additionally, the sizes of the images are just right, balancing well with the content. The website displays perfectly across different devices, with modifications and fine-tuning made specifically for various screen sizes. Even pages with numerous images are well-organized, with evenly spaced intervals and harmonious colour combinations.
The final touch that impressed me was the integration of images with questions, where an arrow serves as a flashlight, illuminating the area around it to reveal the image, creating a sense of mystery and intrigue that entices viewers to explore further.
Layout
|
| Fig1.22 layout |
The website layout is minimalist, with content and images complementing each other, striking a balance while clearly displaying the content. Each individual page focuses on a single major theme, preventing confusion for viewers, and the content is balanced across multiple pages, revealing a pattern.
The overall layout is comfortable and devoid of clutter, and the hierarchy allows for a sequential understanding, with larger to smaller page elements indicating a decreasing level of importance. It displays well across different device sizes, with the overall layout remaining largely consistent.
Content
Quality and Relevance
|
| Fig1.23 Quality and Relevance |
Additionally, the website's outsourcing firm has 20 years of experience and has received numerous awards, demonstrating their professionalism, and the displayed content is of high quality. The information provided is straightforward, making it easy for visitors to find and understand. Both headings and content are direct, avoiding confusion.
The smooth user experience, clear content, exquisite images, and videos all serve to capture the attention of visitors.
Accuracy
|
| Fig1.24 Accuracy |
Additionally, there are numerous navigation buttons provided for visitors to click on, facilitating access to relevant pages for a deeper understanding.
Clarity
|
| Fig1.25 Clarity |
Each section has distinct content, making it easy for people to browse and understand the expressions within. Additionally, highly important information is highlighted using high-contrast colours.
Organization
|
| Fig1.26 Organization |
Pages are uncluttered, so clear segmentation is essential. Each page focuses on a single topic, allowing visitors to understand exactly what the headings and content are expressed.
Headings are prominently displayed with large fonts, ensuring clarity and important sections are highlighted with colours to draw the viewer's attention.
Functionality
Usability
|
| Fig1.27 Usability |
Its simplicity makes it easy to navigate, even for first-time users. Visibility is ensured as no content is obscured or too small to see, and feedback is prompt when hovering the mouse cursor, with no delays.
In clickable buttons, the cursor even enlarges to form a gradient circle area to attract attention, indicating to users that they can click. Error prevention is minimal, typically only occurring due to lag.
Navigation
|
| Fig1.28 Navigation |
Hovering over arrows triggers distinct colour changes, and other areas may be slightly transparently masked to clearly indicate their purpose. In sections featuring videos and related content, phrases like "view project" are displayed, along with elongated area borders, enlarged fonts, and various effects to showcase navigation buttons.
Interactive Element
This website boasts a plethora of interactive elements, each
seamlessly integrated on the homepage. They blend together seamlessly,
offering a smooth and visually appealing experience that enhances user
engagement and captures their attention.
Even the arrows have unique cursor designs, with a captivating smoke-like
dispersion effect that follows our mouse movements, urging us to explore
further. What struck me most was how this smoke animation interacts with
changes in sound; increasing the volume even triggers fullscreen smoke
effects.
While the background sound can be a bit noisy, there's a handy sound
control button to toggle the audio on or off. These interactive elements
guide users through various actions, including font enlargement, button
border expansion, gradient effects, and more.
Additionally, hovering over a project reveals the option to "view the
project," allowing users to learn more and interact with the content.
Performance
Load Times
The website responds quickly without any lag, and since it doesn't contain an excessive amount of images and videos, there are no lengthy loading times. However, there may be concerns about prolonged caching if the website is left open for extended periods, potentially leading to lagging issues.Responsiveness
|
| Fig1.29 Different Devices |
This website maintains high compatibility, displaying well on devices of different sizes with little to no changes or errors in layout, and no issues with image display. However, some advanced animations, such as the flashlight effect when hovering over arrows, are not implemented on smartphones and tablets.
For instance, the comparison between the two images above shows the difference between tablet and computer displays. The flashlight effect disappears on tablets, and the semi-transparent display of images around the flashlight also disappears.
However, this is normal as most people browse websites using computers, so it's not a significant issue. It just lacks a special experience on smaller devices, but the smoothness and responsiveness remain intact.
Compatibility with different devices and browsers
|
| Fig1.30 Different Devices |
The current mainstream browsers are Microsoft Edge and Google Chrome,
which actually share the same underlying engine. As for Firefox, Opera,
and others, while they are used by some, compatibility shouldn't be an
issue.
After all, a well-designed website should perform well not only across
different browsers but even on different devices.
Strength
This website has the advantage of having clear and specific purposes and goals, effectively showcasing their vision and basic information to help visitors understand them and potentially collaborate with them.The website overall is clean and concise, with harmonious and comfortable colour schemes that don't alienate or discomfort users. The layout is orderly and systematic, making it easy for visitors to find information, with distinct and clear titles for each section to avoid confusion.
The content is streamlined and directly conveys the information and messages, facilitating quick comprehension, and the hierarchy is evident, highlighting key points and the decreasing importance thereafter.
The overall layout is comfortable with clear focus points, and the colour scheme complements the fonts well. Additionally, options like sound control and light and dark mode are provided for user preference. Navigation buttons are clear and simple, without overly complicated options, and there are engaging interactive elements for visitors.
The website is compatible and responsive across various browsers and devices, ensuring fast loading times and smooth performance without issues displaying images or videos due to content overload.
Weakness
There aren't many drawbacks to this website, but if we're being nitpicky, the sound button isn't very intuitive. At first glance, it may not be clear what the difference is, and the sound can be a bit noisy. Perhaps a softer audio option could be considered.Solution
These issues don't really have a significant impact on the
user experience. After all, this website is already quite perfect, so you
wouldn't notice any drawbacks for the most part. Few people might even pay
attention to the sound, especially considering it's just background audio
on a webpage.
As for solving these problems, as mentioned earlier, one solution
could be to replace the sound with softer music and add a tooltip for the
sound button.
Exercise 2: Web Replication
In this task of web replication, we are required to select two provided websites. Our primary focus will be on comprehending their structure, dimensions, layout, typography, and color scheme. Using either Photoshop or Adobe Illustrator, we will replicate these websites, utilizing screenshots of the original sites as references. It is essential to pay close attention to details such as spacing, alignment, and visual hierarchy. For imagery, we can source free images from pexels.com, and for fonts, we can utilize those available in Google Fonts.
|
| Fig2.17 Web 1 Morgan Stanley |
I've picked the first website, Morgan Stanley. It has a clean and simple look to it, which makes it a great choice for this task.
|
| Fig2.18 Fonts in Morgan Stanley |
When I start replicating the website, I use the inspect tool to check the fonts and images. The difficult part is finding the same font because some fonts require a paid license, so I need to find a similar free font.
This website uses two font families: Karla and ms_glorolia_ii_std. For Karla, both the bold and regular weights are used, while for ms_glorolia_ii_std, the light and semibold weights are used.
|
| Fig2.19 Guide line and outline view in Adobe Illustrator |
I use the guide line to help me arrange and ensure the replication is at true location, remain tidy and similar as well. When the replication is done, i switch to outline view to double-check that no elements are missing.
|
| Fig2.20 Web Replication(left) and Web Screenshot(Right) |
The web replication is done. The final web replication is on the left, and the webpage screenshot is on the right.
|
| Fig2.21 Web 2 Ocean Health Index |
For the second website, I've chosen the Ocean Health Index. It's visually appealing with beautiful gradients and opacity effects that will need careful adjustment when we replicate it.
|
|
Fig2.22 Web replication(left) and Webpage screenshot(right) Website Outline view(buttom) |
The web replication is done. The final web replication is on the left, and the webpage screenshot is on the right.
Week 6： Submission for Task 1 prototype
Prototype CV
In this Assignment 1, we need to use Figma or Adobe XD to design a prototype of a resume or CV. This design will be implemented with coding in Assignment 2, so the complexity depends on our skill level. The content part should include personal details, education, work experience, skills, projects, and other relevant information, ensuring proper order and hierarchy.
For layout and visual design, we need to define the placement and flow of sections, and apply a consistent design, including typography, color palette, and spacing. We should incorporate relevant images and icons to enhance visual appeal.
 |
| Fig6.1 Natural Color Palatte |
At first, I chose this natural color scheme because it looked more cohesive and comfortable. However, when I tried to integrate it into my CV, I realized that it blended in too much, making the whole thing look bland and lacking eye-catching elements. It seemed inconsistent with the characteristics of a CV. Therefore, I decided to look for another color palette.
Next, I decided to use a color scheme of gold and gray-blue, adding gradients to enhance the richness and comfort of the layers.
 |
| Fig6.2 References |
I gathered some color palettes and CVs to reference for content and layout. Then, I considered what content I could include. I divided it into several sections: Profile, About Me, Languages, Hobbies, Education, Working Experiences, and Projects.
 |
| Fig6.3 Final CV |
I wrote a brief self-introduction in the About Me section, then added Languages and Hobbies. The left area is mostly about personal attributes. The right area includes Working Experiences, Education, and Projects, which are meant to be displayed to others. To keep the resume from becoming too visually complex, I used only black and white for the Projects section. Overall, to simplify coding, I avoided adding too many complex elements, ensuring it remained within my capabilities.
Week 8:
To complete this exercise, I need to follow the instructions below to choose a recipe from the provided website and create my own recipe card. I will utilize HTML and CSS to design a visually appealing and captivating recipe card.
From the website recipes provided, I choose a beverage called mini buttermilk berry milkshakes. I draw a sketch then make a digital version in Figma, then i use adobe dreamweaver to code the html file, and also style by css external file.
 |
| Fig7.1 Digital sketch in Figma |
HTML file code, i divided them into three part which are recipes card title, ingredients and directions.
 |
| Fig7.2 html code |
For CSS part, using external CSS and link to HTML file. The font i using are Beau Rivage for h1 and h2, the Crimson Text for p and other.
 |
| Fig7.3 CSS style file |
The print button itry to make some interactive to it, when the mouse hovers over a button, the button becomes larger and the background changes color to draw the user's attention.
 |
| Fig7.4 Print button |
After done the recipes card, i upload it into netlify.com.
https://gyingberrymilkshakesrecipescard.netlify.app/
.png) |
| Fig7.5 Final Recipes Card |
Feedback
Reflections
|
| Fig2.1 Header |
- The header is the top part of a webpage and is strategically important as it is the first thing users see.
- It typically includes core navigation elements for easy access to main pages.
- Elements commonly found in headers include:
- Brand logo
- Call-to-action button
- Links to basic content categories
- Links to social networks
- Contact information
- Language switcher for multilingual interfaces
- Search field
- Subscription field/button
- Links for product interaction (e.g., trial versions, app downloads)
- Designers, often with input from marketing specialists, choose which elements to include based on strategic importance and to avoid overloading the header.
- Popular Web Header
- Hamburger Menu: Hiding different links to different pages behind the hamburger button is called as it consists of horizontal lines looking like hamburger.
-
Sticky Header: The header doesn't hide away but sticks to the top part
of the page when the user scrolls down the page.
- Two-layer navigation: A sort of double set of navigation sites in the header to separate two different routes of navigation that are both important for web usability.
|
| Fig2.2 CTA button |
- A call-to-action (CTA) button is a user interface element designed to prompt a specific action from the user.
- It aims to convert passive users into active ones by encouraging them to take a particular action, such as buying, contacting, or subscribing.
- CTA buttons stand out from other buttons on the page, typically being bold and containing concise text that clearly communicates the desired action.
- Effective CTAs are easily noticeable, catching the user's attention in split seconds and prompting them to respond.
- Without clearly defined and attention-grabbing CTAs, visitors are more likely to quickly scan the content and not take any action.
|
| Fig2.3 Hero Section |
- The hero section is the top part of a webpage, visible without scrolling, designed to instantly grab visitors' attention.
- It typically features a strong visual element like a hero image, slider, typography, video, or other engaging content.
- The visual hook in the hero section aims to quickly establish a connection with users, conveying a message and evoking emotions.
- It encourages users to take further action such as scrolling down or clicking buttons to learn more.
- The term "hero" doesn't necessarily mean it has to feature characters; it can be any compelling image or content that instantly captures attention.
|
| Fig2.4 Footer |
- The footer is the bottom part of a webpage, marking its end and providing additional navigation.
- Common elements found in footers include:
- Brand identity signs like company name and logo
- Links to user support sections (FAQ, About, Privacy Policy, Terms and Conditions, etc.)
- Credits to website creators
- Contact forms and information
- Links to social media accounts
- Testimonials, badges, and certification signs
- Subscription field or button
- The footer may not be present on all websites, especially those using infinite scrolling, but it's a common place for users to find contact information, credits, and sitemaps.
- The decision to use a footer depends on supporting general usability and navigability, and if used, it should blend harmoniously with the overall design of the website.
|
| Fig2.5 Slider |
- A slider is an interactive element used to present a slideshow or carousel of products, offers, etc.
- Commonly found in e-commerce and business websites to showcase a gallery of items.
- Benefits of sliders include saving space, engaging users, and providing an attractive visual element.
- However, drawbacks include decreased page speed affecting SEO, potential usability issues from displaying multiple options at once, challenges with mobile adaptation, and the perception of sliders as ads which may lead users to skip them.
- Designers must carefully weigh the pros and cons of integrating sliders into the website layout for each specific case.
|
| Fig2.6 Search |
- Internal search functionality allows users to browse content within a website by entering search queries.
- Well-designed internal search saves users time and effort, improving usability and desirability of the digital product.
- It helps retain users and increases conversion rates by providing shortcuts to desired content.
- The search field, also called a search box or search bar, is the interactive element enabling users to enter search queries.
- For websites with 50+ pages, implementing internal search is recommended to facilitate navigation.
- However, designers should not prioritize search over navigation, as some users may prefer following existing navigation cues rather than using search.
- Single-page websites or concise websites with minimal content may not require internal search if the navigation is well thought-out.
|
| Fig2.7 Menu |
- A menu is a core navigation element in user interfaces presenting options for interacting with the interface.
- It can be a list of commands marked with verbs (e.g., save, delete) or categories marked with nouns.
- Menus can appear in various locations (side, header, footer) and have different interaction styles (dropdown, slide, etc.).
- Design decisions about menu functionality, appearance, and placement should be based on user research, considering target audience preferences, tech literacy, and usage environments.
- Popular types of menus include
- Classic horizontal menu: common and recognizable, placed in the website header.
- Sidebar menu: presents options vertically, typically on the left or right side of the webpage.
- Dropdown menu: displays additional options below the primary one when clicked or hovered.
- Megamenu: complex expandable menu presenting a large list of choices in a two-dimensional dropdown layout.
- Hamburger menu: collapses into a compact icon (typically three horizontal lines) that expands the menu when clicked, often used in mobile versions of websites to save space.
.jpeg)
|
| Fig2.8 Breadcrumbs |
- Breadcrumbs are navigation elements supporting users in navigating a website, showing their current location and the website's structure.
- They complement primary navigation menus and serve as a secondary level of navigation, enhancing website usability, especially for sites with many pages.
- Benefits of breadcrumbs include:
- Increased findability, providing users with another touchpoint to content and aiding in understanding the website's structure.
- Fewer clicks are needed, allowing users to jump to any previous step in the hierarchy effortlessly.
- Effective use of screen space, typically taking up a narrow horizontal line with plain text elements.
- Minimal misinterpretation, as the behaviour pattern for breadcrumbs, is well-established among users.
- Lower bounce rate, especially for first-time visitors or those unfamiliar with complex websites, as breadcrumbs enhance user confidence and navigation.
- Breadcrumbs are commonly used in large e-commerce websites, media/news platforms, blogs, and magazines with complex hierarchies.
- For websites with simple hierarchies, primary navigation may suffice, and breadcrumbs may not be necessary.
|
| Fig2.9 Form |
- A form is an interactive element that allows users to submit information to a system or server digitally.
- It resembles traditional paper forms but offers more options and functionality for smoother, clearer, and user-friendly data submission.
- Users encounter forms frequently in digital activities such as registration, providing personal or financial details, making payments, sending feedback, subscribing to newsletters, etc.
- Forms serve as points of communication between users and digital products, requiring simplicity and ease of use.
- Designers should ensure that the logic of data input is thought-out, form navigation is intuitive, and the number of required actions is minimized.
- Visual prompts and tips should be provided to support users in the form-filling process, enhancing usability and user experience.
|
| Fig2.10 Card |
- Cards, also known as tiles, are layout elements for arranging and visualizing homogeneous data or content.
- Typically organized in a grid layout, each card appears as a separate piece within the system.
- Cards can contain various types of content about a specific item, such as images, titles, descriptions, and interactive features like adding to a shopping cart or saving to a wishlist.
- They offer a scannable and user-friendly way to present information, commonly used for product previews on catalogue pages.
|
| Fig2.11 Video |
- Video content on web pages is becoming more common due to advancements in web development solutions.
- A well-crafted video tailored to the target audience can attract attention, inform quickly, and engage users emotionally.
- Videos activate multiple channels of perception (audio, visual, motion) simultaneously, often wrapped in storytelling, making them strong, emotional, and memorable.
- Videos are frequently used as visual hooks in the hero section of web pages and for various purposes like setting the atmosphere, delivering messages, demonstrating product usage, sharing user feedback, etc.
- However, integrating videos into web pages requires consideration of factors such as loading time, contrast issues, responsiveness, and other potential pitfalls that could affect user experience.
|
| Fig2.12 Progress Indicator |
- A progress indicator is a small element that assists visitors in understanding their current position within a large volume of information or a set of actions.
- It is particularly useful on pages with extensive text content or long-scrolling layouts, such as long-read articles or guides.
- Progress indicators help users avoid getting lost and allow them to estimate the time needed for reading or browsing more accurately.
- Additionally, progress trackers are beneficial for long and complex forms or processes that involve multiple steps or actions.
- By visualizing the progress made and what lies ahead, users feel more confident and empowered to navigate through the content or complete the tasks efficiently.
|
| Fig2.13 Favicon |
- A favicon, also known as a URL icon or bookmark icon, is a symbol representing a product or brand in the URL line of a browser and in the bookmark tab.
- It provides users with a quick visual connection to the website while browsing.
- Favicons are effective for promoting websites and enhancing visual identity recognizability.
- Despite being small, favicons significantly contribute to web usability.
|
| Fig2.14 Tags |
- Tags are elements of secondary navigation commonly found in blogs and websites with homogeneous content.
- They consist of keywords or phrases that allow users to directly access items marked with them.
- Tags serve as metadata providing quick access to specific content categories, supporting navigation with an additional method of content classification.
- Users often create tags themselves, making them an alternative to fixed category names determined by the website.
Comments
Post a Comment