Interactive Design | Exercises

25/4/24 - 10/6/24 | Week 1 - 7

Iman Mikudim | 0338004 | Section 1

Interactive Design | Bachelor of Design (Hons) in Creative Media 

Exercises (HTML Document Development & HTML, CSS Document Development, CSS Layout Model)

---

SECTIONS

|  Lectures

• Lecture 1: Usability: Designing Products for User Satisfaction
• Lecture 2: Anatomy of a Website
• Lecture 3: Understanding Website Structure
• Lecture 4: The Web and Language
• Lecture 5: HTML & CSS
• Lecture 6: CSS Selectors
• Lecture 7: Box Model Layout

|  Instructions

• Exercise 1: Web Analysis
• Exercise 2: Web Replication
• Exercise 3: Creating a Recipe Card
  
  

---

LECTURES

Lecture 1 | Usability: Designing Products for User Satisfaction

Lecture 2 | Anatomy of a Website

Further Reading: The Anatomy of a Web Page: 14 Basic Elements

Lecture 3 | Understanding Website Structure

Lecture 4 | The Web and Language

Lecture 5 | HTML & CSS

Lecture 6 | CSS Selectors

Lecture 7 | Box Model Layout

---

INSTRUCTIONS

Exercise 1 | Web Analysis

For this task we are to choose two (2) websites from the links given below and review the website that we've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience. Write a brief report summarizing our findings and recommendations.

Links to Website:

• CSS Winner
• Awwards
• The Webby Awards
  
  

What To Have in The Analysis:

Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user. Evaluate the visual design and layout of the website, including its use of colour, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.

Deliverables:

Write a brief report summarizing in not less than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings).

(i) First Analysis

Website: SCRIB3

Fig 1.1 Home Page | Week 1 (26/4/34)

Purpose & Goals:

The primary purpose of the Scrib3 website is to serve as a platform for their crypto marketing studio, guiding and empowering those involved in permissionless technology.

Visual Design and Layout:

Fig 1.2 Colour Button | Week 1 (26/4/34)

• The website features a clean and modern design, with a simple colour scheme dominated by black and white, accented by a single colour highlight that can be changed at the top right of the navigation bar. This design choice aligns well with the tech-focused nature of the company and provides a professional appearance.
  

Fig 1.3 Sections at Top Navigation Bar | Week 1 (26/4/34)
 

Fig 1.4 Sections at Bottom Navigation Bar | Week 1 (26/4/34)

• Regardless of where the user is on the homepage, navigation for various sections is displayed at the bottom of the screen.
• Typography is carefully selected to match the crypto tech theme, with clean and modern sans-serif fonts used throughout the website. The choice of typeface enhances the overall futuristic and cutting-edge feel, aligning with the innovative nature of crypto technology.
  
  

  

  Fig 1.5 Icons for Socials on Team Section | Week 1 (26/4/34)
  

  
  

  

  Fig 1.6 No Icons for Socials on Other Sections | Week 1 (26/4/34)
  

• Imagery is used sparingly but effectively, with relevant graphics and icons (except for the social media icons at the bottom of the page) complementing the text to convey key messages.
  
  

Fig 1.7 Main Sections | Week 1 (26/4/34)

• The layout is well-structured, with clear sections for services, team bios, case studies, and contact information and forms.
  
  

Functionality and Usability:

• Interactive elements, such as clickable case studies and hover effects on links, enhance user engagement without detracting from the overall user experience.
  
  

Fig 1.8 Contact Form | Week 1 (26/4/34)

• Forms for contacting the company are straightforward and user-friendly, encouraging visitors to reach out for more information.
• The website's navigation is fairly simple, making it more interesting and engaging for users as they read and scroll through it. The majority of the clickable texts are always highlighted when hovered over, with subtle animations and colour changes.
• The website is responsive and adapts well to different devices and screen sizes, ensuring a consistent experience for users across desktops, laptops, and mobile devices.
  
  

Content Quality & Relevance:

• Content is well-written and informative, providing detailed information about the company's services, expertise, team members, and case studies. Each section is concise and relevant to potential clients and partners.
• The organization of content is logical, with clear headings and subheadings guiding users through the various sections of the website.
• Case studies highlight the company's past successes and demonstrate its capabilities in the crypto marketing space, adding credibility and relevance to its services.
  
  

Performance:

• The website loads quickly and responsively across different devices and browsers, ensuring a smooth browsing experience for users.
• Pages are optimized for performance, with minimal loading times and efficient use of resources.
  
  

Recommendations:

• Ensure the main top navigation bar is always at the top, with a back-to-top button to avoid users having to scroll all the way to see it again.
• Consider integrating the 'careers' button within the website to avoid users having to navigate to a completely different platform.
• When it came to images, and while they were interactive, some of them were stippled, like the team images, which I assume was done primarily to match the theme of the websites, but it made them difficult to see, and such effects should not be used for important images.
  
  
  

(ii) Second Analysis

Website: Royston Blythe Hair Salons

Fig 1.9 Home Page | Week 1 (28/4/24)

