Interactive Design-Project 1

30/08/2022-27/09/2022 (Week 1-Week 5)

Brigita Maria/0352958

Interactive Design/ Bachelor of Design in Creative Media

JUMPLINKS:
Lectures
Instruction
Feedbacks
Reflection
Further Reading

LECTURES
Back to jumplinks

Week 2: Surveying Possibilities

Differentiating between what is considered as a high quality web design and a not so good quality web design. We discuss this topic in a group, also answering several questions to support. We then manage to list 3 good and 3 bad websites.

High Quality Website

Figure 1.1 Color Bleed Website (Awwwards)

Website URL: https://colorbleed.nl/

Figure 1.2 Sable Website (Awwwards)

Website URL: https://sablecard.com/credit

Figure 1.3 Mischievous Studios Website (MWA)

Website URL: https://mischievousstudios.com/

Bad Quality Website

Figure 1. SenangJer Website

Website URL: https://senangjer.biz/

Figure 1. Tonic DNA

Website URL: https://tonicdna.com

Week 3: Color Theory

Why color matters in Web Design?

They help users understand and navigate the site, if it has the right color combinations. Improve the visitor's or user's experiences and enabling them to find the right information they need and also respond to your Call to Action (CTA). Adding more to that is the branding and the product messaging.

Color Wheel

Color Relationship

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

-Complementary: Based on two colors from the 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

Color Warmth

Hues that contain higher amount of yellow and red are considered warm colors. Sense of passion, happiness, and heat, can also seem aggressive and bring feelings of danger, that is why they are often used in alert messages.

Cool colors contain higher amounts of blue and purple. Reminding a chilly feeling or climate, sky, or water, they are considered to be more soothing and relaxing compared to the warm colors. Can also be perceived as formality and sadness.

Color System: RGB, CMYK, HEX

RGB are usually used for Web and Digital design, while CMYK are commonly used for Print design.

HEX is a color system that uses a six-digit, three-byte hexadecimal description of each color, for example: #000000 (black) or #ffffff (white). Every two characters represents a color value.

Tint and Shades

Tints is where we add white to a color while shades is where we add black to a color.

Hue, Saturation, and Lightness/Brightness

Hue describes the degree of similarity between colors. Point of reference is usually a color such as red, yellow, green, or yellow.

Saturation refers to color intensity. Increasing it will make the color more vibrant and darker and decreasing it will make the color appear faded and pale.

Lightness defines how bright a color is compared to pure white. Changing only the lightness parameter in graphic editing software will produce different tints and shades.

Contrast

Contrast is a crucial element of any website when it comes to background color and text. If the contrast is too low, users are more likely to have trouble differentiating between elements. Not only for readability but the content hierarchy as well.

Color Psychology

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, or can also signal danger or anger.

Orange is a warm and happy color that reminds many users of friendliness, enthusiasm, and motivation. Using color can make a highly memorable site that leaves a positive first impression on the site.

Yellow is another warm color that symbolizes joy, happiness, and sunlight. When use correctly on a website, it can inject confidence and inspiration in the design.

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

Blue is a popular choice for many corporate brands as it symbolizes trust and reliability. It is a calm, soothing color that can easily create a sense of freshness when it's saturated. It can also look sad and distant when pale. So it is important when considering the balance of this color.

Purple is associated with luxury, royalty and wealth. Also associated as mysterious and magical color. Can be a relaxing color as it reminded people of dreamy color. But high concentration of this color may distract user.

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

White is a popular choice for modern, minimalist websites as it increases readability and pairs well with any colors. It creates a feeling of cleanliness and lightness.

Black has many meanings and can bring out different feelings if combined with other colors. Western culture associate it with evil and death, Eastern it symbolizes strength and wisdom.

Week 4: The Web Language

Web standards

Early days, people only can access Web using monitor, keyboard, and mouse. Today, there are a wide variety of access to Web. We can use pocket phones, tablets, and even audible interfaces.

Hardware and software issue:

- A growing variety of browsers, from Microsoft Internet Explorer, Mozilla Firefox, Google, Opera, Safari and others

- People using variety of operating systems, including Windows, Mac OS, and Linux.

-Variety of screen resolutions

With this differences there are probability for your website to look different to the visitors. To ensure the website works across all the different devices and configuration is to develop in accordance to the web standards. Web standards are the core set of rules for developing websites.

The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C). One of the rules is the standard markup languages that is used to build a website.

We will use HTML and CSS.

Why Web Standards?

• To make internet a better place, for both developers and visitors, it is important that both browsers and Web developers follow the Web standards.

• When developers follow the Web standards, the development is simplified, since it is easier for a developer to understand another's coding.

• Using Web standards will ensure that all browsers will display your Web site properly, without time-consuming rewrites.

How the Web Works?

1. 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;

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

2.Your computer contacts a network of servers called DNS servers. These act like phone book; 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.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.The web server then sends the page you requested back to your web browser

Structure of a Webpage

- Understanding structure

- Learning about markup

-Tags and elements

It is an electric versions of newspaper, magazines, catalogue, insurance forms, etc.

How pages use structure?

Imagine a newspaper, it would have headlines, body, and images. This structure will help the reader to understand the content of the webpage, as it helps newspaper readers as well.

The use of headings and subheadings in any document often reflect a hierarchy of information. Any document will start with a large heading, followed by an introduction or the most important

information. This might be expanded upon under subheadings lower down on the page.

