17/10/2024--31/10/2024 (W4-W6)
LIU YITONG (0370907)
Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University
Project 1
INSTRUCTURE
LECTURE
Week 5
In this week's class, we continue the task of the last class, by writing html
to complete our own website.And learn how to add css to existing html.
Fig.1.0 Progress 1
Finally, the instructor asked us to only add css to the "Timetable". Here is
my process.
Fig.1.1 Progress 2
My Website Link: My Website
HTML ＆CSS
HTML Extended
ID and Class Attributes: Explains how to assign unique identities to HTML
elements using the ID attribute and how to group elements using the Class
attribute. Both attributes allow for different styling through CSS.
Block and Inline Elements
Differentiates between block-level elements (e.g., <h1>, <p>,
<ul>) that start on new lines and inline elements (e.g., <b>,
<i>, <a>) that remain on the same line as their neighbors.
Introduction to CSS
CSS allows defining rules that specify the appearance of HTML content,
including font styles, colors, and layout.
A CSS rule consists of a selector and declarations (property and value
pairs).
Different methods of employing CSS include linking external stylesheets
using the <link> tag or embedding CSS in a <style> tag.
CSS Properties
Examples of commonly used CSS properties include font styles, colors, text
alignment, and background properties.
The document also touches on methods for setting text color, background
color, background images, and border styles.
Font Management
Lists some web-safe fonts (e.g., Arial, Verdana, Times New Roman) and
introduces how to use Google Fonts for additional font options.
This provides a foundation for understanding how to style and structure web
pages using HTML and CSS effectively.
PROJECT 1
Assignment Description
You are required to 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 the following key aspects:
Objective:
The objective of
this assignment is to develop a comprehensive proposal for the redesign of an
existing website. The proposal should demonstrate your ability to critically
evaluate a website’s design and functionality, and to propose design
solutions that enhance user experience, aesthetics, and performance.
Assignment
Description:
You are required to
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 the
following key aspects:
·
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.
Proposal
REFLECTION
Working on this project allowed me to strengthen my critical thinking and design skills. Analyzing my chosen Marine conservation site, its design and user experience issues taught me how to identify key areas for improvement, such as layout inconsistencies, navigation challenges, and responsiveness.
Developing redesign goals helped me focus on tailoring solutions for my target audience, emphasizing usability and modern visual identity. Making wireframes and mood boards is particularly appealing because it allows me to explore creative design concepts and justify my choices.
The project highlights the importance of combining aesthetics and functionality to improve the user experience. It was a very valuable exercise and it helped me a lot.
Comments
Post a Comment