29.08.2022 - 01.10.2022 / Week 1- 5
Yung Siew Weng / 0339847
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 1 / Landing Page Design
Yung Siew Weng / 0339847
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 1 / Landing Page Design
Project 1 : Landing Page Design
MODULE INFORMATION
INSTRUCTION
For project 1, we are to design a static landing page with the purpose of promoting a business/service or product. Landing Page is a distinct page on website that's build for one single conversion objective. A landing page should be designed, written and developed with one business goal in mind.
EXPLORATION
At the very first (week 3), we are instructed to think of a topic/title to create or redesign.
#ATTEMPT 1
Chosen Theme : Bag and backpacks
Chosen Brand : Gaston Luga
Introduction of the brand : Gaston Luga was created with a vision to carry your life in effortless style: a vision we are continuously striving to achieve. Founded in Stockholm, we are a producer of quality backpacks and accessories inspired by Scandinavian design and living.
Fig 1.1 Gaston Luga (week 3/ 18.09.2022)
The reason of choosing Gaston Luga as my option to redesign [my perspective] :
I enjoy how GL uses its own distinctive typeface to express its own flair in its branding. Simple and straightforward, however I believe the website could be more appealing. For instance, the website might include some Carousel to make the website more lively and even balance the negative space.
After having a chosen topic, and gain some idea expression, I started to develop on the wireframe / sketches [minimum 20 layouts for reference]. I used Procreate as the tool for the wireframe sketching. (but I sketched 18 layouts)
Fig 1.2 wireframe sketch (week 4/ 19.09.2022)
And, I even digitalise 10 layouts in Adobe Illustrator :
Fig 1.3 Digitalised Layouts (week 4/ 19.09.2022)
Feedback - Week 4/ 20.09.2022 @ Wireframe Layout
General Feedback : Good overall, however the requirement calls for 20 different layouts, so you'll need to create at least two more.
Specific Feedback : In terms of the chosen theme, Gaston Luga, the website is already great; instead of making it worse, what you should do is redesign a website with a truly poor user experience, which can create a significant improvement after the redesign. I recommend that you replace it with a "better" brands.
After receiving Mr. Shamsul's feedback, I felt very lost, maybe I misunderstood what MIB was trying to convey. But thanks to Ms. Siti for some advice, she suggested that I could make a portfolio of my own, maybe it would be easier. After listening to her suggestion, I suddenly thought that my own portfolio would also be an extremely simple way, because there is no need to discuss the design direction and experience with the other party. The pattern of the entire site works as random as I like it. So, I re-construct the 20 layouts design and the chosen theme.
#ATTEMPT 2 [Final]
Chosen Theme : Portfolio Website
Chosen Brand : Jacqesign
Introduction of the Brand : Jacqesign [ Jacqueline + design], an instagram account, was created on a vision to randomly save artworks for future portfolio purpose.
Rationale of choosing : The rationale for creating a new portfolio website is to increase benefits for myself. My self-branding site, Jacqesign, is where I save my art and portfolio. By having this task, I am utilising part of my time to design something that suits me. A phrases goes, before you cheer on others, cheer on yourself; this implies that if I don't adore my own website prototype, others might not browse it, or even can’t make a satisfy website for my future client. Therefore, taking self as a template is a great guarantee for the current status.
Research for mood-board :
Fig 1.4 Research outcome (week 4/ 20.09.2022)
Based on the research, and my idea in moodboard, I re-constructed the format for the new chosen theme. For this time, I directly using Adobe Illustrator to create the full 20 layouts.
Fig 1.5 Digitalised Layouts (week 4/ 20.09.2022)
After complete the full digitalised of layouts, I get some feedbacks from Mr. Shamsul, checking whether which is the best or which should I go further with.
Feedback - Week 4/ 20.09.2022 @ Wireframe Layout
General Feedback : Within the 20 layouts, I like the #5, #10, #15.
Specific Feedback :
1. Usually, the brand's logo will be placed in the upper right corner.
2. For the display column on the landing page, 3 is enough to make it consistent across the white space.
3. For the right arrow [slide for more], there should be left and right arrows.
4. This is your own/personal portfolio, so use "me" instead of "our".
5. For CTA buttons, it might be more appealing to use "hire me"
Fig 1.6 Layout that recommend by Mr. Shamsul (week 4/ 20.09.2022)
After having the feedback again from Mr. Shamsul, I gained some directions on how should I go. Throughout the 3 layouts (figure 1.6), I felt that I might like the feeling of the #3 (right) but somewhat having the concepts on #2 (corner). So, I mix and match the two concept layouts and develop a new layout.
Fig 1.7 reconstruction on layout (week 4/ 21.09.2022)
After the reconstruction, I eager to figure on the colour schemas that suited my sites. I used the colour range that i particular used to create. The colour tone that given was soft, pastel, gentle. [But, the colour are not been satisfied by myself yet, just a look-though].
Fig 1.8 progression, testing outcome (week 4/ 21.09.2022)
Following by the selected fonts, we are required to used only Google Fonts for the exploration. I spent some times on searching over and over and I finalise some fonts (left in Fig 1.9) that might suitable for my sites. After trying all the fonts, I decided to take Athiti Medium / Varta Regular / Baloo Thambi 2 Medium (testing on right, Fig 1.9) as my main fonts in the sites.
Fig 1.9 fonts selection (week 4/ 21.09.2022)
Continued to the next step, I placed the fonts to the layouts and even changed some style on the navigation, about me section and the colour schemas. For the current status, the #3 (Fig 1.10, right) is the selected options.
Fig 1.10 after amendments and inserting fonts (week 4/ 21.09.2022)
After having the "latest" idea of layouts, I started to search images for the sites. I used the website 'Freepik' as my reference to mock up the artworks. Below (Fig 1.11-1.12) are my idea exploration towards the 'JQ's project' and 'JQ's Collection'. I did mentioned some of the "why and idea of chosen".
Fig 1.11 Idea exploration, JQ's collection (week 5/ 24.09.2022)
Fig 1.12 Idea exploration, JQ's Project (week 5 / 24.09.2022)
After the "random" idea exploration, I continued the progress by inserting the information [images, etc] to the layout template. On this moment, I reconstructed the colour schemas and check on whether should I left the border or colour.
Fig 1.13 Outcome, experiment on borders (week 5/ 24.09.2022)
Feedback - Week 5/ 27.09.2022 @ Landing Page Design
General feedback: Overall great, prefer #2.
Specific feedback:
1. Make sure the alignment is consistent.
2. The carousel image is not suitable, you can replace it with a more suitable one.
3. Images might be more suitable for the category under 'JQ's service".
4. For the descriptions, change to graphical design, illustration design and Typography might more suitable for your situation.
After the feedbacks session, I continued on developing my final outcome. I did some amendments on the graphical stuff (Fig 1.14 & 1.15) as think the visual might not so contrast and not consistency.
Fig 1.14 Final idea images (week 5/ 29.09.2022)
Fig 1.15 Final Idea, images for 'JQ's service' (week 5/ 29.09.2022)
Last but not least, I finally constructed a satisfied layout outcome with somewhat present a sense of luxury, but in comfortable. I did try on the typeface in which I change all the alphabet to be small letter instead of capital; it creates a sense that the sites are not under oppression.
Fig 1.16 Final Outcome (week 5/ 30.09.2022)
FINAL OUTCOME
Fig 1.17 Final Outcome, JPEG (week 5/ 30.09.2022)
Fig 1.18 Final outcome, PDF (week 5/ 30.09.2022)
The idea of landing pages was documented in the PDF. Feel free to discover my concepts :
Fig 1.19 Final outcome with description, PDF (week 5/ 30.09.2022)
FEEDBACK
Week 4 / 20.09.2022 @ Wireframe Layout
General Feedback : Good overall, however the requirement calls for 20 different layouts, so you'll need to create at least two more.
Specific Feedback : In terms of the chosen theme, Gaston Luga, the website is already great; instead of making it worse, what you should do is redesign a website with a truly poor user experience, which can create a significant improvement after the redesign. I recommend that you replace it with a "better" brands.
Week 4 / 20.09.2022 @ Wireframe Layout
General Feedback : Within the 20 layouts, I like the #5, #10, #15.
Specific Feedback :
1. Usually, the brand's logo will be placed in the upper right corner.
2. For the display column on the landing page, 3 is enough to make it consistent across the white space.
3. For the right arrow [slide for more], there should be left and right arrows.
4. This is your own/personal portfolio, so use "me" instead of "our".
5. For CTA buttons, it might be more appealing to use "hire me"
Week 5 / 27.09.2022 @ Landing Page Design
General feedback: Overall great, prefer #2.
Specific feedback:
1. Make sure the alignment is consistent.
2. The carousel image is not suitable, you can replace it with a more suitable one.
3. Images might be more suitable for the category under 'JQ's service".
4. For the descriptions, change to graphical design, illustration design and Typography might more suitable for your situation.
REFLECTION
EXPERIENCE
Apart from the confusion during week 3 that sent me down the incorrect route, the experience was mostly really enjoyable. Luckily, though, the instructor's comments enabled me to swiftly understand the new title and get back on track.
OBESERVATIONS
What I noticed while doing this project is that the formats used for web page layout are really similar, and each has comparable points, but only in little variables like graphics, fonts, colours, etc. that make him completely distinct. From my black and white version to the colourful version, I can clearly see that various colours elicit distinct emotions and user experiences. And, I did observed that the user experience can be impacted even the small elements such as font size, shape, and colour.
FINDINGS
Throughout the process, I've discovered that I should be more conscientious about time management and not leave things till the last minute as my blog encountered copyright problems during the process, which took over four hours to fix and slowed down the whole thing.
Comments
Post a Comment