22/04/24 - Week 1- Week ?
Sheren Princessa Davon / 0362134
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercises
QUICK LINKS
Exercise 1:
Web Analysis
Exercise 2:
Web Replication
Exercise 3: Creating Recipe Card
INSTRUCTIONS
PRACTICAL
Week 2: Group Activity - Web Prototyping
For this activity, we were divided into groups and our task was to create a paper prototype of a certain scenario given. The scenario my group was given is:
 |
| Scenario given |
We decided to pick an existing restaurant/cafe, XOXO in Syopz Mall. We prioritized the flow of the app beforehand, making sure to have the necessary pages.
Fig 1.1Paper Prototype
We ended up with the following:
1. Landing page
2. Main menu page
3. Cart
4. Dining Options (Delivery/Pick-up/Reservation)
5. Payment
6. Account
For 4. Dining Options, we further categorized them into 3 different sections, and each section will have their own subpages and details for the user to click. However, we didn't have enough time to fully compile the different pages and layouts in order so it ended up being a little messy. Despite that, we still managed to create a consistent prototype that flows well.
Week 4: Introduction to HTML
This week, we learned the basics of HTML in class. Using notepad, Mr. Shamsul guided us to create a simple webpage containing information about ourselves. We learned about the different heading types (h1, h2, h3), how to add text, image, links to external websites, and different lists (ul, ol).
 |
| Fig 1.2 Notepad |
 |
| Fig 1.3 Personal website - Week 4 |
This week, we continued the code from last week, but this time we used Adobe Dreamweaver instead. This application allows us to code much easier and quicker since it has features like automatically writing the closing tag for a specific line of code for us. Dreamweaver also tells us errors or bugs found in our code. We also learned how to create tables in HTML, as well as adding border-collapse.
 |
| Fig 1.4 Dreamweaver |
 |
| Fig 1.5 Table in my website - Week 5 |
Week 6: Introduction to CSS
This week, Mr. Shamsul introduced us to CSS, which basically allows us to edit the appearance of texts and elements on the website. A selector is used accompanied by curly brackets {}. We created forms in our website as homework, and in class, Mr. Shamsul showed us how to edit the background colors, text colors, and how to set an image as a background.
 |
| Fig 1.6 Dreamweaver |
 |
| Fig 1.7 Website - Week 6 |
EXERCISES
EXERCISE 1: Web Analysis
For exercise 1, we were tasked to analyze 2 websites 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.
This is a clothing brand Ellesse that displays its brand’s collection. As we open the website, we are greeted by an interesting home page design of two of the clothing designs (Fig 1.1). This is a great way to capture the audience’s attention. The scrolling system is quite unique to the typical website where instead of scrolling down, this website scrolls from right to left.
 |
| Fig 2.1 Homepage |
Strengths
The website is compatible in different devices, the example I used was iPhone XR. However for the home page, the scrolling isn't as enjoyable and smooth as compared to laptop.
 |
| Fig 2.2 Website on iPhone XR |
The navigation system is very clear at the top, distinguishing the different sections of the website (Fig 1.3). The About and Information page is separated into 4 different sections, making it easy for viewers to search for specific information. The Online Store section redirects viewers into their official shopping website, which is useful for customers who want to purchase items immediately.
 |
| Fig 2.3 Navigation Bar |
The website is quite interactive and engaging. Moving our mouse on the buttons in the navigation bar triggers an animation that indicates viewers can click on it. There is a similar animation of an arrow to the “Buy” option in the Home page, also indicating viewers can click on it to redirect us to the page where we can buy the product. While scrolling in the homepage, viewers can actually make use of their mouse cursor as a magnifying glass. This is an extremely helpful feature as viewers are able to zoom-in to clearly see the patterns and material of the clothing (Fig 1.4).
 |
| Fig 2.4 Magnifying glass feature |
The website is really consistent in terms of its appearance. The same fade in transition is used throughout the websites (homepage, About page). It is simple but effective in making the website more appealing. An appropriate amount of white space is used to create a professional and clean look, keeping the colors simple with a white, gray background and black text. The same typeface is also used to remind the viewers they’re in the same website, just different webpages (Fig 1.5).
 |
| Fig 2.5 White space & consistent typeface |
In the homepage, the pictures showcasing the clothes are really big, however they’re not overwhelming because of the amount of white space used in the background, giving it room to breathe (Fig 1.6).
 |
| Fig 2.6 Homepage incorporates white space |
Weaknesses
The design of this website is very minimalistic and clean, however there is quite a lack of call-to-action buttons, making viewers less inclined to click on something. The text of the product names and prices are also quite small, making it a bit hard for viewers to read (Fig 2.7).
 |
| Fig 2.7 Small text |
The headings are written in English, however the following texts and information are written in Japanese (Fig 2.8). Though this is a Japanese brand, these titles may be misleading in the language used. There is no translate option too.
 |
| Fig 2.8 Mismatched heading and text |
Clicking on the buttons in the navigation bar of the homepage leads viewers to a different website layout, the structure of the navigation bar changes (Fig 2.9), which may be a bit confusing at first.
 |
| Fig 2.9 Different navigation bars |
The next website is an interior design company showcasing their designs.
Strengths
The homepage is visually pleasing and the background image chosen tells the viewer what the website is about; interior design.
 |
| Fig 3.1 Homepage |
 |
| Fig 3.2 Different colors as we scroll |
The pictures presented in a gallery that is big and clear (Fig 3.3), accompanied by a video of the rooms' decor. This is great as the website's main goal is to showcase their designs. It's nice they included both videos and images since there are people that prefer one more than the other.
 |
