Interactive Design Project 1 / Landing Page Design

16.9.2022 - 23.9.2022 (Week 3 - Week 4)

Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media

Interactive Design

Project 1 / Landing Page Design

---

LECTURES

Week 3 Colors for Web

The most apparent advantage of using the right color combinations in web design is that they help users understand and navigate the site.

• It can improve visitors’ online experiences
• Enabling them to find the information they need and respond to your Call to Action (CTA)
• It plays a significant role in branding and product messaging
• Research has found that color plays a huge role in customers’ decisions about purchasing a product
• According to a study conducted by the University of Loyola, Maryland, colors can increase overall brand recognition

Fig.1-1: Color Wheel

Monochrome: Consisting of various tints, shades, and saturation of the same color.

Complementary: Based on two colors from opposite sides of the color wheel.

Analogous: Featuring three colors that are next to each other on the color wheel.

Triadic: Using three colors that are at the points of a triangle drawn within the color wheel.

Warm Color

Hues that contain higher amounts of yellow and red are considered warm colors

• evoke a sense of passion, happiness, and heat
• can also seem aggressive and bring feelings of danger. That’s why they’re often used in alert messages

Cool Color

Cool colors contain higher amounts of blue and purple

• Reminisce of chilly climates, crystal clear waters, or the sky
• They are considered more soothing and relaxing than warm colors
• Can also carry connotations of formality and sadness

Color System (RGB/CMYK/HEX)

• CMYK is used in print design
• These are also the standard cartridges for most color printers
• HEX color system uses a six-digit, three-byte, hexadecimal description of each color, such as #000000 (black) or #ffffff (white)
• Every two characters represent a color value

Color Psychology

1. Red

Red is a strong, energetic color. It can symbolize many emotions and ideas, both positive and negative. Users can associate it with love and passion, but it can also signal danger or anger.

2. Orange

Orange is a warm and happy color that reminds many users of friendliness, enthusiasm, and motivation. Using orange as your color scheme can result in a highly memorable site that leaves visitors with positive first impressions.

3. Yellow

Yellow is another warm color that symbolizes joy, happiness, and sunlight. When used strategically on a website, can easily inject confidence and inspiration into the design.

4. Green

Green is a positive and calm color widely associated with nature, ecology, and renewing energy. This color is pleasant and refreshing to look at, and it’s often used for environmentally-conscious brands.

5. Blue

Blue is a popular choice for many corporate brands as it symbolizes trust and reliability. It’s a calm, soothing color that can easily create a sense of freshness when highly saturated. Blue can also look distant and sad when pale, so it’s essential to strike a thoughtful balance with this color.

6. Purple

Purple is associated with royalty, luxury, and wealth. It also sometimes can be associated with mysterious and magical colors. Can be relaxing as it reminds many people of the dream sphere. A high concentration of this color may also distract

users.

7. Pink

Pink is a youthful and romantic color, reminding users of everlasting love. Widely associated with sensitivity and femininity and it can also be a bold statement color.

8. Black

Black has many meanings and can evoke different feelings when used in combination with other colors. Western cultures will sometimes associate it with

evil and death In the East, it symbolizes strength and wisdom.

9. White

White is a popular choice for modern, minimalist websites as it increases readability and pairs well with any color. The use of white space creates a feeling of cleanliness and light.

Week 4 Web Standards

Today, internet devices have evolved from the old style of using a display, keyboard, and mouse to an environment where the Web can be accessed in a variety of ways.

Many people access the Web with cell phones and pocket-sized mobile devices, and many use tablets with touch screens. In addition, some people operate via voice interface. Many people with visual impairments rely on audio output, while those with hand impairments rely on voice output.

Hardware and software issue

• Growing variety of browsers that people can choose from, including Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari, and others.
• People use a variety of operating systems, including Windows, Mac OS, and Linux.
• People have their computers set to a wide variety of screen resolutions, from 640 x 480 pixels to 1680 x 1050 pixels and beyond.

It is very likely that a website will look different on different viewing devices.

Despite these differences, the most important part of your website is its content, and all users should be able to access that. The only way to ensure that websites work across all devices and configurations is to develop in accordance with web standards. Web standards are the core set of rules for developing websites. It might be possible to develop sites that do not comply with standards, but doing so increases the likelihood that many people will be unable to access your site.

W3C & Standard Programming Languages

The central organization that is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C).

The W3C has defined dozens of standards, including the standard markup languages we use to build websites. The two languages specifically studied in this module are HTML and CSS.

Why Web Standards?

1. To make internet a better place, for both developers and visitors, it is important that both browsers and Web developers follow the Web standards.
2. When developers follow the Web standards, the development is simplified, since it is easier for a developer to understand another's coding.
3. Using Web standards will ensure that all browsers will display your Web site properly, without time-consuming rewrites.
4. When you visit a website, the web server hosting that site could be anywhere in the world.
5. In order for you to find the location of the web server, your browser will first connect to a Domain Name System (DNS) server.

How the WEB work?

1.Enter an address

When you connect to the web, you do so via an ISP. You type a domain name or web address into your browser to visit a site.

