Interactive Design | Exercises
22.4.2024 - 16.6.2024 || Week 1 - Week 8
Yong Zhen Xing || 0359473Interactive Design || Bachelor of Design (Honours) in Creative Media / Taylor's University
Exercises || HTML Document Development & HTML, CSS Document Development, CSS Layout Mode
Contents
1. Lectures
2. Instructions
2.1 Web Analysis [Exercise 1]
2.11 Website 1 (Sculpting Harmony)
2.12 Website 2 (Loket Design)
2.2 Replicate a website [Exercise 2]
2.21 Website 1
2.22 Website 2
Final Outcomes
2.3 CSS Layout [Exercise 3]
Final Outcome
3. Feedback
4. Reflection
Lectures
Week 1 :
Physical Class
In our first class, we were first briefed on what softwares we will need. We also had to fill up a doc sheet that includes our blog for documentation purposes. Mr.Shamsul then briefed us on the Module Information Booklet (MIB) and gave us a rough understanding of what kind of work we will be doing. Lastly he briefed on our first exercise which was Web Analysis.
Online Lecture
In the first lecture, Mr.Shamsul first shared a video about Bad Door Designs (Click Here) which talks about the Norman Door Theory and why user experience (UX) is important in any type of design. Then he gave us a lecture about Usability.
Lecture 1 - Usability : Designing Products for User Satisfaction
Notes :
- Usability is when a user encounters an interface, they should be able to find their way around easily without needing much guidance.
- Some key principle of usability are Consistency, Simplicity, Visibility, Feedback and Error Prevention.
- Consistency means elements such as heading, footers, sidebars and navigation bars works harmoniously all across each other.
- Simplicity means the need to minimize numbers of steps in a process. Sometimes using symbols and terminology to make the interface as obvious as possible.
- Visibility means the more visible an element is, the more likely users will know about them and how to use them.
- Feedback means how well a site can communicate through interaction, making it both visible and understandable.
- Error Prevention involves alerting a user when they're making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake.
Week 2 :
Physical Class
As mentioned by the lecturer in last week's class, we did a group activity this week. We needed to make a website prototype through drawing. It was interesting trying to design a "good" website in that time period and it was certainly fun looking other group's prototype.
Week 3 :
Physical Class
In this class, Mr.Shamsul first had a lecture about understanding website structure. He then shared some sites with specific website elements to demonstrate the goods and bad of some of the website design. Next, he gave up a brief for the next exercise which is Website Replication. He showed up how to screenshot the sites and also how to make up some elements such as the magnifying glass and the navigation button through illustrator.
Lecture 2 - Understanding Website Structure
Notes :
- Websites are typically divided into : Header, Body, Footer.
- Headers is the top section of the page which usually contains the website's logo, navigation menu, and contact information.
- Body is the main page of the webpage that contains text, images, videos, and other multimedia elements.
- Footer is located at the bottom of a webpage and contains copyright information, links to important pages, and contact details.
- Labels need to be clear and concise so that it helps users move around the website. Dropdown menus are recommended for more complex sites.
Week 4 :
Physical Class
In this class, Mr.Shamsul has a lecture first about the web. The lecture essentially talks about the standardized web format, web structures and HTML. The lecture showed us examples of HTML tags which would be important for the upcoming class activity. In the class activity, we needed to create a HTML page that has our own info in it in notepad. We learned about heading size, paragraphing, and even adding a list. Afterwards, we needed to upload the website to Netlify.
Lecture 3 - The Web
Notes :
- World Wide Web Consortium (W3C) is a central organization who is responsible and maintaining web standards. They have defined dozens of standards including standard markup languages such as HTML and CSS.
- Web standards are important for developers and visitors as development are simplified and all browser will display websites properly without rewrites.
- When a site is visited, the web server hosting that site could be anywhere in the world. In order to find the location of the web server, the browser will first connect to a Domain Name System (DNS) server.
- Use of headings and subheadings are important in terms of information hierarchy.
- The HTML code is made up of characters that live inside angled brackets '<>', these are called HTML elements. There should always be an opening and closing bracket. Exp: '<p>' followed by </p>".
- 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. (Example Below)<p lang=“eng-us”>Paragraph in English</p>
- <body> - Everything inside this element is shown inside the main browser.
- <title> - Contents shown normally in the top of the browser (Tab Bar).
- <head> - Used often before <body>. This contains information about the page.
- <h1> - Six levels of heading until <h6>.
- <p> - Used to create a paragraph.
- <b> - Used to bold words.
- <i> - Used to make words italic.
- <ol> - Used to create an ordered list.
- <li> - Each item in the list is placed between and opening and closing tag.
- <ul> - Used to create an unordered list.
- <a> - Creates link. (Exp : <a href=“http://www.imdb.com”>IMDB</a>)
Inserting Image
<img src=“image/foto.jpg” alt=“alternative text” title=“title of the image”/>
src - Specifies the path to the imagealt - Provides alternative text for the image (for accessibility)Title - This attribute provides tool tip of the image in the browser
Week 5 :
Physical Class
In this class, Mr.Shamsul had a more in-depth lecture about HTML (CSS was for next week). Afterwards, we had a class activity, where we continue working on our last week's HTML code. This time we used Adobe Dreamweaver and our goal was to create our own timetable. At first, we created a simple table following his instructions but then he asked us to research about "colspan" and "rowspan" to implement it into our actual timetable. When time was up, he checked everyone's code. He also asked us to do research and implement "form" in our code as our homework.
Lecture 4 - HTML & CSS (Part 1)
Notes :
- Every HTML element can carry the ID attribute however it is important to note 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 instances of the same element on the page.
- Every HTML element can also carry a class attribute. This is to to identify several elements as being different from the other elements on the page.
- Class attribute on any element can share the same value or name.
- Block Elements : <h1>, <p>, <ul> and <li>
- Inline Elements : <b>, <i>, <em>, <a> and <img>
Week 6 :
Physical Class
Physical Class
In this class, Mr.Shamsul continued from the previous lecture and gave an introduction to CSS. Afterwards, we continue working on our HTML code where we learned about changing styles such as background colours and image, embedding a google font, changing text colour and aligning text.
Lecture 4 - HTML & CSS (Part 2)
Notes :
- CSS allows to create rules that specify how the content of an element should appear.
- A CSS rule contains 2 parts : a selector and a declaration.
Selector - Indicate which element the rule applies to.
Declaration - Indicate how the elements referred to the selector should be styled. - Declaration is broken down into 2 more parts : property and value.exp : font-family: Arial;
- 2 Ways to Employ CSS : Internal (through the same HTML file) and External (through another CSS style sheet)
Week 7 :
Physical Class
In this class, we first had a lecture about CSS Selectors. Then Mr.Shamsul shared some examples on how to use CSS elements. Afterwards, we were to experiment with CSS elements and implement it to our HTML website, one of them being 'float'.
Physical Class
In this class, we first had a lecture about CSS Selectors. Then Mr.Shamsul shared some examples on how to use CSS elements. Afterwards, we were to experiment with CSS elements and implement it to our HTML website, one of them being 'float'.
Lecture 5 - CSS Selector
Notes :
- CSS - Cascading Style Sheets
- Many CSS selectors such as :
- Universal Selector ('*' - selecting all elements on one page)
- Element Selector ('p' - targets HTML elements by their tag name)
- ID Selector ('#my-element' - targets element with a specific id attribute)
- Class Selector ('.my-class' - targets element with a specific class attribute)
- Descendant Selector ('.container a' - Selects an element that is a descendant of another element)
- Attribute Selector ('input[type=text"]' - Selects elements with a specific attribute value)
- Child Selector ('ul > li' selects elements that are direct children of another element)
- Pseudo-class Selector ('a:hover' selects elements based on their state or position in relation to other elements)
- Pseudo-element Selector ('p::first-line' selects parts of an element rather than the element itself)
- Adjacent Sibling Selector ('h1 + p' selects an element that is immediately preceded by a specified element)
- General Sibling Selector ('h1 ~ p ' selects all elements that are siblings of a specified element)
- Universal Selector ('*' - selecting all elements on one page)
- Reasoning to many selectors include : Specificity, Structure, Responsive Design, Stateful Interactions, Cross-Browser Compatibility, Ease of Maintenance, Accessibility.
Week 8 :
No Class (ILW)
Week 9 :
Physical Class
In this class we had a lecture about Box Model layout in CSS. After the lecture, Mr.Shamsul demonstrated how we would use the box model element. Then he gave us a simple code and asks us to add box elements in the code along with changing the typography, style and colour of the layout.
In this class we had a lecture about Box Model layout in CSS. After the lecture, Mr.Shamsul demonstrated how we would use the box model element. Then he gave us a simple code and asks us to add box elements in the code along with changing the typography, style and colour of the layout.
Lecture 6 - Box Model
Notes :
- Every element has a default display value.
- A box has 3 layers surrounding its content ; Padding, Border, Margin.
- Flexbox is for creating responsive and efficient web layouts as it manipulate elements' positioning and spacing within a container.
- Flex Container : The parent element with display: flex.
- Flex Items : The children of the flex container.
Week 10 :
Online Class Due to unforeseeable environment, this class was conducted online. In this class, we followed Mr.Shamsul as he guides on how to make a simple website layout. Some of us also had to share our work progress on the code through screen sharing.
Week 11 :
Physical Class
In this class, we needed to show our rough idea on our final project which includes, wireframes, colour choices and font choices.
Week 12 :
There was no class this week, but we had to post our figma/AdobeXD prototype on Google Classroom.Week 13 :
Physical Class
In
this class, we showed our progress on the website/prototype and get feedback about it.
Week 14 :
Physical Class
In
this class, we showed our progress on the website and get feedback about it.
Instructions
Exercise 1 : Web Analysis
In this exercise, we are to review 2 websites from the links given. I needed to take note of its design, layout, content and functionality. I also needed to take note the strength and weaknesses of the websites and how they impact the user experience. Finally some recommendations (if any) for improvement of the website.
Selecting the 2 website :
When it comes to opening a website, I would usually search for its title and then only then click on the website I am trying to look for, but in this case for this exercise, it is a bit different. I am clicking on random award winning websites and seeing what they have to offer (in terms of user interface). So the 2 website I have chose for this exercise would be websites that I found really interesting and intuitive.
Website 1 : Sculpting Harmony (link here)
fig 1.1, Sculpting Harmony : Main Page (On Computer)
fig 1.2, Sculpting Harmony : Introduction to Chapter 1 Transition (On Computer)
Sculpting Harmony is a website about how the Walt Disney Concert Hall (WDCH) was designed. In terms of what the purpose of the site is, I think it is communicated well as the information of the site is immediately stated upon entering the site (fig 1.1). As for the layout, it is very simple but I feel like the spacing for the text and image could be improved and less far from each other on computer while on mobile they could have made it so the image and text fit better in a single screen (fig 1.3). When it comes to visual design, I think the site nailed that aspect. It only uses a combination of 2 colours most of the time in each section which makes it very pleasant to the eyes. Typography in heading definitely looks strange with its distortion but it makes up for it with its animation as you scroll (fig 1.2). For longer texts, the font choice is fine but I find the big first letter (as in fig 1.3) with it's continuation being the small text below, very uncomfortable to read. The imagery choice is good with some close-up shots for the modeling process and paired really well with the background colour choice.
fig 1.4, Sculpting Harmony : Chapters / Menu (On Computer & Mobile)
Moving on to functionality and usability of the website, in this category I think the navigation of the website is pretty straightforward and direct to any users. It uses a one page scroll system with a single menu button (fig 1.4) for navigating the each different sections which I think works pretty well but the scrolling is way too long for what is it trying to show. Upon entering the site, users will also be given the option to enable sound (fig 1.5) which is a neat touch if they want a background music to play, however the video's sound (fig 1.7) doesn't play because of this. They could have improved this by adding a specific button to play sound specifically for the videos portion. The models being viewable in 3D was also really unique as it had interactables view points on it. This would bring up a completed part of the WDCH from that view which makes the website more fun to explore (fig 1.5). Other interactables such as hovering over or clicking a button always played an animation which makes it very direct in terms of communication to the users. Next, is the quality and relevance of the website's content. In that aspect, it would be pretty accurate as it is taken from the Frank Gehry archive. Getty (The Research Institute) also got Frank Gehry to appear and talk about the WDCH (fig 1.6). Not only is the website insightful, but the website is well organized and planned with its story telling in each different sections.
As for the performance of the website, I think it is really quick and responsive, some of the animation that plays goes by fast yet still very noticeable to the user is what makes interfaces like this feel smooth and elegant. The load time when entering the website for the first time is fairly quick and acceptable even when switching to my mobile data. For compatibility, the interface is well optimized with any devices whether it be a smartphone or a computer. Finally we reach the strength and weaknesses for the website. When it comes to strength of the website, pleasant user interface with it's strong eye-catching aesthetics comes to mind. However the layout of the site and font choice could be improved along with the very long page scroll. With that being said, it is definitely still a well-made and generally a good website.
fig 1.7, Loket Design : Main Page (On Computer)
Loket Design is a website to showcase their design studio specializing in designing consumer products and brands. This is stated when you enter the main page of the website allowing users to know what the website is about immediately (fig 1.7). Another thing to note is the visual design for the page, it uses a bold red colour as their main colour with a simple but functional font. This makes it so that the website has its own distinguished identity. The layout of the site also utilizes a lot of white space so it is very easy on the user's eyes (fig 1.8). However when it comes to their product page (fig 1.9), they definitely made the size of the images/link too big on computer compared to on mobile. This makes browsing the products way more troublesome that it should be. Unfortunately, this same layout is also used in the packaging page. This could have been improved upon by displaying the products in a landscape orientation and making the images smaller so that it could reduce the amount of scroll for the page. As for the images, I think they done a great job trying to showcase their products and with its simple layout, it looks clean. However, when browsing on phone, I have noticed that they kept the banner images the same resolution so it looks off when viewing on mobile (fig 1.10). A simple improvement is by resizing it for phone specifically.
fig 1.11, Loket Design : Interactive Elements (On Computer)
Next, we move on to the functionality and usability on the website. The website has only 3 navigation button which makes it easy for users to filter by category. The website is also relatively easy to browse through for any users as it only has a few pages. There were only a few interactive elements in the website, most of them being hovering over a product/section for it to communicate with the user which is generally acceptable (fig 1.11). I have noticed compared to my the first selected website, that the navigation button in this site didn't show any form of interaction when hovering over it which is kind of a missed opportunity/oversight in my opinion. In terms of content, I think it is straightforward enough for a design studio. It doesn't need to show technical content and knowing it's coming from the design studio that made each product, its content is accurate. The content of the website is also well organized and tells its own story.
While browsing around the website, I found that the responsiveness and load time to be up to standard which is generally pretty fast, even on mobile data. For compatibility, on both computer and mobile phones, the website is optimized well which is generally a good practice for any website design. Lastly, the strength and weaknesses for the website. As for the strength, it is a easy and user-friendly to navigate the website. I find that the theme/branding of the website also does a good job on trying to sell you the product (which is obviously their goal!). For the weaknesses however, the layout of the product and packaging page is pretty bad causing for a longer than needed scroll just to browse products. Interactive elements also feels lacking in my opinion and could be better. I also feel as if there should be a consistency on the banner images especially for different devices too. With that being said, it is still a fairly good website especially when it's trying to promote products! It is simple but sometimes simplicity is all you need for a good website.
Exercise 2 : Replicate a website
In this exercise, we needed to choose 2 websites from the links provided and replicate it in Illustrator. We needed to focus on the layout, type style, and colour style. The image however does not need to be the exact same from the site and can be replaced to a similar one.
Website 1 (link here)
First, I imported the screenshot into Illustrator and begin making guidelines so that I can see the rough layout as well as help me align elements and images for later.
fig 2.1, Adding Guidelines (7/5/2024)
Then I started creating simple shapes first that I can see in the website. This includes boxes and lines. I also used the eyedropper to match the colour of the elements.
I noted a small gradient tint in the screenshot of the website. This is commonly used to allow easier readability on top of an image. I then created the same element on the banner of the site.
As for images, I used the link provided for free images. I tried to match the same image and if not, I tried matching the style of the image.
Next, I went for creating specific elements in the website. In this case, it's the checkmark, magnifying glass and the navigation arrow. As for the social media logos, I found similar ones to the website online and changed the colour to fit it.
fig 2.5, Creating Elements (13/5/2024)
Lastly, the hardest part was probably trying to find the appropriate type for the site. There was also a link provided to find free fonts. While not perfectly identical to the type used, I manage to find similar types which are Reddit Sans, Open Sans, Source Sans 3 and Karla. After that, it was all about finding the right size, adjusting the leading and tracking.
Final Outcome 1 :
Below shows the Final Website Replication 1!
Website 2 (link here)
Since the steps is more or less the same than the first one, the descriptions have been simplified.
First, I created guidelines on the imported screenshot.
First, I created guidelines on the imported screenshot.
Next, I added simple elements such as boxes and lines following the original website.
Here, I added 2 different background images and also added coloured box to blend the background with each other, just like how the website shows. To achieve the effect, I had to adjust both the opacity and gradient for the box as shown in fig 2.11.
Then I found images similar to the website. This one was a bit more challenging since I had little to work with, but I decided to choose images that is related to the titles of the articles.
This website also had a logo in it, so I decided to recreate it by tracing it. The easier approach was to probably use a more clearer image from google but I decided to challenge myself.
After importing the logo back to the original file, I also decided to add similar social media logo to the site and start identifying its typeface. In this case, the site uses the default Arial (or close to it) for the entire website.
After adding all the type, I've noticed that the readability for the top page is kind of difficult due to the background image. To fix this, I added another light opacity box on top of the background image to make it more readable.
Lastly, I couldn't find a graphical image similar to the one shown below (fig 2.16), so I decided to recreate it by tracing it. This does make it closer to the original page so it's a plus!
Final Outcome 2 :
Below shows the Final Website Replication 2!
Final Outcomes (in PDF) :
fig 2.19, Final Website Replication 1 [PDF] (13/5/2024)
fig 2.20, Final Website Replication 2 [PDF] (13/5/2024)
fig 2.19, Final Website Replication 1 [PDF] (13/5/2024)
fig 2.20, Final Website Replication 2 [PDF] (13/5/2024)
Exercise 3 : CSS Layout
In this exercise, we needed to choose a recipe from the link provided, then make a recipe card using HTML and CSS. The webpage should display the ingredients and instructions in an interesting matter.Chosen Recipe : Zucchini Bread (link here)
First, I decided to create a moodboard to get a rough idea on how a recipe card should look like.
First, I decided to create a moodboard to get a rough idea on how a recipe card should look like.
fig 3.1, Moodboard (7/6/2024)
Then, I decided to dive in straight to coding. I first added the 2 main content required for the recipe card, the ingredients and the instructions.
Here, I begin adding other elements such as background colour, different text style, as well as a picture of the food. A different file called "style.cc" also can be seen used in the image below where it controls all of the website's design.
fig 3.3, Adding elements ; text style, picture, float (10/6/2024)
Unexpectedly here, I got stuck trying to figure out what to do next. So I went back looking at the website and found contents I could add that are quite crucial for a recipe card. Those are the servings, preparation time as well as cook time. I also added a small information about the food itself as putting ingredients next to the image didn't feel quite right. With that in mind, I created a simple recipe card layout as shown below (fig 3.4) which I would use as a guide.
I begin realigning elements following the layout. I used a new element here called 'flex' and used it to create the 3 boxes that can be seen in a row (fig 3.5). The same element can also be seen used in fig 3.6.
For the instructions section, I decided it would be best to colour the entire content into 1 colour. The "INSTRUCTIONS" and "INGREDIENTS" now also had a slightly darker border to make it stand out more in the recipe card (fig 3.7 & fig 3.8).
I also added simple repetitive background and made the content portion have a full flat colour.
Final Outcome :
Click here to view the website! : Zucchini Bread Recipe
Feedback
Week 2 :
As long as you write following the information given in the google classroom, it is good.
Reflection
Exercise 1 - Web Analysis
For the first exercise, I found it enjoyable to be able to understand the flaws and strength of a website and what makes for a good user interface and experience. I have learned to do a detailed breakdown through 2 different devices to ensure that both ways were equal for the user interface and experience. Throughout this exercise, I have learned that responsiveness means everything when it comes to website design and the colours choices of the website should be pleasant to user's eyes. Exercise 1 overall teaches about understanding good UI/UX practices and I have learned to be critical in this aspect so I could use it to apply for my work.
Exercise 2 - Replicate a Website
In the second exercise, I didn't really enjoy doing this task. While it was straightforward enough, it feel quite tedious and annoying to do. However I do understand that this exercise is important in knowing about the layout of a website. Throughout the exercise, I have learned that newly introduced sections or elements most of the time always align with one of the elements before to have a balanced layout. Exercise 2 teaches about the importance of formatting in website design and I have learned to take this knowledge to use it for my future references.
Exercise 3 - CSS Layout
In the third exercise, I could say it was the one I didn't like the most. It is probably because I just generally hate coding. It's just errors after errors and looking for a way to get the website to the way I want. While getting the website to the way you want is really satisfying, the experience through creating it wasn't great at all. Throughout the exercise, I have learned many new different elements such as 'flex' through tutorials and websites which I then utilized in my recipe card to achieve the design I want. Exercise 3 teaches about HTML and CSS and when to use them when necessary. I have learned many new different elements that I can apply to future HTML/CSS works.
My Other Interactive Design Tasks :
Exercises (Current)
Project 1 : Prototype Design
Project 2 : Working Web Page
Comments
Post a Comment