Labels

Interactive Design // Final Compilation

 30.08.2022 - // Week 1 - week 14

Lim Yi Xvan 0354552

Bachelor of Design in Creative Media 



Instruction


Tasks

Assignment 1: Landing Page Design

On week 3, we were briefed about the upcoming assignment 1, on the outlines and steps we're going to progress in. Firstly, we were assigned to make 20 wireframe sketches in one week and also with the color scheme, google fonts, research references chosen which we are going to apply it afterwards then update them into Miro.

I've went through a lot of good examples of websites from awwwards.com and have a deeper observation in their buttons, layouts and compositions etc before creating the wireframes. Here are some great websites I saw, which I think the layouts are clean and action buttons are clear. They're also related to my topic for my website which I chosen Fashion website.

Good examples:
https://www.zara.com
https://www.magdabutrym.com
https://retrofete.com
https://deveauxnewyork.com

I've also get some visual research from Pinterest before starting progressing with the sketches. So that I'll have some clues on how to position the buttons, navigation bars and images. 

fig 1.1 - visual references

fig 1.2 - 20 wireframe sketches 

Board link: https://miro.com/app/board/uXjVPVZqMMs=/?share_link_id=823293050562

I can't believe that I've squeeze my time into days and created 20 wireframe sketches. In these 20 wireframe sketches, I've used different compositions, layouts and go-to-action buttons by using the good examples websites above as references. 

After done creating the sketches, I've went through Pinterest and search up colour schemes which are to be used for my landing page design later. Colour schemes I chosen is neutral and earth tone. 

 

fig 1.3 - colour schemes

Then, I've go to the google fonts website to choose the fonts that I want to be used for my landing page. The fonts are all so nice, I've chose 4 fonts which are Poppins, Montserrat, Philosopher and Anti Didone. However in my final stage of designing, I decided to use the fonts of Philosopher and Montserrat. I use Adobe Illustrator for designing the landing page.
After done designing the landing page, I upload the artboards and full landing page into Google slides as instructed to.

Submissions:


fig 2.1 - full landing page design in jpeg


fig 2.2 - full landing page design in pdf



Exercise 1: Web Document

On week 5, we are required to create a web document based on the content given. 

https://drive.google.com/file/d/1kxwcFR38wGsMobo1_fZSigJBcipmsGLq/view

fig 3.1 - contents given 

We were asked to follow exactly the format as in the document (Heading, Sub-Heading, Paragraph, list, including links). For a start, we need to create the document using Text Edit or Note Pad as shown in class. Also, a related image will need to be added on the top of the document. I'm using Text Edit for this exercise. But then I closed the file in Text Edit, so I opened the index.html file with visual studio code to make some edits.

fig 3.2 - progress of coding

After completed the task, we are required to upload the web document to a web hosting (Netlify) and submit the link in Google Classroom. 

Submission Netlify Link:
https://exercise1-limyixvan.netlify.app


Exercise 2: HTML Page

In week 6, we are required to create a single HTML page that contains the document and images from the link provided. In each main section, we need to include an id attribute that will be later used as an anchor to be linked from the navigation. We are also required to change the font accordingly and format the text and link as shown in class. Use the appropriate CSS style to style the page. Adjusting the width of the page is also asked to so the content doesn't fill up the entire screen.
Once done, we were told to upload the completed web page to Netlify. 

Materials given for Exercise 2: 
https://drive.google.com/drive/folders/1Rg970BgfyVEj49zG2SFPqGC33JzKvoUf

fig 4.1 - images to be used
 

If I have issue or questions which I'm not sure on how to create the specific item for my page, I will go through the w3 website and search up for tutorials. 
https://www.w3schools.com/html/html_media.asp#gsc.tab=0

Then, I've changed the background colour, text colour, text sizes, use different fonts for heading and contents, create scroll behaviour, apply margins, line heights and text align for my html page. Details were shown as below.

fig 4.2 - details of coding the html page


fig 4.3 - details of coding the html page

