Interactive Design - Exercise 2: Web Replication

Task: Replicate TWO (2) existing main pages of the websites that you have analyzed in Exercise 1 to gain a better understanding of their structure. Follow the dimensions of the existing website, including the width and height.

This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator and gain insights into web design best practices.

~~~

Of the five websites from my Exercise 1, I decided to replicate the Sound Ethics and Braille Institute's main pages.

The resources I'll use for this exercise are:

Pexels : for photos
SVG Repo : for icons and symbols
WhatFont (Google Extension) : to identify what fonts were used on the site

▲ back to top ▲

2.1 Sound Ethics

Fig 2.1.1 Adjusting kern and leading.

The main thing I did with the text was adjusting the kerning and leading since by defaults some of the text I'd written were slightly spaced out.

Fig 2.1.2 Experimenting with Image Trace.

I experimented with the Image Trace feature in Illustrator and tried it out on the Sound Ethics' logo. It was slightly rough around the edges but i fixed it by adjusting some points.

Fig 2.1.3 Inspecting to find the original graphic/svg.

Since there were some very specific elements on the site that would be harder for me to replicate 1:1, I decided to play a bit smart and inspect the site to find the source of the graphics and copy and paste them into my Illustrator file.

Fig 2.1.4 Laying out graphics for use.

Fig 2.1.4 Adjusting the grayscale for an image.

There was a specific image in the site that required a black and white image but the image I'd chosen was colored to I went ahead and edited its grayscale to match with the original image.

Fig 2.1.5 Outline mode of a section of the replication.

▲ back to top ▲

2.2 Braille Institute

For the Braille Institute, I essentially applied the same techniques as what I'd done with Sound Ethics. But there were still some things that differed.

Fig 2.2.1 Custom underlines.

The normal underlines for Illustrator were a bit to thin so I went ahead and did all the underlines myself. Which was a very tedious process but I just wanted the satisfaction of having all the underlines match with the original.

Fig 2.2.2 Laying out graphics for future use/reference.

Because the main page had recurring elements like the boxes and buttons, I figured I'd just replicate one version them first and set them aside so that I could move them around as I worked down the page to copy-and-paste easily. Additionally I also colour picked the pallete of the site so I could easily eye-drop colours for the elements. Overall this was just for convience if anything.

Fig 2.2.3 Outline mode of a section of the replication.

~~~

Fig 2.2.4 Final Amount of Layers (both replications).

Overall, Sound Ethics took about 7 layers with the 7 different sections (Header, Body (1-5) and Footer) while Braille Institute took 11 layers with the 11 different sections (Header, Body (1-9) and Footer).

▲ back to top ▲

3. FINAL

Fig 3.1 Final Web Replication (Sound Ethics)

Fig 3.2 Final Web Replication (Braille Institute)

View or download the files here:

https://drive.google.com/drive/folders/1F48-A35UJ927He-ctfv8huxIhjc7wEqc?usp=drive_link

(the .ai file is quite heavy because I worked on both replications on the same file)

▲ back to top ▲

4. LECTURES

Week 2

Before the lecture, we learned/were reminded of the 5 steps in the design thinking process which were Empathize, Define, Ideate, Prototype and Testing. The lecture was about "Usability: Designing Products for User Satisfaction" that included learning about:

Consistency

Keeping design elements uniform (buttons, menus, layout etc.); this helps with helping users predict how things will work.

Simplicity

Keeping interfaces simple so users can complete tasks easily and quickly without confusion.

Visibility

Important options or buttons should be easy to see and access at a glance. Hidden elements are usually overlooked/ignored by users.

Feedback

Design should give clear responses when users do something like the changing color of a button when clicked by the user.

Error Prevention

Helping users avoid making mistakes by alerting them via warnings or confirmations.

After that, we had a group activity where we had to create a way-finding system for Taylor's for a visitor or student to use to find their way through the campus. My group's scenario was a future student coming to campus and wanting to enquire enrolling at the International Office.

Fig 3.1 My group's prototype.

Fig 3.2 Ms. Anis being our prototype tester, testing the last group's prototype.

Overall, my group did great but had some tweaks to do like a clearer indication of some of our buttons since Ms. Anis got slightly stuck on a page (Navigation).

Week 3

The lecture was about "Understanding Website Structure" that included learning about the three different key elements of a website:

Header

Found at the top of the page and often includes logo and menu and contact information.

Body

Holds the main content of the page; usually accompanied by text, pictures and or videos. Because of the additional content, the body needs to be well organized for better readability.

Footer

Found at the bottom of the page; often contains other important links or contact info. Depending on the site, the footer would include navigation links as well.

After the lecture, we had a short feedback section for anyone unsure about Exercise 2 and also confirming our Final Project Topic.

▲ back to top ▲

5. REFLECTION

The exercise started off fun especially as I started with the replication of the Sound Ethics main page first since it had more engaging elements that were fun to replicate. Things like my recreation of the mix tape section was an interesting process.

I could almost say the same thing towards the Braille Institute but I started to find things a bit repetitive as the main page was much longer than Sound Ethics'. The elements (mostly just boxes) were also not particularly interesting for me to recreate because of its simplicity of which I know serves as an accessibility feature for the visually impaired because more complex elements could reduce readability for them.

Overall, I enjoyed doing this exercise because it was satisfying to see observe the design and replicating it almost to a tee.

▲ back to top ▲

🐚

Qistina Nuralya Maria Binti Azly (0354180)

Search This Blog

Interactive Design - Exercise 2: Web Replication

Table of contents (Quicklinks)

Comments

Post a Comment