INTERACTIVE DESIGN

Header: Found at the top of the webpage, this section typically features the site's logo, primary navigation menu, and contact information.
Main Content Area (Body): The central portion of the page where the core content is displayed, such as text, images, videos, and other multimedia elements.
Footer: Located at the bottom of the page, it usually includes copyright details, useful links, and additional contact information.

Organizing Content:
Structure information using heading tags (H1, H2, H3, etc.) to establish a clear content hierarchy.

Navigation Menus:
Use simple, descriptive labels for menu items to help users easily find what they're looking for.

Week 4

Week 4: Basics of HTML & How the Web Functions

This week we were introduced to the basics of the Web and how it works.

This week focused on gaining a fundamental understanding of how websites are built and how the web delivers content. We were introduced to HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) — the core technologies used to create and style webpages.

Key Concepts of Webpage Structure

There are three foundational aspects to learn when working with web pages:

Page Layout – Knowing how elements are arranged on a webpage.
Markup Syntax – Writing code that defines the structure and meaning of content.
HTML Components – Elements and tags that describe content blocks.

Understanding HTML Elements

HTML uses special syntax enclosed in angle brackets <>. These are called elements. Most elements have an opening tagand a closing tag, which surrounds the content.
For example:

html
<p>This is a paragraph.</p>

Here, <p> is the opening tag and </p> is the closing tag.

Using Attributes in HTML

HTML elements can include attributes, which give extra detail or control how the element behaves. They appear inside the opening tag and follow a name="value" format.
Example:

html
<img src="cat.jpg" alt="A photo of a cat">

Essential Structural Tags

<body> — Holds the main content that users see on the page.
<head> — Contains metadata and settings for the document, usually placed before the body section.
<title> — Sets the name of the webpage that appears on the browser tab.

Heading Tags

HTML provides six heading levels for organizing content, ranging from <h1> (most important) to <h6> (least important). Example:

html

<h1>Main Heading</h1>
<h2>Subheading</h2>

Creating Paragraphs

Paragraphs are added by enclosing text in <p> and </p> tags.

html
<p>This is a block of text separated as a paragraph.</p>

Text Styling

To style your text within HTML:

Use <b> for bold text
Use <i> for italicized text
Example:

html
<b>Important</b> and <i>emphasized</i> words.

List Types in HTML

There are two main types of lists:

1. Numbered Lists (Ordered):
Use <ol> to start the list and <li> for each item.

html
<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

2. Bullet Point Lists (Unordered):
Use <ul> in place of <ol> when you want bullet points.

html
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

Creating Nested Lists

You can place a list inside another list to create a hierarchy. For example:

html
<ul>
  <li>Fruits
    <ul>
      <li>Orange</li>
      <li>Mango</li>
    </ul>
  </li>
</ul>

Always ensure that each list is properly opened and closed to keep the structure valid.

We also started writing our own HTML in class for the first time.
Mr. Shamsul mentioned that it's important to save the file as intex.html so the browser can read it properly.

Week 5 HTML and CSS Last week, we studied embedded HTML tags and their structure. This week, we switched to mastering CSS, the language responsible for the design and appearance of HTML elements. We've reviewed the basic rules and syntax of CSS to learn how to change colors, fonts, margins, and other stylistic properties of web pages.

PROJECT 1: Website Redesign Proposal

Description:

Select an existing website which you feel has several design and UX issue and prepare a detailed proposal for its redesign. The proposal should address:

Website Analysis:

Current Design Evaluation:
Provide a critique of the current design, focusing on layout, color scheme, typography, imagery, and overall aesthetics. User Experience (UX): Assess the site’s usability, navigation, accessibility, and responsiveness. Identify pain points or areas that could be improved.

Functionality:
Evaluate the website’s performance, including load times, interactivity, and compatibility across different devices and browsers.

Redesign Goals:
Objectives: Clearly define the goals of the redesign (e.g., improved usability, modernized look, enhanced brand alignment).

Target Audience:
Describe the intended audience for the redesigned website and how the new design will better meet their needs.

Design Proposal:
Visual Design Concepts: Present your ideas for the new visual design, including visual references, mood board and wireframes. Discuss the rationale behind your design choices.

UX Enhancements:
Propose changes to improve user experience, such as simplified navigation, better content organization, or enhanced interactivity.
Technical Considerations: Outline any technical updates or changes, such as optimizing for mobile devices, or improving load times

Submission:
Submit your E-portfolio link that includes an embedded link of your proposal. The proposal can be prepared using any form of
presentation application such as Google Slide or Canva

Website Redesign Proposal by BEGIMBAEVA AIDINA

Figure 3.1 Proposal - PDF / (Week 6, 27/5/2025)

REFLECTIONS

Experience
Working on this redesign proposal allowed me to apply my design thinking and UI/UX skills to a real-world website with noticeable issues. It was insightful to analyze the Barnes & Noble website from both a visual and functional perspective. Using tools like Figma, Canva, and design principles helped me structure my ideas clearly and professionally.

Observations
The current site has an overwhelming layout with too much visual clutter on key pages like the homepage and category views.
Navigation feels outdated and inconsistent, especially on mobile devices.
Typography and visual hierarchy are weak, making it difficult for users to focus on important content.

Findings
Clear structure, minimalistic design, and mobile optimization are critical for retaining attention.
Accessibility and responsiveness are often neglected, even on large-scale websites.
A cohesive UI system can significantly enhance user trust and engagement.

Users seek a simpler, faster, and more personalized experience when browsing or purchasing books online.

Search This Blog

Aidina Begimbaeva (0380489)