| Fig 3.3 Image gallery |
The fonts and typefaces (combination of a serif font for headings and sans serif for body text) used are consistent, as well as the colors (mint green, and occasionally an off-white and unsaturated dark green-gray-ish color). This gives the website a whole and cohesive feel. (Fig 3.3)
 |
| Fig 3.4 Cohesive color scheme & typefaces |
The information presented in the website is quite clear and concise, there are explanations behind the designs, as well as a thorough About page, and Contact page.
Weaknesses
In the Homepage, there are arrows at the side that viewers can click to preview the next design, however they are quite small and hard to see. There is also a small text button to view the project, however with the lack of a call-to-action button, viewers might miss it too (Fig 3.6).
 |
| Fig 3.6 Small elements |
Since there are quite a lot of pictures and videos in the website, it takes a bit of loading time. When media is loading, there are no indications except a blank space. It may cause the viewers to miss out and keep scrolling, thinking there is nothing there when in reality the media hasn't fully loaded yet. (Fig 3.7; the left is loading, right is loaded picture).
 |
| Fig 3.7 No loading icon/indication |
Like all websites, there is a clear navigation bar at the top of the website. However, the navigation bar doesn't have a background, causing it to blend into some of the contents in the website (Fig 3.8).
 |
| Fig 3.8 Navigation bar in different webpages |
The compatibility on different devices isn't too good. I tested it out with the dimensions of Samsung Ultra 20 and some parts of the website are fine, however the videos embedded were cut and zoomed in. Some of the text margins were also too tight. (Fig 3.9)
 |
| Fig3 .9 Compatibility with different device |
A personal opinion I have regarding this website is how small the margins are. The lack of space in the margins cause me to feel a little suffocated, especially with all the large pictures and text (Fig 3.10). Another personal opinion is the choice of their main color, to me, it does not match the vibe of their website, it lacks the professional feel, as opposed to if they had chosen a neutral background color instead. This way, the pictures could also stand out.
 |
| Fig 3.10 Tight margins |
EXERCISE 2: Web Replication
For this exercise, we are required to choose 2 websites from the 3 given and replicate them on Adobe Illustrator/Photoshop.
I picked the Morgan Stanley website and first screenshotted the whole page, then I put it into Illustrator and set it as a template and started to replicate the website.
 |
| Fig 4.1 Process on Illustrator |
I couldn't find the original font, so used another similar font: Open Sans (Light, Medium, Semibold, Bold) and Banhschrift (SemiLight).With the screenshot as my reference, I created the rectangles, backgrounds, formatted the text and also created some of the icons (the drop-down arrow, search button, left-right arrows, call-to-action button). I also used guides and grids as a guide to properly understand the alignment of the website. I also replaced the images with stock images I found on Unsplash.
Final Outcome #1:
Fig 4.2 Final Web Replication #1
Below is the comparison between the screenshot (left) vs. my replication (right):
The next website I chose is the Ocean Health Index website. This website is a bit simpler than the first website and I basically repeated the same steps I did for the 1st one.
 |
| Fig 4.4 Process on Illustrator |
The fonts used in this website are Helvetica (Bold, Light) and Univers LT Std (55 Roman, 65 Bold). I looked on Unsplash again for pictures similar to the ones used in the website, mostly ocean-themed. For the logo, I simply searched it up on Google and masked it out as a PNG, however I did everything else myself. For example, in the left section of the Global Assessment, there are circular patterns in the background of the button, which I recreated with the Pen Tool. For the lower part of the website, there is a dark blue-purple-ish gradient background which I also created, I also added some grain on top of it. Guides were also used to help me in the process.
Final Outcome #2:
Fig 4.5 Final Web Replication #2. JPG - Week 3 (07/05/24)
Below is the comparison between the screenshot (left) vs. my replication (right):
.png) |
| Fig 4.6 Screenshot VS. My Replication |
EXERCISE 3: Creating Recipe Card
For this exercise, we are tasked to pick a recipe from this site and create a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. The requirements are:
Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
I picked a Mushroom Lasagna Recipe and started designing the website. First, I created the html file, css file and downloaded the images, then compiled them into one folder. After that, I started writing the HTML code.
 |
| Fig 5.1 HTML file |
After all the necessary information is presented, I started designing the CSS file. I included element selectors (body, h1, h2) and designed the headings with different fonts and colors to make it more appealing.
 |
| Fig 5.2 Element Selectors |
Then, I added class selectors for the titles, instructions and ingredients. I modified the text colors as well as the borders and appearance of the Ingredients.
 |
| Fig 5.3 Class Selectors |
Finally, I modified the ID & Class selectors for the images for proper alignment.
 |
| Fig 5.4 ID selectors |
Final Exercise 3: Creating Recipe Card
 |
| Fig 5.5 Website Screenshot |
HTML & CSS Files
REFLECTION
Exercise 1 - Web Analysis
This exercise was quite insightful for me. It helped me realize that websites should have good layouts and designs, interactive elements to keep us engaged, as well making sure the objective of the website and icons are clear. It inspired me to be more mindful and aware next time I'm browsing websites.Exercise 2 - Web Replication
This exercise was somewhat tedious, especially retyping all the text accordingly. However, it gave me an insight to how a website layout should be like, the consistencies in the layout as well as usage of text. With this exercise, I was able to familiarize myself further with making a website cohesive and will help me with my future projects.
Exercise 3 - Creating Recipe Card
This exercise was challenging to say the least, especially the part where I had to code the CSS files myself. However, with the help of the tutorials in class, I was able to create the necessary selectors and to change the appearance of the website to be more appealing. This exercise was the opportunity to apply the lessons and practices I've done in the previous exercises.
Comments
Post a Comment