.png)
16.9.2022 - 23.9.2022 (Week 3 - Week 4)
Loh Qiao Yin / 0348923
Interactive Design/ Bachelor of Design in Creative Media / Taylor's University
Project 1
[Prototype Design]
LECTURES
[Completed in Exercise blog]
INSTRUCTIONS
/>
TASK
i. RESEARCH
I had no idea what a wireframe is but turns out to be a fancy name for composition layouts in web pages.
ii. MOODBOARD
Font choice has to ve from Google Fonts. I tried to see different ones that give the feeling of bold and daring, but also have good legibility. I went for Anton.
iii. WIREFRAMES
Created 20 different layouts on Miro.
iv. DEVELOPMENT
Went with the #1 layout and designed it on Adobe Illustrator. I was advised to replace the arrow keys with a proper arrow logo instead of typing it out. Besides, I could work on the alignment of the content.
v. FINAL PRESENTATION DECK
A vibrant colour was used to distinguish the two call-to-action buttons from each other.
i. RESEARCH
I had no idea what a wireframe is but turns out to be a fancy name for composition layouts in web pages.
Fig 2.1 Image by leeruoshan.com
Fig 2.2 Image by CareerFoundry.com
Fig 2.2 Image by CareerFoundry.com
After that, I tried to do some research on a game and tv series to decide on what fansite I hoped to create. I had Watchdogs, Arcane, and Love Death & Robots in mind but in the end, I went with the last one as I felt like more materials are around for me to reference. I hope to create a new fansite for the TV series but only for Season 3 as the workload is within what I can handle.
Fig 2.3 Love, Death & Robots Season 3, 19 September 2022
ii. MOODBOARD
Font choice has to ve from Google Fonts. I tried to see different ones that give the feeling of bold and daring, but also have good legibility. I went for Anton.
Fig 2.4 Choices of fonts, 23 September 2022
Fig 2.5 Overall planning of website, 23 September 2022
Fig 2.6 Art direction, 23 September 2022
iii. WIREFRAMES
Created 20 different layouts on Miro.
Fig 2.8 Wireframes on Miro board, 23 September 2022
Went with the #1 layout and designed it on Adobe Illustrator. I was advised to replace the arrow keys with a proper arrow logo instead of typing it out. Besides, I could work on the alignment of the content.
Fig 2.9 First attempt of layout design on Adobe Illustrator, 25 September 2022
v. FINAL PRESENTATION DECK
A vibrant colour was used to distinguish the two call-to-action buttons from each other.
Fig 3.0 Final layout design on Adobe Illustrator, 25 September 2022
FEEDBACK
Week 10
Week 4
- Idea #1 is okay. Simple but clear
Week 10
- Hamburger change to navigation bar
- Spacing in first page is too tight (title with call-to-action buttons)
- Use the same colour for all call-to-action buttons (orange)
- Fix alignment in synopsis page (either centre it or move to the top) but make sure the alignment style is the same for all pages
- Use arrow icons for the carousel
- Spacing between "Media" and the buttons too tight
- Idea #1 is okay. Simple but clear
REFLECTION
I cannot believe that my brain squeezed out 20 variations of wireframes on paper. I was more horrified when I had to transfer all of them digitally to Miro. After more than 8 hours I managed to complete everything from paper to digital and I still could not believe that 20 variations were possible to do. I am refraining from complaining because I once had a lecturer who said quantity builds quality and I agree with that, speaking from experience, even if it brings lots of suffering.
I have done a few websites previously but it was using Wix templates and there was no planning of the website as systematic as this one. This project has surely improved my sense of planning in terms of the art direction and website navigation when creating a website landing page.
I have done a few websites previously but it was using Wix templates and there was no planning of the website as systematic as this one. This project has surely improved my sense of planning in terms of the art direction and website navigation when creating a website landing page.
Comments
Post a Comment