INTERACTIVE DESIGN - EXERCISE 2
28/04/2025 - 05/04/2025 ( Week 2 )
Bachelor of Design in Creative Media
Interactive Design
Exercise 2 : Replicate Websites
Table of Content
1. Lectures
2. Instruction
3. Exercise
4. Feedback
5. Reflection
1. Lectures
Week 2 (28/04/2025)
Design thinking
- Observe
- Ideation
- Prototype
- Test
Usability : Designing Products for User Satisfaction
Usability refers to how effectively, efficiently, and
successfully a particular user can utilise a product or design in
a certain situation. In brief, design usability depends on how well its features
accommodate users needs.
To know how well the usability is, users should be able to find their
way about easily enough to achieve objectives without relying on
expert object.
Principle of Usability
1. Consistency
key factor in web design both visual and function. It includes
consistent navigation, page layout, fonts and etc.
2. Simplicity
It doesn't mean a simple layout, it means simple to use for users.
Simplicity helps design better user interfaces by helping the users
achieve their goals faster and more efficiently, all while enjoying a great user experience. In brief, it's
not only the design but the use simplicity.
3. Visibility
the more visible an elements is, the more likely users will know
about them and how to use them.
4. Feedback
communicates the result of any interaction, making it both visible
and understandable. Its job is to give user a signal that they (or the
product) have succeeded or failed at performing a task.
5. Error Prevention
alerting a user when they're making an error, to make it easy for
them to do something without making a mistake.
Common Usability pitfalls and How to avoid them
- Complex interfaces
- Confusing navigation
- Poor feedback
- Inadequate error handling
2. Instruction
Document 1.1: Module Information Booklet for Interactive Design.
3. Exercise
Exercise 2 : Web replication
Replicate two existing main page of the websites we've already analyzed
in exercise 1 to gain a better understanding of their
structure. Follow the dimensions of the existing website, including the width
and height.
Chosen Website :
backup :
https://estrelaurbanidade.com.br/
3.1 Website Replication for Pretty Patty
Fig 3.1.1: Website layout of Pretty Patty, Week 2 (29/04/2025).
I chose this website because I like the design, it is simple yet easy to
understand. Even though it is quite simple to replicate but I can learn a
lot from this website, especially the structure they have.
Process work
First, I export the homepage screenshot to Illustrator and try to match the
background color. After that, I search for a similar typefaces that they
use. I find one that is similar, which is "Paytone one" in google
font and downloaded it.
Fig 3.1.2: Typefaces exploration, Week 2 (29/04/2025).
Fig 3.1.3: Typefaces process #1, Week 2 (29/04/2025).
After I type out the font, I noticed there are some slight differences.
Then, I made some changes using path tool.
Fig 3.1.4: Typefaces process #2, Week 2 (29/04/2025).
I repeated the same step for all the text on the homepage. I then started
making the "order now" button and the delivery logo.
Fig 3.1.5: Delivery logo, Week 2 (29/04/2025).
Fig 3.1.6: Typefaces Process #3, Week 2 (29/04/2025).
After finishing the all the text, I continue to search for a similar
picture for the homepage.
Fig 3.1.7: Image found, Week 2 (29/04/2025).
I use the same font for the rest of the page but some of the content I use "myriad pro". For the picture I mainly use it from their instagram page, and some of it on the article that tells about pretty patty. Some of their element I found it on google.
Final outcome
Typeface used : Paytone One
Fig 3.1.8: Side-by-side comparison (Left : original, Right : Replicate),
Week 2 (29/04/2025).
Fig 3.1.9: Pretty Patty Replicate (JPG), Week 2 (29/04/2025).
3.2 Website Replication for Aristo
Fig 3.2.1: Website layout of Aristo, Week 2 (29/04/2025).
I decided to search for another website to replicate, aside from the one I
chose for the website analysis. I chose this website because its
homepage is really interesting—it uses different elements that are
repeatedly shown. Even though it's simple, it captivates users and makes
them want to learn more about this website.
Process Work
After I exported the homepage screenshot to Illustrator, I search for
similar typefaces in google font and find "Montserrat Alternates" for
the logo font.
Fig 3.2.2: Typefaces Exploration #1, Week 2 (30/04/2025).
After I downloaded the font, I export it to Illustrator. Because the font is
similar, there's some slight differences, so I edit it using the same step
like "Pretty patty" logo.
Fig 3.2.3: Typefaces process #1, Week 2 (30/04/2025).
Fig 3.2.4: Typefaces process #2, Week 2 (30/04/2025).
After finishing the logo, I began to search for another similar font for the
rest of the content inside. I noticed the menu bar and the text in the
center of the homepage font is different with the logo.
I search the font for the menu bar and I find "Syne", it is similar
but needs some editing.
Fig 3.2.5: Typefaces exploration #2, Week 2 (30/04/2025).
Fig 3.2.6: Typefaces process #3, Week 2 (30/04/2025).
If you look at figure 3.2.6, the original font (the 'brand' text) is
slightly longer, so I edit it and make it shorter (the 'contact' and
'catalog' text).
Fig 3.2.7: Typefaces process #4, Week 2 (30/04/2025).
I use "Acumin Variable Concept light" for the language button.
Fig 3.2.8: Typefaces process #5 (Top: before, Bottom: after), Week 2 (30/04/2025).
I noticed the first attempt that I made is more bold than the original, so
I made it more thin.
Fig 3.2.9: Image process, Week 2 (01/04/2025).
(Image Source:
Ksenia Chernaya).
For the image in the middle, I download it in pexel and export it to
photoshop to remove the background and add negative filter. I use clipping
mask to make the image appear see through for the text.
For the rest of the page, I use the same fonts and apply the same step as well as the logo. I search all the picture in pexel for the kitchen picture.
Final Outcome
Typeface used : Monserrat Alternates & Syne
Fig 3.2.10: Side-by-side comparison (Left : original, Right : Replicate),
Week 2 (01/05/2025).
Fig 3.2.11: Aristo Replicate (JPG), Week 2 (01/05/2025).
4. Feedback
General Feedback : Mr. Shamsul gave us a feedback for designer, a designer should be able to have a design thinking. That is the first thing we should learn, with design thinking we can create a design that met the user satisfaction. Designer needs to learn how to take feedback, so we can work better and we can handle all the errors that we might encounter in the future.
5. Reflection
This task helped me learn a lot about website structure. Some websites might not follow the usual standards, but they have their own unique style that makes people want to explore more. Regardless of the design layout, as long as users can use it comfortably, it is okay to create a unique and different design.
Comments
Post a Comment