When using a word processor to create a document, we separate out the text to give it structure. Each topic might have a new paragraph, and each section can have a heading to describe what it covers.

To describe the structure of a web page, we add code to the words we want to appear on the page.

HTML describes the structure of pages

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.

<element>Information</element>

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

Closer look on tags

Opening tags

<p>

Closing tags

</p>

Attributes tell us more about the elements

Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.

<p lang=“eng-us”>Paragraph in English</p>

Body, Head, and Title

Week 5: Exercise for Netlify

First, Mr. Shamsul gave us instruction to create a html using notepad. A simple mini website about myself. As is it created to help us apply and practice doing html. We practiced on how to make a html file in notepad, how to create header, title, lists, links,

Notepad file

Webpage display in chrome

Week 6: Extra Mark-Up

Adding image in HTML

The tag <img> is used to add image in HTML, it is a single sided elements so no closing tag for this element. The tag is considered empty until you add the attributes. Src attributes specify the location of the image!

Alt attribute is added to described the image! And also specify the width and the length of the image.

Image format for Web

3 common image format for web:

-JPEG

-GIF

-PNG

ID and class attribute

Id attribute

Every html element can carry id attribute. It is used to uniquely identify the element from

other elements on the page. It is important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique). Giving an element a unique identity allows you to

style it differently from any other instance of the same element on the page.

Class attribute

Every HTML element can also carry a class attribute. Sometimes you will want a way to identify several elements as being different from the other elements on the page. For example, you might have some paragraph of the that contain information that is more important than others and want to distinguish between these elements. The class attribute on any elements can share the same value or name.

Block elements

Some elements will always appear to start on a new line in the browser window. It is know as block level elements. Example: <h1>, <p>, <ul> and <li>.

In-line elements

Some elements will always appear to continue on the same line as their neighbouring elements. It is know as inline elements. Example: <b>, <i>, <em>, <a> and <img>.

Week 7: Introduction to CSS

Introducing CSS (Cascading Style Sheet)

CSS allows you to create rules that specify how the content of an element should appear

Example, you can set the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level header should be in a blue, italic, Helvetica typeface.

CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. A CSS rule contains two parts: a selector and a declaration.

font-family:Arial;

}

selector

declaration

This rule indicates that all <p> elements should be shown in the Arial typeface. Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas. Declarations indicate how the elements referred to in the selector should be styled. Declarations are split into two parts (a property and a value) and are separated by a colon.

CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value,

separated by a colon. You can specify several properties in one declarations each separated by a semi-colon.

h1,h2,h3{

font-family:Arial;

color:yellow;

}

property

value

This rule indicates that all <h1>, <h2> and <h3> elements should be shown in the Arial typeface, in a yellow color. Property indicate the aspects of the element you want to change. For example, color, font, width, height and border. Values specify the settings you want to use for the chosen properties. For example, if you want to specify a color property then the value is the color that you want it to be for the elements.

Using external CSS

<link>

• The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page

• It is an empty element and it lives inside the <head> element

It should use three attributes:

• href; To specify the path to the CSS file

• type; This attribute specifies the type of document being linked to. The value should be text/css

• rel; Specifies the relationship between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file

<style>

• An HTML page can use more than one CSS style sheet.

• To do this it could have a <link> element for every CSS file it uses

• For example, one authors use one CSS to control the presentation (fonts and colors) and a second to control the layout

• You can also include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page

• The <style> element should use the type attribute to indicate that the styles are specified in CSS

• The value should be text/css

• When building a site with more than one page, you should use an external CSS style sheet. This:

• Allow all pages to use the same style rules (rather than repeating them in each page)

• Keeps the content separate from how the page looks

• Means you can change the styles used across all pages by altering just one file (rather than each

individual page)

Week 8: ILW

Week 9:

INSTRUCTION
Back to jumplinks

For project 1 we were task to do a landing page for a website.

Fig 1.1 Inspiration from Pinterest

For the project, we were told to find topic or idea for the website. Either from an existing website or create a brand new website.

While scrolling Pinterest and dribbble to find inspiration, I came across some websites that have a kid like theme, which has bright and colorful pallette. Also has cute and fun illustrations inside the website.

From that I proceeded to finding a suitable theme to make a similar website. From that I tried to find things that is related to kids and ended up finding a kids cafe in Korea. They got a fun yet elegant design for their branding.

I took some of the design branding as the inspiration for my website.

Fig 1.2 Kids Cafe Piccolo (1)

Fig 1.3 Kids Cafe Piccolo (2)

Fig 1.4 Kids Cafe Piccolo (3)

Fig 1.5 Kids Cafe Piccolo (4)

Fig 1.6 Kids Cafe Piccolo (5)

Fig 1.7 Kids Cafe Piccolo (6)

From the logo design, I extracted the colors to create the pallette of the website. Then I also try to find fonts that are somewhat similar to the existing logo.

This is the overall moodboard of my website to help kickstart the process.

Fig 1.8 Mood board for my website

After creating the mood board, I proceed to make the wireframe of the landing page. We need to make 20 different wireframe in total. The purpose is to see diversity and have options for me to choose from.

Fig 1.9 Wireframe in Miro board

After a gruesome and tiring process of making the wireframe in Miro board. Then it goes to choosing the one design or interface that I want to use.

As from the notes from Mr.Shamsul, It is better or nicer to have a cohesive design. In this case is if one property is square, the other properties or attributes needs to be square. And also need to consider how the user will see the information of the website. So the placement of object or properties needs a consideration (psychologically).