As fig 4.3 above, we were asked to include an id attribute that will be later used as an anchor to be linked from the navigation.
Once done everything in visual studio code, I uploaded the completed web page to Netlify just like how we did in the previous exercise 1. 

Submission Netlify Link:
https://exercise2-limyixvan.netlify.app



Exercise 3: Replicate Landing Page Design

In week 8, our independent learning week, we were asked to choose one of the websites from the list in the link below and replicate the entire main page/landing page design. This task is to enable us to look at the nuances of website design and to have a better understanding of the layout. All the website listed is the current trend in web design. 

fig 5.1 - list of link for us to choose

By then, we were allowed to use any images from any stock image website to replace the original image. For this task, I use Adobe Illustrator to replicate the landing page design of the website of Jade's one as I think her web design is super interesting and it's quite related to my liking. She used a spot light form to replace the mouse icon and also created a colour contrast on the area where the mouse passed by or pointing at.

fig 5.2 - interesting mouse appearance and colour contrast

However, I don't really like the colour choices used so I search up Pinterest for color palette to replace it with another colour scheme.

fig 5.3 - colour scheme I decided to use

I chosen this palette as I think it's softer and more comfortable for the viewer to look through which it also provides a relaxing mood for the reader.

Submissions:

fig 5.4 - full replicate landing page design in jpeg



fig 5.5 - full replicate landing page design in pdf



Exercise 4: Layout Design

In this exercise, we were asked to create an interesting and clear layout based on the previous class. Use the content given in the link to complete the task. The layout must have rows, columns, and a clear navigation system. Use all the given images to suit the layout. 

This design is kinda related to exercise 2, but what is different is that we need to design them using columns and rows.

Materials given for exercise 4:


fig 6.1 - html code in dreamweaver

Content was being separated in left and right with the class. And as pic shown above, texts are being divided into columns with the html codes.
 
Submissions:



Assignment 2
For this assignment, we were asked to create a live html page for our assignment 1. Was told previously that some of my design isn't possible to create like the texts and images duplicate on each other. Besides, I was asked to make my action-button more alive. With these feedbacks, I tend to create something alike and simplified. 

For my action-button, I make it underlined. For the image and texts duplicated, I try to maintain their positions but not duplicated. Some other tutorials were learnt at w3 school as bootstrap doesn't work for me.

fig 7.1 - html code for navigation dropdown content

I also did a hidden drop down navigation with the codes above learnt from w3 school. It only appears when your mouse hover on the section.

fig 7.2 - html code for shoes and bags section

For this section, I make my action-button more alive by making them in the middle of the image and in a box. Which when your mouse hover the image, it will be link to the page when you click. The colour will also change.

Submissions:



Final Project
For our final project, we were asked to create another 4 linked pages for our assignment 2.
Firstly, I recreate a new page on dreamweaver and then import into netlify. Then when I got the link, I attach it on the index html home page in assignment 2. 

My intention is to make simple page without any texts and just images displayed in interesting compositions. So here's how my "Knitwear Collection" page looks like. I wanted to introduce more about this collection so I kinda make it more contrast for this page to catch the reader's eye.

1st site (Knitwear Collection):

I also tried to remain the navigation bar above the top of the page for each site I create. Then, I also change the width for my dropdown navi as I think it was a bit interrupting for it to be so big and it will cover up other contents later.
The colour for the navi was also changed when they appear in different sites.

fig 8.1 - 1st attempt for dropdown navi

fig 8.1 - 2nd attempt for dropdown navi

fig 8.1 - dropdown navi changes in diff sites

Then for the other sites like shop latest items, shoes and bags. I wanted to make them like a gallery just only display items in picture but then the price and details of items will be shown only when you clicked into the image. So basically, these 3 pages layouts are quite similar.

2nd site (Shop New Arrival):

3rd site (Shop Bags):
https://limyixvan-finalprojectsite3.netlify.app


Submissions:
Labels:

Comments

Post a Comment

Popular Posts