Interactive Design: Project 1

7/5/2025 - 28/5/2025 Week 3 - Week 6

Komugi Uchibori / 0363900

Interactive design / Bachelor of Design (Hons) in Creative Media

Project 1


TABLE OF CONTENTS

  1. LECTURE
  2. MBI
  3. Project 1

LECTURE

week 4 - The web and language

  • Hardware and software issue
Browsers: Google Chrome, Opera, Safari and others.
Operating system: Windows, Mac OS and Linux.
Screen resolution at the computer set: from 640 x 480 pixels to 1680 x 1050 pixels and beyond.

The most important part of the website is content, so develop the following web standard to ensure that people will be able to access the website.

World Wide Web Consortium (W3C): the central organization who is responsible for creating and maintaining web standards. including standard markup languages like HTML and CSS.

Using web standards ensures that all browsers will display the website properly.

  • How the web work?
  1. Connect to the web via an ISP, typing a domain name or web address into a browser to visit a site (eg: www.google.com)
  2. The computer contacts a network of servers called DNS servers, telling your computer the IP address associated with the requested domain name. 
  3. The unique number that the DNS server returns to your computer allows your browser to contact the web server that hosts the website you requested.
  4. The web server then sends the page you requested back to your web browser.


Fig.1-1 The structure of a web page
The structure is important in helping readers to understand the messages we are trying to convey and to navigate around the document.


  • How pages use structure?
Fig.1-2 Examples of structure


Some examples are as follow
  • The use of headings and subheading in any document often reflect a hierarchy of information.
  • Separate each topic into paragraphs and give headings to each section.
  • Change the typeface to make the difference between the headline and the main text.


  • HTML
Angle brackets <>: The HTMl code is made up of characters that lives inside <>, being called HTML elements.

Fig.1-3 Opening & closing tags
Elements are usually made up of two tags (markup): an Opening tag & a closing tag. Each elements tell the brower something about the informaiton that sits between its opening & closing tags. (eg: <elements>information<elements>)


Fig.1-4 Attributes
Attributes: tell us additional information about the contents of an element, appearing on the opening tag of the element and are made up of two parts_ a name & a value, separated by an equals sign.


  • Body, Head & Title

Fig.1-5 Body, Title & Head
 <body> : is shown inside the main browser window
<title> : is shown in the top of the browser (tab bar)
<head> : contain the information about the page


  • Headings 
Fig.1-6 Headings

  • Paragraph

Fig.1-7 Paragraph

  • Bold
Fig.1-8 Bold
  • Italic
Fig.1-9 Italic
technical terms, names of ships, foreign words, thoughts, or other terms that would usually be italicized.

  • Order List
Fig.1-10 Order List
"li" stands for "item list."

  • Unordered List

Fig.1-11 Unorder List

  • Nested List
Fig.1-12 Nested List

  • Adding Link
Fig.1-13 Adding link

  • Adding Image
Fig.1-14 Adding image



Week 5 - ID and Class Attributes

ID attribute: is used to uniquely identify the element from other elements on the page. No two elements have the same value for their ID attributes, allowing you to style it differently from any other instance of the same element on the page.

Class attribute: shares the same value or name to distinguish between important information and less important information.

These two will change their appearance if there is a CSS rule that indicates they should be displayed differently.

 Black elements: always appear to start on a new line in the browser window.
Eg. <h1>,<p>,<ul> and <li>

Inline elements: always appear to continue on the same line as their neighboring elements.
Eg.<b>, <i>, <em>, <a> and <img>


  • Cascading Style Sheet (CSS)
CSS allows you to create rules that specify how the contents of an element should appear. This works by associating rules with HTML elements.
Eg. setting the background of the page, typeface and all headers should be in a blue. more like the design of website.

CSS rule contains two parts: a selector and a declaration.

Fig.1-15 Selector & Declaration
The selector indicates which elements the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.

The declaration indicates how the elements referred to in the selector should be styled. it has two parts: property and value, and are separated by a colon.


Fig.1-16 Property & Value in Declaration
The property indicates the aspect of the elements you want to change.
The value specifies the setting you want to use for the chosen properties.


  • External CSS
