INTERACTIVE DESIGN - EXERCISE 2
28.04.25 - 04.05.25 (Week 2)
Michelle (0373843)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Exercise 2: Web Replication
Michelle (0373843)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Exercise 2: Web Replication
TABLE OF CONTENTS
LECTURES
Design thinking process - main concern is user.
- Observe problems & empathize
- Ideate solution (problem solving) - Doesn't need to be huge solutions.
- Prototype
- Test
- Repeat
Usability = The effectiveness of a design/product to be utilized by
user. Part of UX.
High usability = guide user to easily achieve goals. User should be able to
find their way easily to ahieve objective without any expert knowledge.
5 Usability Principles
- Consistency, harmony across different elements, navigation system, layout, and structure. Repetition builds branding.
- Simplicity, minimal steps in the process to achieve goal faster and easier. Dividing into smaller chuncks.
- Visibility, the more obvious, the easier to know and use.
- Feedback, the result of any interaction for confirmation/validation (e.g. suceeded/failed, progress bar, hover effects).
- Error Prevention, alerting/indicating user for error/mistakes (e.g. passwords writting format).
To Avoid
- Complex interface
- Confusing navigation
- Poor feedback
- Inadequate error handling (usually in apps or computer system).
Notes
- User = consumer = viewers.
- Websites are used to engage.
- Websites are build on grids. Different devices have different grids.
- Mental model = Ways of thinking built from personal experiences, learning, and cultural influences.
INSTRUCTIONS
Our second exercise, given on week 2 in class are to replicate the main
landing page of 2 websites using Adobe Illustrator/Photoshop. We are advised
to choose websites with clear structure and no complicated interactive
elements that it is hard to capture.
PROCESS WORK
I begin with selecting the websites to recreate. From the ones I have analyzed
in
my first exercise (Web Analysis), I found one which I thought has a evident structure. It is the
HYPE: Tattoo Studio from
CSSWinner. For the
second website, I explored
Awwwards and decided
on
Purely Elizabeth,
as rest 4 website I chose in exercise 1 doesn't fit my criteria (End Speciesism
has too much illustration & interactive motion;
PBS Kids isn't neatly
presented; Lusion has too
many interactive motion;
Career Pathways is
fully filled with illustrations) making them not ideal to recreate.
HYPE: Tattoo Studio
At first, I screen capture the website by: right click - inspect - DevTools (3
dots) - run command - type capture full size screen.
|
| Figure 1.1 HYPE's Website Screen Capture Process |
|
|
|
After doing so, I got my screen-captured-image. I saved it to my folder and
placed it in Adobe Illustrator. I adjusted the artboard size to the
screen-captured-image.
|
| Figure 1.3 HYPE's AI Set Up |
After I've inserted the screenshot of the website, I began replicating it. Everything goes well until when I started to work on my second website (Purely Elizabeth). My Illustrator file suddenly stopped responding and needs to close. When I opened it again, most of my image turned black and not showing. The images are still there when I checked my layers, But they are not visible. I did not move or edited my images in my files, so I don't know the cause of this error. I tried to move forward and finish my second website, but the problem appears more frequently. So, the images I imported to my second artboard also disappears. This happened on Monday, May 5th after class.
 | |
|
I immediately panicked and felt desperate. I tried restarting my computer and keep reopening the file, but the problem remains. I regretted not immediately exporting the first artboard just to be safe, before moving on working to the second website. So, I needed to redo all my images. Importing them one by one, arranging their layers, cropped them, edited their colors, and masked some of them. However, since I have other modules with deadlines also, I switched my focus to them first, so I did not sacrificed everything for one unfortunate incident which happened. I could only fully start focusing on rescuing this task on Saturday. I've attempted to fix it on Thursday and Friday, but since the file keeps closing on its own every 2 hours, I kept feeling exhausted and given up.
At the end, I make duplicates of my Illustrator file, so when one has problem, I have a copy of it, and didn't lose everything. I exported the artboards every time I make progress, so it doesn't matter if my work for the beginnings disappears. I can just crop the images and put them together.
Here is the link to a drive with my AI file along with the final products and errors. If AI file opened, the layer's arrangement might look messy since I needed to keep importing the same images over and over, and I have no extra energy to completely tidy them all up. In the layers, there might be some non-visible-images left as prove of the error in my AI. I couldn't bother look for them one by one and erasing them all.
Below is the final result of my website replication.
Figure 1.5 HYPE Website Original
Figure 1.6 HYPE Website Replication Final
First things first, I captured the website's home page, as previously for
HYPE. However, since there're parts of the website missing, I manually
screenshot a few page.
|
| Figure 2.1 Purely Elizabeth's Screen Capture Process |
|
|
|
|
|
Figure 2.3 Purely Elizabeth's Screen Captures |
I saved the manually captured images and placed it in AI, adjusting the
artboard accordingly.
|
| Figure 2.4 Purely Elizabeth's AI Set Up |
Figure 2.5 Purely Elizabeth Website Original
Figure 2.6 Purely Elizabeth Website Replication Final
FEEDBACK
- Find websites with good structure to replicate.
- Try to avoid websites with too complicated interactive elements which makes it hard to screen capture.
- If haven't gotten any website, we can try Wemake website.
- Place our process, a image/PDF of the website before and after replication, and also a drive to our AI file.
REFLECTION
Experience
I found this exercise quite tedious, as it requires a lot of attention to details to each elements. :
- Typography (typeface, font, line and letter spacings, size, alignment, color, type case, etc.)
- Imagery (color, effect, size, arrangement, shape, etc.)
I enjoyed the process of recreating how the websites look. I got to notice the minor details on the elements of a website I wouldn't have noticed if I didn't go through this exercise. It taught me patience from the need to spare time and energy to find the right font and images, then typing, placing, and adjusting them accordingly. Especially after the unfortunate event I had, this task expands my ability to be persistent and keep going despite facing unexpected problems with the unpleasure feelings it made me feel.
Observation
I truly experience the power of mindset and critical thinking from facing trouble in doing this exercise. Unpredicted problems will arise without prior notice, and it surely will create unpleasant feelings in our heart. However, I now understand better a saying I've heard before: Life goes on, and nobody really cares about what we go through, they only see our outcome. From acknowledging that, I can slowly move aside my despair and focus on what I can do in the present instead. I am grateful for the trouble which finds me because from it I can learn.
Findings
I need to be more aware of my file size in working with any software in the future. I have to reduce the amount of elements I placed in one file to avoid errors. I will try to always make duplicates, keep saving and exporting my progress as a prevention act.
Comments
Post a Comment