[ 28/04/25- 05/04525] (Week2- Week3)
[ Ng Jia Xuan / 0375273 ]
[Bachelor of Design (Honours) in Creative Media]
[ Interactive Design ]
[ Exercise 2 ]
A product should fulfill the users need, so observation is important.
Usability:
-How efficiently a user can utilize a product or design
-Letting the users understand the feature & information IMMEDIATELY
Key Principle of Usability:
1. Consistency:
-The layout, navigation bars, structure, font etc should be same through out the website
-Users recognize & learn these pattern
(If the site is lack of consistency, it will be confusing and hard to use.)
2. Simplicity:
-Minimize the number of steps involved in a process
-Clean & obvious interface is easier to use and reduce the probability of making mistake
3. Visibility:
-Visible elements lead the user when they are using the site
-User should know just by looking the interface, what their options are & how to access them
4. Feedback:
-Inform confirmation and giving signal to the user
(Whether they have succeeded or failed at performing a task)
5. Error Prevention:
-Alerting the users when they are making an error, preventing them from making another mistake
Common Usability Pitfalls
-Complex interfaces
-Confusing navigation
-Poor feedback
-Inadequate error handing
3. REPLICATE TASK
3.1.1: Website Layout
 |
Fig 3.1.1: Veggie Taipei Website FULL Layout
|
|
|
3.1.2: Replication Process
 |
Fig 3.1.2: The typeface that I use
|
|
Where do I use it & why I choose this typeface:
1. Kantumruy Pro & Helvetica:
-Every text in the page, including the text on the sticker
(The letter 'I' in both of these typefaces doesn’t have top and
bottom strokes, so I added them myself using the rectangle
tool.)
*Both of them have a similar feature to the original ones, which
is a thin and boxy design.
*Another reason I chose Kantumray Pro is because the feature of
the letter 'G' (its slightly diagonal bottom) is quite
similar.
2. Bodoni Std:
-The {} on one of the sticker
*This typeface gives off a fancy, curvy vibe, which is similar
to the one used on the site.
3. 蘋方-繁:
-The only Mandarin word in the sticker
*I think this is the exact typeface used on the site, it looks
sooooo similar.
 |
Fig 3.1.3: Some text making progress [Original (White) & Replication (Black)]
*The original is below the remake ones, so it just show a bit of outline
|
|
|
|
Fig 3.1.4: Replicating the sticker in Illustrator |
 |
Fig 3.1.5: Some progression in Photoshop
|
|
 |
Fig 3.1.6: More progression in Photoshop
|
|
The image I use in my work:
*The source:
 |
| Fig 3.1.7: Final progression in Illustrator |
|
3.1.3: Final Outcaome
*My JPEG was to big, it might be hard to load, so I put a screenshot and pdf down here:
 |
Fig 3.1.9: Final Outcome (Screenshot Ver)
*Press the pop-out (The arrow box in the top right to see the PDF)
|
|
|
Fig 3.1.10: Final Outcome (PDF Ver)
3.2.1: Website Layout
 |
| Fig 3.2.1: Nick Blanchard Portfolio Website FULL Layout |
|
3.2.2: Replication Process
TITLE & TEXT:
 |
| Fig 3.2.2: The typeface that I use |
Where do I use it & why I choose this typeface:
-Every text in this page
*I was looking for something bold and rounded-boxy. In the end, I found this typeface, which I think is the exact one used by the author. When I adjusted the size, it covered the original text and fit perfectly.
 |
| Fig 3.2.3: Some text working progress, Replication (left) & Original (right) |
|
 |
Fig 3.2.4: More text working progress, Replication (blue) & Original (black)
|
|
|
 |
Fig 3.2.5: Icon working progress, Replication (left) & Original (right)
|
|
|
I remake the icon in Illustrator with pen tool & ellipse
tool.
 |
Fig 3.2.6: Final progression in Illustrator
|
|
|
3.2.3: Final Outcaome
4. FEEDBACK
After consultation for the blog:
Apparently, I miss some portion (Not some tho TT), need to do it tonight.
5. REFLECTION
This task it's quite fun, we get the chance to recreate the design after analyzing (from previous task). The hardest part for me might be finding the elements for VEGGIE TAIPEI background, I have to find the image with the same angle, but I couldn’t find the right angle for the drink’s shadow.
So, I found a similar shaped shadow with the correct angle and
combined them in Photoshop
After this task I am more familiar with the placement of button in web design. They often put them at the heading, and the position is quite similar too.
*Update: I miss out some part so I am rushing to do it TT. Make sure to ask lecturer if I have any problem!!! Some content isn't really that good (because I was rushing to finish it), my apologies.
Comments
Post a Comment