Fig.1-17 <link>
<link> : Tell the browser where to find the CSS file used to style the page living in <head> to control the presentation (fonts, color, and layout)
  • href: to specify the path to the CSS file.
  • type: specifies the type of document being linked to. The value should be "text/css."
  • rel: specifies the relationships between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file.

<style> : use the type attribute to indicate that the styles are specified in CSS sitting in <head>.  The value should be "text/css." When building the website with more than one page, use an external CSS style sheet because:

  • allow all pages to use the same style rules
  • keep the content separate from how the page looks
  • means you can change the styles used across all pages by altering just one file

Best safe fonts for HTML and CSS

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

MBI


Project 1


CENTRO SALON

I chose the website, which is about hair salon in KL, for this project. On this site, you can see the details of this hair salon, like services and booking.

The proposal & wireframes are as follows: 

LINK : Redesign Proposal


Fig.2-1 Redesign Proposal (PDF)


Fig.2-2 Homepage wireframe (PDF)

Fig.2-3 Services wireframe (PDF)


Fig.2-4 Contact wireframe (PDF)


Comments

Post a Comment

Popular posts from this blog

Design Principles: Task 3 Development & Design

Image
  3/3/2025 - 17/3/2025 Week 5 - Week 7 Komugi Uchibori / 0363900 Design Principles / Bachelor of Design (Hons) in Creative Media Task 3 Development & Design MIB Summary of Task 3 Select one idea from Task 2 and develop the ideas like color and composition with design principles in mind. Create the final design in A4 size, JPEG format in at least 300 dpi pixel size.  Write a 200-word explaning these: the decisions made in the design  the meaning/purpose of the design the design principles that I used in the design.  Task 3 Development & Design Original poster Fig.1-1  Promotional poster for N's COLLECTION  (2024) Artist: Yuni Yoshida Published: August 8th, 2024 Medium: Digital Tools: Photoshop Selecting idea (sketch) Fig.1-2 Selected sketch Developing the idea  Fig.1-3 Developing color & its placement Visual elements are already noisy, so I explore the color placement to let the viewer know that this is an advertisement for color contact ...
Read more

Design Principles: Task 2 Visual Analysis & Ideation

Image
17 /2/2025 - 3/3/2025 Week 3 - Week 5 Komugi Uchibori / 0363900 Design Principles / Bachelor of Design (Hons) in Creative Media Task 2 Visual Analysis & Ideation MIB Summary of Task 2 Write the visual analysis of the artwork I selected in Task 1 with 300 to 350 words. Sketch 3 ideas on how the selected design can be improved with design principles knowledge and describe each idea with a rationale in about 30-50 words. Include some visual references (cite the sources) that inspire my own ideas. Add feedback from my lecturer Task 2 Visual Analysis & Ideation   Visual analysis of selected work in Task 1 Fig.1-1  Promotional poster for N's COLLECTION  (2024) Artist: Yuni Yoshida Published: August 8th, 2024 Medium: Digital Tools: Photoshop Phase 1: Observation Overall, Fig. 1-1 is landscape and divided into two parts: the person wearing a dress/a blue big eye part and its surroundings, where small stuffs are clattered. The design is reminiscent of colored contact len...
Read more

Design Principles : Task 1 Exploration

Image
3/2/2025 - 17/2/2025 Week 1 - Week 3 Komugi Uchibori / 0363900 Design Principles / Bachelor of Design (Hons) in Creative Media Task 1 Exploration MIB Summary of task 1 Exploring the following design principles: Gestalt theory, Contrast, Emphasis,  Balance, Repetition, Movement, Harmony & Unity, Symbol, and Word and Image. Selecting design work that piques my interest. Uploading the image  (JPEG file, min. A4 size, 300dpi) including the credit line of the work  (title of art/design work, artist’s/designer’s name; year, size, medium of the art/design work and the source) Explaining why I chose the work/what makes it look special for me with about 150-200 word List and briefly describe the design principles I observed in the work. Writing feedback from my lecturer. DESIGN PRINCIPLES Contrast - The juxtaposition of strongly dissimilar elements - can provide visual interest, emphasize a point, and express content. e.g. color, shape, position, lightning, and so on. Tenebr...
Read more