Ex: www.google.com, www.bbc.co.uk

2.Connecting to a DNS server

Your computer contacts a network of servers called DNS servers. These act like phone books; they tell your computer the IP address associated with the requested domain name. Every device on the web has a unique IP address; it’s like the telephone number for that computer.

3. Reply from DNS server

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. A web server is a computer that is constantly connected to the web and is set up especially to send web pages to users.

4. Display Website

The web server then sends the page you requested back to your web browser.

The Structure of Web Page

The structure is very important in any document so that the reader can smoothly understand the content. Websites are no exception.

Thinking about the stories you read in a newspaper, each story will have a headline, body copy, and images If the article is a long piece, there may be subheadings that split the story structure helps readers to understand the stories in the newspaper.

About a very different type of document; an insurance form, it has headings for different sections, and each section contains a list of questions with areas for you to fill in details or checkboxes to tick. The structure is very similar online.

The hierarchy of information

Any document can reflect the hierarchy of information by using headings and subheadings. First, there are the major headings, followed by the introduction and the most important information.

The Structure of HTML

The HTML code is made up of characters that live inside angled brackets <>. These are called HTML elements.

Elements are usually made up of two tags: an opening tag and a closing tag (with "/").

<element>Information</element>

Each element tells the browser something about the information that sits between its opening and closing tags.

<html><head><body>

Elements below this should be enclosed in <html></html>.

<head> and <body> are used "only once" directly below the <html>.

<head> - A tag that describes code that defines information for search engines and web browsers, and encloses the entire portion of the page that is not displayed on the screen

<body> - A tag that describes the code that makes up the content itself and encloses the entire portion that will be displayed on the screen

Headline tag <h1>~<h6>

Search engines use the headings to index the structure and content of your web pages. It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

<a> tag

<a> is anchor, and specifies the starting point or destination of the link.

<a href="URL">String to be linked</a>

<p> tag

Paragraph tag to insert text.

<b><i>

Tags for text decoration

<b> = Bold

<i> =italic

List tag

A bulleted list can be made by <ol><ul>. <ol> stands for ordered list and <ul> for unordered list. If you want to display the number, use <ol>. <li> is a tag used to enclose individual items displayed in a list.

---

INSTRUCTION

Landing Page Design

Establishing a production theme

It starts with an LP and eventually leads to the task of creating a website. I decided to redesign the website of the company I used to work for, optimizing it for the audience who is English speakers, and organizing the information. Therefore, the theme will be a "Corporate Website".

Wireframing

Wireframing is a practice used by UX designers which allows them to define and plan the information hierarchy of their design for a website or app. Organize the information needed for the corporate website and create the following sections on the wireframe;

1. Header menu
2. First View (Product images, Sales copy)
3. About Us
4. Service Introduction
5. Benefits we can offer to our clients
6. Contact Form (CV Button)
7. Footer menu
8. Transition banner to related services

Fig.2-1: First Attempt PC

Fig.2-2: First Attempt SP

I first created my first attempt in Illustrator.

Wireframing by Miro

Utilizing a service that allows users to create layouts online, we attempted to create 20 wireframes.

Miro.com

Fig.2-3: 20 Layouts

From the feedback, it was decided that the 6th wireframe was suitable for the corporate website.

Visual Design in Illustrator

The visual will be brought closer from the wireframe to completion by inserting actual catchphrases, images, etc. I am most familiar with Illustrator out of any visual editing software, so I used that.

Fig.2-4: Designing

Through trial and error, the completed design is shown below.

Final Outcome

Fig.2-5: Final Comprehensive Layout of LP (30/9/2022)

Fig.2-6: Design Proposal Slides (30/9/2022)

Revised Final Design

Based on the reflection on Exercise 3 and the lecturer's feedback, the LP design was slightly revised.

Fig.2-7: Final Comprehensive Layout of LP (28/10/2022)

Reference: Exercise 3

---

REFLECTIONS

Experiences

In Project 1, we continued to learn how to code HTML and CSS, while at the same time creating designs for the actual LPs we would produce in Project 2. First, we created 20 wireframe patterns, from which the most appropriate one for the website was specified and the design was produced.

Observation

In the wireframe stage, I designed the design with only an idea of where to place which elements, but in the final stage, some of the elements were changed significantly. One conforms to the feedback about eye flow as indicated by the instructor. For example, in the first Final Outcome (Fig.2-5), the two columns containing sentences are on opposite sides in the two-column section, whereas in the last Final Outcome (Fig.2-7), they are unified on one side. This was done for the usability of the viewer. I felt that it should be carefully designed to make it easier for visitors to use and understand.

Findings

There are also reasons why the design was revised in response to Exercise 3. When we compared them, we discovered that the first design had an imbalance between headings and text characters. Furthermore, the margins were a bit sketchy, giving the impression of being unorganized. So, these improvements were made to the final design. I think we need to define these things properly at the initial design stage to prevent this from happening. I have found that we can work more efficiently if we use a lot of guides, have fixed values for character spacing and font size, and create the design.