Interactive Design- Project 1
13/09/2022 - 27/09/2022 (Week 3-Week 5)
Yong Kai Yi (0352826)
Interactive DesignProject 1- Prototype Design
INSTRUCTIONS
fig xx: module information booklet
Week 3 - 5(13/09/2022 - 27/09/2022)
Mood board:
fig xx: mood board
Font choice (from Google font):
fig xx: font choice from Google Font
fig xx: font choice from Google Font
fig xx: font choice from Google Font
fig xx: font choice from Google Font
fig xx: font choice from Google Font
fig xx: font choice from Google Font
fig xx: font choice from Google Font
Drafts:
fig xx: wireframe
fig xx: wireframe
fig xx: wireframe
fig xx: wireframe
At first, I did my wireframe using Procreate by hand drawn, during class, Mr. Shamsul suggest us using Miro Board to do so, so I tried using Miro Board to do the following wireframe.
fig xx: picture edits in PS
fig xx: picture edits in PS
At first, I was planning to use product pictures from my friend's shop Instagram account, but the pictures' resolution is low and doesn't quite fit the color theme of the website.
Hence, I tried using PS to remove the background and manually edit the colors and adjustments.
fig xx: experimenting
But the method does not work well, so I just use some pictures from online. For the background of the 1st section, I lowered the contrast and brightness.
fig xx: adding icons
The icons are mostly from the Miro Board, I chose a simpler and one-colored symbol for the social media logo
fig xx: 1st attempt outcome in jpeg
2nd attempt progressions:
fig xx: adding margins
fig xx: adding margins
fig xx: adding columns
2nd attempt outcome:
fig xx: 2nd attempt outcome in jpeg
Final outcome:
fig xx: final attempt (1st version) outcome in jpeg
fig xx: final attempt (2nd version) outcome in jpeg
3rd attempt progressions:
fig xx: change the radius of the rounded edge
Final outcome:
fig xx: final outcome
Progressions after feedback:
fig xx: duplicate artboard
As per feedback, the "About Us" section might be a little empty, and after doing research, this section mostly appears at the top part, hence I decided to move this section to the top of the "Pastries" section.
fig xx: Alignment
Final final outcome:
fig xx: final final outcome
FEEDBACKS
Week 9 (25/10/2022)
(comparison, what we learned from ex3)
The font size is the problem, too big.
The 1st-page call to action button (about us) is not the best option, maybe can change it to "visit shop".
For the header, the logo needs to align with the navigation.
For "pastries" try to avoid the rounded edges, and use sharp edges to look more exclusive, and reduce the spacing in between (for the images).
Week 5 (27/09/2022)
1st attempt: Place the logo on the top also, the margin needs more space, and the navigation is too tight with the border. Need a call to action button on the home page too. The title no needs the shadow just leave the darker ones. One carousel is enough so the order guide just changes to plain text with a call to action button. The "visit our shop" button needs to have more space, and the word is too big (not too lengthy, visit shop will be fine). The social media panel in the middle is not necessary, as the footer already has. The "About us" section is fine but needs to add more space at the bottom. Margin is the key, the 4 sides of the margin should be consistent in every section.
2nd attempt: 1st page put call to action either <read me>, <pastries >. The "Pastries" & "Order guide" sections no need a carousel, for the "Pastries" section can put "featured" on the left and others on the right.
Week 4 (20/09/2022)
Keep it simple, don't make it too complicated, the importance of a website is easy to understand and navigate.
REFLECTIONS
It was a real challenge for me to create a landing page design as I have weak layout and composition skills, but I still learned a lot, especially after the exercise of replicating the recommended websites from the lecturer. The whole landing page design planning and sketch take a long time for me to come up with an idea. I tried to keep it simple and clean as for the upcoming project we need to code it out hence I need design within my capability in coding.
Comments
Post a Comment