1. Purpose and Goals:

• The primary purpose of the Royston Blythe website is to showcase the salon's services, attract new clients, and provide information about its locations, team, expertise, and client satisfaction.
• Upon arrival, this purpose is effectively communicated through prominent visuals of hair styling and salon interiors, along with clear menu options for services, team, locations, contact, and client testimonials.
  
  

2. Visual Design and Layout:

• The website features a sleek and elegant design, with a sophisticated colour scheme dominated by black and white, accented with gold for a luxurious touch. This design choice aligns well with the upscale image associated with high-end hair salons.
• Typography is clean and readable, enhancing the overall aesthetic appeal and ensuring that information is easily digestible for users.
• Imagery plays a central role in the design, showcasing the salon's work, interior ambience, team members, and client testimonials. High-quality images contribute to the visual appeal and convey the salon's professionalism.
  
  

Fig 1.10 Services, Locations, Contact & Reviews | Week 1 (28/4/24) 

• The layout is well-organized, with clear sections for services, team, salon locations, contact information, and client reviews. Users can easily navigate between different pages using the menu bar at the top of the website.
  
  

3. Functionality and Usability:

• Navigation is intuitive, with a fixed menu bar that remains visible as users scroll down the page, allowing easy access to different sections of the website.
  
  

  

  Fig 1.11 Dropdown Menus | Week 1 (28/4/24)

• Interactive elements, such as dropdown menus, hover effects, and clickable client testimonials, enhance user engagement without overwhelming the user experience.
• Information for booking appointments or contacting the salon are straightforward and user-friendly, encouraging visitors to take action.
• The website is responsive and adapts well to different devices and screen sizes, ensuring a consistent experience for users accessing the site from desktops, laptops, or mobile devices.
  
  

4. Content Quality and Relevance:

• Content is well-written, providing detailed information about the salon's services, expertise, team members, client testimonials, and contact details. Each section is concise, informative, and relevant to potential clients.
• The organization of content is logical, with clear headings and subheadings guiding users through the various sections of the website.
• Client testimonials add credibility and authenticity to the salon's services, helping to build trust with potential clients.
  
  

5. Performance:

• While the website is responsive and adapts well to different devices and browsers, performance could be improved, as loading times are observed to be slightly slow.
• This slight lag in loading may have an impact on the overall user experience, especially for users with slower internet connections or those accessing the website via mobile devices.
  
  

Recommendations:

• Implementing additional interactive elements, such as before-and-after photo galleries or video testimonials, to further engage users and highlight the salon's expertise.
• Adding more interactive elements to further engage users, such as virtual tours of salon locations or interactive galleries showcasing different hairstyles.
• Performance optimizations such as faster loading times and more efficient resource utilization.
• Improve consistency by ensuring that icons are used consistently throughout the website and made more visible.

Exercise 2 | Web Replication

For this task, we are to replicate two (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. We are to follow the dimensions of the existing website from the width and height. This exercise will help us develop our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. We can use any image from stock image or free stock icon. The image that we will be using does not have to be an exact image from the original website. We may replace it with a similar image. Focus on the layout, type style, and colour style. To find similar typefaces/fonts, we can download fonts from Google Fonts. We may need to screengrab the website and can begin to replicate the page.

Links to Website:

• Morgan Stanley
• Bandit Running
• Ocean Health Index
  
  

Things to Note:

I replicated the websites section by section, adding images last, and temporarily replacing them with boxes during replication to solely focus on the website's layout, type style, and colour scheme. Before replication, I set website screengrabs to templates to make them transparent. I also took screengrabs of the different sections and their outline views for further documentation purposes. Each website replication ended with key takeaways. 

(i) First Replication

Website: Morgan Stanley

Fig 2.1 Screengrab of Morgan Stanley Homepage | Week 3 (9/5/24)

Fig 2.2 Screengrab set to Template | Week 3 (9/5/24)

Fig 2.3 Font Analysis | Week 3 (9/5/24)

Fig 2.4 Header (Nav) Section with Outline View | Week 3 (9/5/24)

Fig 2.5 Carousel Section with Outline View | Week 3 (9/5/24)

Fig 2.6 "What We Do" Section with Outline View | Week 3 (9/5/24)

Fig 2.7 "Recent Insights" Section with Outline View | Week 3 (9/5/24)

Fig 2.8 "Sign Up" Section with Outline View | Week 3 (9/5/24)

Fig 2.9 "Discover Who We Are & Join Us" Section with Outline View | Week 3 (9/5/24)

Fig 2.10 "More Insights" Section with Outline View | Week 3 (9/5/24)

Fig 2.11 Footer Section with Outline View | Week 3 (9/5/24)

Fig 2.12 Added Images | Week 3 (9/5/24)

Fig 2.13 Full Outline View | Week 3 (9/5/24)

Fig 2.14 Final Website Replication | Week 3 (9/5/24)

Key Takeaways

1) Layout:

