INTERACTIVE DESIGN / Exercises
24 Apr 2024 - 6 June 2024 (Week1-8)
Kaho Yamaya / 0364278
Interactive Design / Creative Media / Taylor’s University
Exercises- HTML Document Development, CSS Layout Model
JUMP LINK
・Submissions
・CSS Layout
・Creating a Recipe Card
LECTURES
Week1(24/4/2024-25/4/2024)
Fig Usability Designing Products for User Satisfaction, PDF, Week1 (24/4/2024)
We figure out the five principles in the first minutes in the class. Consistency, Simplify, Feedback, Error Prevention, Visibility.
Week2 (2/5/2024)
Fig The rough sketch (left), final outcome (right), Week2 (2/5/2024)
In this week, we are making application screen and their transition as a practice. In our group1, we made local clothing store app with using H&M, padini as a visual references. First we talking about how/what/where the screen came up and make some rough sketch for the final outcome.
Fig Presentation of final app outcome, Week2 (2/5/2024)
We are doing presentation of our team’s final app for other team. Luckily we are the last team for presentation, so we could prepare well in limited time. We still have some problems in our app, but we got highest score in the four teams.
From Mr. Rahman’s feedback, user will use search bar/button at first because they want to know what contents are in the website. If there’s no home button or back to top button, it will give user feeling like trapped by the page.
WEEK3 (9/5/2024)
Fig Understanding Website Structure, Week3 (9/5/2024)
Fig Screen garb from given webpage, Week3 (9/5/2024)
In week3, we are doing research for learn design from existing webpage. First we given three webpage links for research, but only choose two out of three. We took full size screen shot of each webpage and make similar visual in Illustrator.
Note: Use google chrome for show codes. Right click> inspection> choose hamburger button> Choose “Run Command”> Type “Screen”> Choose “Screen shot (full)”
Week4 (16/5/2024)
Fig How to write html codes, Week4 (16/5/2024)
In this week, we are learn how to write html code. As a Mac user, I use textedit for make html. Change its name to “index.html” and paste its link for browser, the progress in textedit appears in the browser.
Note: "_blank" is for opening link in new tab. Remember if it’s not the link directly bring you to the page from past page.
Week5 (23/5/2024)
Fig Class lectures, Week5 (23/5/2024)
In this week, we are write a code on DreamWeaver. We made a timetable with code. We learned the difference of colspan and rowspan code. Colspan is for select the whole cell in horizontally and merge them into one cell. Rowspan is for arrange the length of cell vertically. If you want to change the background colour or something, you need to type style= in the code. Cellpadding for add some space in the cell.
Week6 (30/5/2024)
Fig Class tutorial, Week6 (30/5/2024)
If you use asterisk in the CSS, it will select the all of content in the page. For example, * { margin: 0 } make all margins to disappear.
Fig Using Google fonts, Week6 (30/5/2024)
When you choose fonts, first you need to copy Embed code and paste it in the below of title. After paste Embed code, copy & paste the code has font informations.
1.2em and 12pt is almost same size.
Week7 (6/6/2024)
Fig Online lecture, Week7 (6/6/2024)
INSTRUCTIONS
Fig Instructions for this exercise, PDF, (page7-8)
SUBMISSIONS
Exercise1- Web Analysis /Week1-2
WEEK1
Fig Screen grab of “Nokia 3310 tribute”, Week1(28/4/2024)
The explanation by the creator, Karina Makarova said, “Nostalgic website about the legendary Nokia 3310, a journey of reexploring its classic features, from the monochrome screen to the beloved Snake game”. We can understand the concept from her explanation but also we can get the basic idea from its appearance. We can get to know the overview of Nokia 3310 from this page, which is the old type of phone and first announced on 1 September 2000.
Type design is well-balanced and having good readability. We can change the language for English and Russian from right above button. The left above button is message from creator and it refers mail icon. The font is made by the rough dots and it reminds me the retro dot games.
Fig Screen grab of function, Week1 (28/4/2024)
Some of the functions related to the move of user and we can enjoy the design intuitively and visibly. The Figure above is the Nokia 3310 placed at the bottom of screen and when I tried to scroll down, it become separately shown in vertical line. The menu bar in top section is go away when we try to scroll down, but this website is not having the other page to go, so I think it is fine as a function, but also it is not helpful for user. We can see the scroll bar as one big dot in the right of screen. It shows the progress of the web page.
Fig Screen Capture of Snake, Week1 (28/4/2024)
The main theme of this page is Nokia 3310, but there is one more reference. It is the dot game, “Snake”. Snake is the game with simple rules, which the main character:snake chase the apples. We can see the visual of snake in this webpage and also the last unique function is related to this game. I found there is a button of “play” below the snake part. When I click on this, I actually could play the Snake game in more simple visual. When I click “Go back”, I can go back to the continues of previous main screen.
The strong point of this webpage is the unique visual. It will get people’s attention if it’s in the line of webpages because the colors are limited and more easily to get information than others. Also, the functions in here is narrow down the points to show and really simple and understandable. The weak point is the less buttons for the user. This webpage aim for let users read the whole page upside to down and that’s why it has no home button or something in the main screen. However it will give users frustration because we couldn’t move the page freely as we want. As I learned in week2 class, if there’s no home button or go back to top button, it is same as the room without door. It gave user feeling like trapped in the page, and will cause left the page. Sometimes the animation of loading system is not working and it made me little bit disappoint.
It get my attention strongly because I'm game person. I think it has strong visual for get people’s attract, but the feeling of trapped by this page is the most strong memory with it. (535 words)
Nokia 3320 tribute by Karina Makarova, 24 Jan 2024
WEEK2
Fig Screen grab of “BrewDistrict”, Week2 (30/4/2024)
The explanation by the creator, De Jongens van Boben said, “Classic craft beers, brewed without fuss. Pure, honest and damn delicious.” It is completely the explanation for the beer and we can understand what is the main theme in this website. This is the website of the beer marketing and the product that related to the alcohol.
When we enter the page, the sentence “Are you over 18 old?” and yes/no button is came up. It is the error prevention for prevent non-suitable person to access the products. After press over 18 old button, the main page is came up.
Fig Screen grab of product description, Week2 (30/4/2024)
The can placed at the middle of page is related to user’s move, so it start spinning when user scroll the page. When we came particular point, the more details of that product is came up. If we want to know other type of beer, the arrow button placed at the below of picture is led us to other beer. Here is the name of product, alcohol percentage of beer, internal capacity, ingredients,storage advice, color, calories, bitterness, gluten free or not. A lot of information in one screen but it is really simplified design to convey these informations for user. The fonts are using appropriately and some headlines are more bold and emphasize than the normal texts because it is important for user.
The transition of pages are so smooth and it will satisfy the user. The system bar is always on top of the page and it will help user for more smooth experience. When we click the “Order now” button, it smoothly led us to the product list page. The main goal of this page is let user buy some products. That’s why the Order now button is changed color in the screen and emphasized.
Fig Screen grab of Product list, Week2 (30/4/2024)
Here is the product page for purchase them. The informations are product name, price, alcohol percentage, and internal capacity. Compared to the home page, it has less informations because we already read the detail in previous page. The price and order now button is same color in the screen and we can see the consistency from color. Also here is a category list and user can see products from here.
Fig Screen grab of “Click the can”, Week2 (30/4/2024)
We can see the Click the can button on the right above. When we click it, we smoothly moved to this pop and cute page. It is a mini game for just click the can. I played this game for few minutes, but there are just some comments from creator pop out from below the screen. In previous webpage, “Nokia 3310 tribute”, also have similar game page.
The strong point in this webpage is the great visual of UI and clear instructions, also the smooth transition of the page. I could understand the concept of this page by its appearance without any stress. Especially the first error prevention is really good because they do not want to sell the product for non-suitable customers. The weak point in this webpage is there are few points having a strong contrast with background and pictures. It hurts my eyes when I scroll the page. However, the most of the functions are so smooth and I've fully satisfied with overall. (533 words)
BrewDistrict by De Jorgens van Boben, 28 October 2023
Exercise2- CSS Layout / Week3
WEEK3
.png)
Fig Full screen shot from original website, Week3 (9/5/2024)
I chose “Ocean Health Index” and “Bandit Running” from given website.
Before trace the structures, the original webpage screenshot need to be transparent. So click hamburger button in layer mode> choose “template” to make it transparent. We need to choose similar font for original webpage font. I chose Acumin Variable Concept series for the “Ocean Health Index”, and Grantha Sangam MN series for “Bandit Running”.
Fig Compare original and reproduced image, Week3 (10/5/2024)
I found some points have asymmetry design. For example, the button in above pictures bottom part is asymmetry in left and right. This is because of length difference between middle sentence, but I think it could be symmetry design. The size of songs are appropriate in each section.
Fig Mistake in original webpage, Week3 (10/5/2024)
In Bandit Running page, some verbally mistake is shown. I don’t know if there’s b-mail existing, but I think it is mistake. Also, one mistake in the privacy policy bar. I didn’t heard PROVIDIE in the past. I could notice them because I check the whole webpage details, however if I just using the website, I wouldn’t notice them. We need to pay attention for verbally mistake for this kind of case.
FINAL OUTCOME
Fig Replicated “Ocean Health Index”, JPEG, Week3 (10/5/2024)
Fig Replicate “Bandit Running”, JPEG, Week3 (10/5/2024)
Exercise3- Creating a Recipe Card / Week7-8
WEEK7
Fig Working Process, Week7 (7/6/2024)
I chose All-Butter Flaky Pie Crust for the reference. I made html file and CSS file for this webpage. We need to put these informations below:
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.
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.
Also we need to try interesting function and layout in this exercise.
Original recipe link:
https://www.101cookbooks.com/flaky-pie-crust/#recipeWEEK8
Fig Adjusting contents, Week8 (9/6/2024)
I try to set transparent box for manage alignment of sentences. They are having a lot of sentences in its section, so I want to align end point in whole sentences and get more clear, readable visual.
Fig Adjusting contents, Week8 (9/6/2024)
I'm loving with the function "go back to home button" that led user to first page/section. It will improve user experience in the webpage. I search for some example of set button using class attribute, and I chose the button appear in right-below of the page.
Fig Adjusting contents, Week8 (9/6/2024)
To get more interesting function in my page, I changed numbers into red colour to emphasise them more in the sentences. I use class attributes and span in the middle of sentence in here.
FINAL HTML&CSS LAYOUT
Fig Final Html&CSS layout, JPEG, Week8 (13/6/2024)
Link for the site:
In this exercise, I could use class, id attributes and so on in CSS and try more expansion skills. Honestly, I couldn’t get enough understanding in Week7 online class and having fear for CSS because it seems really difficult things for me at that time. However I studied after the class, I could learn CSS is adding more elements into html and make it more attractive. My favourite function in this exercise is definitely the go back home button. I usually set it in my blog, but it is just a direct link with sentence. I’m really happy with its visual in my exercise webpage.
FEEDBACK
Week1 (25/4/2024)
General Feedback... We need to save our project in the index form. Screen shot the whole screen from the source cord.
General Feedback... We need to save our project in the index form. Screen shot the whole screen from the source cord.
Week2 (2/5/2024)
General Feedback... In webpage transition, we need to get a sense of user, not a designer. For example, sometimes designer will prioritize its visual than the function. However, this is the lack of sense for user.
Week3 (9/5/2024)
General Feedback... In the safari, we can’t see the html code by ourselves. So you need to turn in google chrome for get full-screen shot or something.
Week4 (16/5/2024)
General Feedback... Since advanced webpage, we can use more high quality and heavy images in the web. Web page allows only less than 72ppi. gereral html form is <element>Information</element>, but if you want to add more information to your web, you can use <p lang="eng-us">Paragraph in English</p>. Don‘t add h1 to bold because it already became bold.
Week5 (23/5/2024)
General Feedback... <id> is for the unique attribute, and can’t add on the other attribute. It can be say like <id> is point to the particular attribute in the codes. <h1> series are give same effect in the group. Block elements are appears in the new line. Inline elements are display in the controllable line. Choose DreamWeaver’s workspace to ‘standard’ because we are designer. If you want to use special character like > in your sentence, you need to type after certain code. Space can be type in anytime, anywhere. is show the space in the sentence. Press tab key to make indent in the lines. - is for show - in the sentence. If you want to use rowspan code, the row content needs to be in next <tr> area.
REFLECTIONS
Comments
Post a Comment