00.00.2023 - 00.00.2023 / WEEK 1
ARWINDA NURUL IZZA / 0349913
INTERACTIVE DESIGN / BDCM
Exercises 1-4
Exercise 1: Web Analysis
Prompt: 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.
Exercise 2: Web Replication
Prompt: Your task is to replicate TWO (2) existing websites given in the link by the lecturer to gain a
better understanding of their structure.
01:
First Website Replication
To start with, after viewing all the five given website I
priorly choose the
Morgan Stanley as one
the website to replicate. Then, I proceed to save the landing page
from the website using technique from figure below
Fig.1.1 Capturing Landing Page
I use Adobe Illustrator as the tool to replicate the given websites.
I make a new canvas with a common dimension then stretch the
artboard vertically to fit the height of the landing page. For this
certain page, I use 'Roboto' as the most familiar font used
in the 'Morgan Stanley' Website,
Some Repetition/Pattern I notice from this particular website after
done
Thick-Thin Line, across the layout they tend to indicate headlines
or selected items with a line in can be horizontally or vertical. I
use 'Line segment tool' to resolve this most of the time.
Fig.1.2 Thick/Thin Lines
The use of sequences Different Typefamily is consistent. Take an
example of the one below The Medium Small(10.26 pt) Type size
category, to bold headline (25 pt), and medium size (12 pt). This
set of layout being repeated continuously inside the website.
Fig.1.3 A sequence layout of Category- headline-body text
Below is how the replicated landing page od the first website look
like before I inserting any images.
Fig.1.4 First Replicated Page with no Image
The images I use for the replicated page is from the free stocks
hence why it's different from the one in the website. But, I still
searching something similar to it so the content still in line.
Fig.1.5 First Replicated Page Image - Folder
Fig.1.6 First Replicated Page Image - Folder
03:
Final, Exercise 2 'Web Replication'
Fig.1.5 First Replicated Website - Exercise 2
Fig.1.5 Second Replicated Website - Exercise 2
Exercise 3:
HTML Profile Picture
Prompt: you will create a personal profile page using HTML. The goal of this
exercise is to help you practice your HTML skills and create a webpage
that showcases your personal interests. Once you have completed your profile page, you can publish it online
using a free hosting service like GitHub Pages or Netlify.
I begin with listing the content on a google docs to prevent any
confusion when entering the html later.
fig. 2.1 Profile Page content on google docs
01:
Applying the HTML
As for the Application I choose Adobe Dreamweaver to code the HTML. I
start but making new document just like the one that instructed in the
video Mr. Shamsul recorded.
fig. 2.2 Creating a new html docs
Then, I manage the file on the folder that I already prepare prior
to including the image folder.
fig. 2.3 Managing the html docs
Starting to code, according to the tutorial given
fig. 2.4 Starting Coding
I encounter a problem where the image that I put is too big hence
why I have to resize it. There was no such tutorial on Mr.shamsul
recorded video which why I went to YouTube and follow one of the
tutorial given. It works out instantly and the image being
resized.The YouTube that helped me: https://youtu.be/dM12ctixdT4
fig. 2.5 Resize solution
fig. 2.6 Final HTML docs
After, I finish putting all the necessary codes, then it's the time
to publish the web. I use netlify in this case.
fig. 2.7 Publishing to Netlify
02: Final, Exercise 3
Click
HERE
to view Arwinda's Profile Page
Exercise 4
Prompt:
Comments
Post a Comment