The website's layout is clean, professional, and organized, with a grid structure. A traditional design includes a header at the top with the logo, a two-level navigation menu, and a search bar for easy access. The primary navigation menu features dropdown functionality, allowing users to explore subcategories within each main section. Below the header, a large hero image showcases relevant images related to finance. Scrolling down reveals sections with concise information about the company's services, expertise, and insights. The layout balances text and visuals well, ensuring easy navigation. The grid structure maintains consistency across sections, enhancing the overall appearance.

2) Type Style:

The 2 main type styles used on the website are modern sans-serif typefaces; Gloriola (Light, Regular, Semibold), and Karla (Regular, Bold). Headings are larger and bold or semibold, creating a clear hierarchy, while smaller body text in regular weight enhances readability.

3) Colour Style: 

The colour palette of the website is primarily composed of blue, white, and shades of grey, with accent colours of blue, green, and purple. The use of white space adds to the clean and modern aesthetic of the site, while providing contrast and balance against the text. The accent colours of blue, green, and purple are strategically used to indicate different sections of the page, enhancing visual hierarchy and aiding in navigation.

(ii) Second Replication

Website: Ocean Health Index

Fig 2.15 Screengrab of Ocean Health Index Homepage | Week 3 (10/5/24)

Fig 2.16 Screengrab set to Template | Week 3 (10/5/24)

Fig 2.17 Font Analysis | Week 3 (10/5/24)

Fig 2.18 Header (Nav) Section with Outline View | Week 3 (10/5/24)

Fig 2.19 "Ocean Health Index" Section with Outline View | Week 3 (10/5/24)

Fig 2.20 "News" Section with Outline View | Week 3 (10/5/24)

Fig 2.21 Footer Section with Outline View | Week 3 (10/5/24)

Fig 2.22 Added Images | Week 3 (10/5/24)

Fig 2.23 Background Image with Gradient | Week 3 (10/5/24)

Fig 2.24 Full Outline View | Week 3 (10/5/24)

Fig 2.25 Final Website Replication | Week 3 (10/5/24)

Key Takeaways

1) Layout:

The website boasts a modern layout with a grid structure. At the top, a prominent header displays the logo and a navigation menu with dropdown functionality when hovered over. Scrolling down, users find visually appealing sections providing concise information about the Ocean Health Index and related projects. The layout is intuitive, ensuring seamless navigation, while the grid structure maintains consistency and alignment for a clean and professional appearance.

2) Type Style:

The type style used on the website is primarily a sans-serif typeface: Helvetica, with a mix of bold and regular weights for headings and body text. The font choice is modern and easy to read, enhancing readability across different screen sizes. Headings are often capitalized and larger in size, creating a clear hierarchy and drawing attention to key sections. Body text is legible and well-spaced, ensuring a comfortable reading experience for users.

3) Colour Style: 

The colour palette of the website is predominantly composed of white and blue tones, reflecting its focus on ocean-related themes. These two colours help to provide contrast and highlight important information. Overall, the colour scheme is cohesive and visually appealing, effectively complementing the content and imagery throughout the website.

Exercise 3 | Creating a Recipe Card

In this exercise, we will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE recipe from the link (Healthy Recipes and Whole Foods Cooking for Everyday - 101 Cookbooks).

• Create an HTML file named "index.html."
• Recipe title.
• Include necessary images for the page.
• List of ingredients.
• Step-by-step cooking instructions.
• Create an external CSS file named "style.css."
• Apply CSS rules to style your recipe card.
• Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
• Use your creativity to make the page look appealing and interesting.
  
  

(i) Wireframe & Prototype

Fig 3.1 Wireframe | Week 7 (6/6/24)

I started with a wireframe layout in Figma. I wanted the layout to be different from the usual recipe cards I'd seen, just to make it more interesting. I divided the webpage into four sections: 1) header, 2) ingredients, 3) instructions, and 4) footer.

Fig 3.2 Prototype | Week 7 (6/6/24)

After I was satisfied with the layout, I chose a simple colour scheme of black, white, and an accent colour (brown-orange) to match the colour of a cookie. Before adding the photos, I made sure to resize all images from each section to the same width/height ratio to ensure uniformity and consistency and make it easier to scale using CSS later on.

(ii) HTML & CSS

When it came to actually building the website, I needed to refresh my memory on how to use Flexbox and Grid Layouts again, as I had used them in previous projects during my diploma. I used Grid Layout for the ingredients section and Flexbox Layout for the instructions section. I also included some comments in the CSS file to explain each line of code further.

Fig 3.3 Full HTML Code | Week 7 (10/6/24)

Fig 3.4 Full CSS Code | Week 7 (10/6/24)

(iii) Final Design

Link to Website: https://exercise-3-recipe-card.netlify.app/

Fig 3.5 Full Website Screengrab (PNG) | Week 7 (10/6/24)

Fig 3.6 Full Website Screengrab (PDF) | Week 7 (10/6/24)

---

QUICK LINKS

|  Task 1: Prototype Design (Digital Resume/CV)

|  Task 2: Working Web Page

|  Task 3: Creating a Single-Page Website