Labels

Interactive Design - Exercises

28/9/2023 - /9/2023 / Week  1 - Week
Janice Marie Eng Chia Hui  / 0361521
Interactive Design / Bachelor of Design in Creative Media / Taylors University 
Exercises

Table of contents

Lectures

Week 1 

This week, Mr. Shamsul reviewed the module information booklet and told us about all our projects and assignments. He then told us to download Dreamweaver, sign up to Netlify and assigned us a task called Web Analysis. 

Week 2

This weeks topic is usability. Mr. Shamsul talked about usability. 
  • Buttons must have a feedback to indicate the completion of the action, but can't be too obvious. Eg. hover effect/underline/invoice
  • Links must be indicated clearly
  • Buttons should not be placed far apart
  • Use the 5 principle of usability. 
Consistency 
  • important to remind user that they are on the same webpage and can be used for branding 
  • everything used should be the same
Simplicity 
  • Minimum step used to reduce hassle
  • cannot be too simple for payment or else it won't be secure 
  • Example, auto saving your details so that can be used for forms later
Visibility 
  • Using colours and shapes to make things easier to use 
Feedback 
  • Through sound/colour change
  • Progression bar for downloads
  • Feedback is important
Error-prevention 
  • Feedback hand in hand with error prevention 
Week 3
  • Web structure - make it more user friendly 
  • SOE - uses keywords with tags to help the search engine find the website
  • Footer informs its the end of the webpage
  • Some navigation features located in the footer for easy navigation 
  • HTML code header (h1 > h2> h3) and so on 
  • Don't hide navigation if in desk top 
  • Landing page places the most important information 
  • Quote can be included in the website to increase credibility 
Week 4 
Web Standards 
  • CSS - cascading style sheet
  • HTML - Hypertext Markup Language 
  • Why it is important? : To get a universal language so everyone understands / to ensure that all browsers display the text properly without rewrites.
  • Changing the heading change it with the style option
  • Can use CSS to change how a website looks
  • Tags can be both-sided or one-sided
  • In HTML, <> these are called angle brackets; in CSS we don't use them
  • <b></b> ; opening and closing tag respectively 
  • compulsory to use attribute tag for <a></a> tags and <img> tag. Ex: < a href="#id"></a>
  • HTML in the American language
  •  2 types of list in HTML, ordered list<ol><li></ol> and unordered list<ul><li></ul>
  • Links are typed with <a> element 
  • How to add image: use the <img src="image link"/> tag, it is a one-sided tag
After the lecture, We were asked to do a short and simple coding exercise. Here is my result link.

Week 5
  • no special character in the name
  • 1st page has to be named index the rest can be anything
  • to see live from browser go to file > real time preview or click the icon on the bottom right
  • Manage the site to link to the folder in DW
  • <div> has no attribute but you can add id attribute or class markup to it
  • 2 HTML can't have the same ID(unique)
  • class attribute can use the same class attribute
  • BLOCK elements take up the whole space cannot be side by side(<h1>)
  • INLINE elements can be side by side(<b><i>)
  • HTML uses <> CSS uses {}
  • CSS customizable skin
  • CSS {property:value;}
  • change the style for the whole doc add it to the head
  • each attribute must be separated by a space
  • background attachment needs to be fixed so that it doesn't scroll
  • can use short hand
Figure 1. Shorthand
  • background-repeat: repeat-x;
  • cannot use numbers in the code
  • system font : font from our system, uses might not have
  • project 1 width 1330px, 12 columns for grids and stretch 
Week 6
  • CSS Selectors were taught to us this week
  • Selectors define which element should receive a specific style, such as colours, fonts, spacing and more
  • UNIVERSAL SELECTOR - affects all elements on the page and is represented with an *. For example:
*{ CSS Style go here}
  • ELEMENT SELECTOR -Targets the HTML elements by their tag name. For example, 
p/li/ol/h1 {CSS style go here}
  • ID SELECTOR - target element with a specific id attribute. Use a # symbol before the id name(like the hyperlinks). For example,
#ID chosen{CSS style go here}
  • CLASS SELECTOR - targets elements with a specific class attribute. Multiple elements can have the same class attribute. Must use a period before the class name. For example,
.my-class{CSS style}
  • DESCENDANT SELECTOR - Selects an element that is a descendent of another element. Example, in a container, like a table or a button need dimensions for container, you can use,
.container a{CSS style}
  • CHILD SELECTOR - Selects elements that are direct children of another element. To select on the immediate <li> children of an <ul>, you can use
ul>li{CSS style}
  • PSEUDO-CLASS SELECTOR - Selects elements based in their state or position in relation to other elements such as :hover, :active, :visited, :link, :focus and :nth-child(n)
a:hover{/CSS STYLE/}
  • PSEUDO-ELEMENT SELECTOR - Selects part of element rather than the element itself such as ::before and ::after which are used to add content before or after an element
p::before{/CSS style/}
  • Why need so many selectors : to be very specific in targeting HTML, to help target structure, to change attribute , pseudo-class and pseudo-elements help you style elements based on their state or positions, make it a responsive design, stateful interactions, cross-browser compatibility, easy maintenance of code, accessibility
Week 7
  • We learned how to use CSS to change the display of the layout
  • Block-level Element: <div>, starts a new line, horizontally stretching 
  • Inline Element: <span></span>, can be placed in the line without causing a line break
  • Other display properties: inline-block, flex, grid
  • Container around most HTML. They act as a casing with PADDING, BORDER AND MARGIN
