Interactive design Project 1 / Website Redesign Proposal
24.04.2025 - .05.2025 (Week 01- Week 06 )
ZHOU YUTONG / 0378676
GCD61004 / Interactive design / Bachelor of Design (Honours) in Creative Media
Project 1 / Website Redesign Proposal
TABLE OF CONTENT
LECTURES
Week 4 | The Web and Language
Structure of a Web Page
A webpage is essentially a structured document, similar to a newspaper or a form.
Main structural elements include:
-
Headlines
-
Paragraphs
-
Subheadings
-
Lists, tables, images, links, and more
<h1>to<h6>: Heading levels<p>: Paragraph<ul>/<ol>/<li>: Unordered/ordered list and list items<a>: Link<img>: Image
HTML Core
ID attribute: uniquely identifies an element for individual styling.
Class attribute: groups elements for bulk styling.
Block-level elements: such as <p> and <ul>, which are displayed on new lines.
Inline elements: such as <a>, <img>, displayed on the same line.
CSS Core
Role: Controls the appearance of the page (colors, fonts, layout, etc.).
Structure:
css
copy
edit
selector {
property: value;
}
Usage:
external style: <link> into CSS file (recommended)
Internal styles: <style> written inside HTML.
Common styles
Color: color, background-color, border-color
text: text-align, text-shadow, letter-spacing
Fonts: web-safe fonts like Arial, Verdana, Google Fonts for adding new fonts.
Week 6 | CSS Selector
Introduction to CSS Selectors
Used to select HTML elements and apply styles.
They control the appearance and layout of web pages and are the core of CSS.
Common Selector Types
Universal Selector: * Selects all elements.
Element selector: selects by tag name, e.g. p.
ID selector: #idname, selects a specific ID element (unique).
Class selector: .classname, selects elements that share the same class.
descendant selector: parent child, selects nested elements.
Child selector: parent > child, selects directly child elements.
Pseudo-class selectors: :hover, :focus, state-based selection.
Pseudo-element selectors: e.g. ::before, ::after, selects part of an element.
Why there are so many selectors
Precise control: different selectors to meet different positioning needs.
Structural complexity: elements within nested or specific structures can be selected.
Responsive design: adapting to devices in conjunction with media queries.
State interaction: such as click, focus and other state changes.
Convenient maintenance: easier to standardize and update styles.
Improved accessibility: Enhance readability and user experience.
Good compatibility: Adapt to different browser rendering behaviors.
INSTRUCTIONS
TASK
Current Design Evaluation
Color Scheme
Issue: Excessive use of highly saturated rainbow backgrounds and lack of a color scheme.
The use of extreme contrasting color blocks (e.g. yellow characters on purple background, blue characters on green background) seriously affects the reading experience.
Layout
Issue: The page has a very old single column layout, no responsive design, and all the information is stacked in one long page.
The content lacks a hierarchical structure and the visual navigation is very poor, as if the page was generated in Word.
Typography
Issue:The font layout is not hierarchical, and almost all the content is stacked in the same style, which lacks focus and visual guidance.
Overall Aesthetics
Issue: The overall style of the website is extremely unprofessional, giving the impression of amateurism and low credibility.
Imagery
Issue: Images are very low resolution, some of them even look like JPEGs that have been compressed multiple times.
All images have mixed styles, inconsistent proportions, and some buttons are images.
Design Proposal
Font System:
Headlines use Baloo 2 or Fredoka One (rounded and lively)
Open Sans for body text to ensure readability.
Color scheme:
Primary colors: Yellow + White + Orange
Secondary colors: blue + green
In contrast to the oversaturated colors of the original website, a light and sharp but soft palette was chosen to better match the brand positioning.
Mood Board Content:
Inspiration: Juicy Juice, Honest Kids, Nestlé Kids
Brand visual style combining healthy food and children's market
Image style:
Illustrative fruit icons and children's illustrations to create a happy and healthy atmosphere.
Wireframe concept:
Home page: large brand image + product description module + request sample button
Product Pages: Categorized filters + scrolling product display cards + detail pages
Order page: simple form or online submission system (replaces current PDF form)About Us/FAQ/Contact Page
Sketch
REFLECTION
Through this project, I gained a deeper understanding of the importance of user-centered design in web interfaces. By evaluating the existing Penny Juice website, I recognized how poor color schemes, outdated layouts, and inconsistent visual elements can negatively impact user experience and brand credibility. Redesigning the site allowed me to apply practical design principles such as hierarchy, color harmony, and typographic systems to create a more modern, fun, and user-friendly interface tailored to the children's health drink market. In addition, creating wireframes and visual concepts enhanced my ability to translate abstract concepts into structured web layouts. This experience enhanced my visual communication skills.
Comments
Post a Comment