Week 8
  • Static position : normal position
  • relative position : with relative position if the container of that element is moved the container will move but not all the other elements; no space taken up
  • absolute position : if the container containing the absolute property is relative, then the absolute container will be in the container; if not it clings to the side corners of the webpage; doesn't take up space
  • z-index help arrange the layers. 
  • Sticky position : Must have a relative position in the parent element; then only would the stick position work 
  • Important to put relative on your parent container to make sure the contents are not disturbed.
  • vh will follow the viewport= 100vh is the whole viewpost

Instructions


Task 

1. Exercise 1

Choose TWO (2) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.

What To Have in The Analysis:
  • Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
  • Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
  • Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
  • Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
  • Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing in not more than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)
Exercise 1 - Web analysis by Janice Eng

2. Exercise 2 <Web Replication>

Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page. 

The website I chose was Bandit Running and Ocean Health Index . I did the work in Ai. 

original running bandit screen grab
web replication of running bandit
Figure 1.1 Screen grab from org webpage(left); Web replication (right)(8/9/23)

Figure 2.2 Web page replication(split into sections click to view) (running bandit)(8/9/23)

original ocean health index screen grab
web replication of ocean health index
Figure 2.3 Screen grab from org webpage(left); Web replication (right)(8/9/23)

Figure 2.4 Web replication(split into sections click to view) (ocean health index)(8/9/23)

otline view of running bandit
outline view of ocean health index
Figure 2.5 Outline view of web replications(8/9/23)

running bandit guides
ocean health guides
Figure 2.5 Guides on the org website and web replication to indicate where to place the elements(8/9/23)

To ensure that the web replication lines up with the original website, I used guides to help me see where to place the letters and elements. 

I recreated the Running Bandit logo by using the shape builder tool and some circles as well as the pencil tool. The round blue element on the Ocean Health Index I created with the ellipse tool and clipping mask it to the space it was supposed to be in. I also used the gradient tool to make the background for the Ocean Health Index website.

Figure 2.6 Running bandit logo recreation (8/9/23)

Figure 2.7 Blue element and clipping it to the white space(8/9/23)

Figure 2.8 Gradient Background (8/9/23)
3. Exercise 3 - Creating A Recipe Card

Things to do for this task :
  • Create sections in the recipe card html
  • Sections must include RECIPE TITLE, RELEVANT IMAGES, INGREDIENTS, COOKING INSTRUCTIONS
  • The display is to be changed with an external CSS file named style.css
  • Use element selectors(body,h1,ul), class selectors(recipe-title, ingredient-list) and ID selectors(#instructions)
Sketching wireframe
I started off by looking for some inspiration on Pinterest. After finding some recipe card/recipe layouts that I liked, I started sketching some layouts. I already had an idea of how I wanted the website to look like so it was quite a smooth process.

Figure 3.1 Wireframe Sketches(8/10/23)

Putting the naked HTML down

After finding a layout, I scoured the Internet for a recipe. I wanted one with little information cause that is less work :D. The recipe I chose was a recipe for pound cake. I love pound cake its so buttery, especially the lemon ones. I stole and referenced the recipe from PreppyKitchen. 

Figure 3.2 HTML that is NOT naked cause I forgot to ss the naked one(8/10/23)

Touching the HTML with CSS
After putting down the raw HTML. I had a very naked webpage. The CSS then decided to touch the HTML via my help. 

I was planning on putting the image and text in a single block(inline element). At that time I did not know what this process was called, so I googling furiously on the internet to find out how to do it. However, on Monday, Sir taught us how to do inline elements. What a godsend. After that class, I went back home and did the CSS based on the tutorial for week 7. 

I struggled a bit when making the inline elements because I had put the flex element outside of the elements that I wanted to flex. 

Figure 3.3 The highlighted part is how it is supposed to look but I initially placed the </div> before the list(9/10/23)

Figure 3.4 Padding and margins added to make the text centrally place(not compatible with multiple devices cause idk how to do that)(9/10/23)
After doing all the CSS, I went to Pinterest to look for a colour palate. I had initially gone to colour hunt, but I didn't like the colours there. 

Figure 3.5 Colour Palate chosen(link)

After deciding on the colour palate, I wanted to add a tips section into the website because I like making my life harder. When making the tips section, I wanted to do a row with 3 column like how sir taught us. However, when I did it the first time, the borders were not responsive and the text overflowed from the borders. I spent a few hours trying to find out why and trying different methods to make it responsive. 

Finally, I gave up and deleted the entire tips section and re-typed it again. It worked the second time and was now responsive. :D

After that I also added a footer into the webpage. 

Figure 3.6 Me trying to solve the problem of the unresponsive border(left) vs responsive border (right)(9/10/3)

Final Outcome

Figure 3.7 HTML code for final recipe card(10/10/23)

Figure 3.8 Final CSS code for recipe card(10/10/23)


(CLICK LINK) https://janicemarieeng-exercise3.netlify.app/  (CLICK LINK)

Feedback

General Feedback: Sir asked us to be more elaborate in our blog through Classroom.

Reflection

The exercises served as an introduction to web design for us. I don't know if it was because I'm new to web design, but the exercises were very stressful to complete especially the web analysis and replication.

It was nice to share my progress with the exercises with my classmates. It was interesting to see that we have differing or similar opinions on certain topics.

All in all, these exercises gave me some fundamental knowledge to carry out projects later on.

Comments

Post a Comment