Chuah Kwai Pin / 0348376
Publishing Design / Bachelor of Design (Hons) in Creative Media / Taylor's
University
Task 3(A): Book
LECTURES
Task 3(A): Book
LECTURES
All lectures have been completed in Task 1: Exercises
INSTRUCTIONS
This task coincides with Task 4: Brand Guidelines
TASKS
1) Visual References
I started off by looking for some brand guideline references and looked at
the overall visual style that would suit my brand.
|
|
Fig. 1.1 Reference Board |
2) Margins and Layouts
To begin with my layout, I first started off with adjusting my margins and
then tried a few layouts with different number of columns.
|
|
|
Fig. 2.2 Margin and Columns Template
Fig. 2.3 Margin and Columns with text layout
3) Visuals and design
I also looked for some suitable visuals on Pinterest that would
complement the brand well. This is so that the brand image can be
communicated through appropriate visuals and it gives off the right
impression that the brand wants to convey.
|
|
Fig. 3.1 Visuals for Brand Guidelines |
4) Layout Attempts with Navigation
For my first trial with the navigation, I went with something
straightforward and used blocks of rectangles as buttons. However, I
realised that it doesn't really suit my brand as it looks too solid and
rigid.
Fig. 3.2 First Layout with Navigation
I then changed my navigation in the following week, with petals as
the buttons as it relates more to my brand's concept. Although I
like it a lot better than the previous one, I also experimented with
a few more to see if other arrangements could work better.
Fig. 3.3 Navigation Design Variations
Fig. 3.4 Second Layout with Navigation
After showing this and consulting with my lecturer, I had to make
some adjustments to my layout, and focus on having consistent line
lengths. We also figured that the navigation system is still too
busy, and it has to be toned down so that it is subtle. A navigation
system should not stand out too much as it should only be looked at
when you need it. With that being said, I tried removing the petals
to see if it would make any difference.
|
| Fig. 3.5 New Navigation Attempt, Week 7 (13/10/2023) |
Although it does look less obvious, I was advised not to keep the
navigation at the side because if there is an additional button with
a long label in the future, there will be no space to add it in.
Taking that into consideration, I changed my navigation system
entirely and swapped it down.
|
| Fig. 3.6 New Navigation Attempt 2 - pg 1, Week 8 (20/10/2023) |
|
| Fig. 3.7 New Navigation Attempt 2 - pg 2, Week 8 (20/10/2023) |
The navigation now looks a lot more subtle and there is more space for additions in the future. However, I notice that there is awkward space between the navigation and my title pages. To improve that, I tried to make my navigation even smaller so that it only fits half of the document. I was also told to improve on the cover page, so I tried to redo it and make it look more aesthetically pleasing. As for the heading, sub-heading and body text, I was advised to have a clearer hierarchy so that it directs the reader to read more smoothly.
|
| Fig. 3.8 Final Navigation Attempt 3 - pg 1, Week 9 (27/10/2023) |
|
| Fig. 3.9 Final Navigation Attempt 3 - pg 2, Week 9 (27/10/2023) |
|
| Fig. 3.10 Final Navigation Attempt 3 - pg 3, Week 9 (27/10/2023) |
Once I was done improving my layout and navigation, I was then told
to look into the interactivity of my brand guidelines, especially
for my application images. To improve on that, I lower the opacity
of the images, and when the mouse rolls over, it will have 100%
opacity and zoom in.
 |
| Fig. 3.11 Interactivity for images - Before Roll Over, Week 11 (10/11/2023) |
 |
| Fig. 3.12 Interactivity for images - After Roll Over, Week 11 (10/11/2023) |
Interactive Buttons
While working on the buttons, I added some rollover effects where the colour for the text changes. All of the buttons in contents page, navigation and section pages have the rollover effect.
 |
| Fig. 4.1 Rollover effect on buttons - GIF, Week 12 (17/11/2023) |
 |
| Fig. 4.2 Rollover effect on buttons + Navigation - GIF, Week 12 (17/11/2023) |
Not only that, I have also added next and back page buttons which are located at the bottom right of the pages. The shape of the buttons resemble flower petals, taken from my brand logo which relates to the business.
 |
| Fig. 4.3 Next and Back Page Buttons - GIF, Week 12 (17/11/2023) |
To showcase my applications in a more fun and interactive manner, I also added some mouse rollover effect where the images will zoom in and appear in 100% opacity.
 |
| Fig. 4.4 Applications Animation - GIF, Week 12 (17/11/2023) |
FINAL OUTCOME
Complete Thumbnail Layouts
|
||||
|
|
|
|
| Fig. 4.4 Petuliar Brand Guidelines_Thumbnails - PDF |
Final Brand Guidelines - Interactive PDF
| Fig. 4.5 Petuliar Brand Guidelines_Interactive - PDF |
Final Brand Guidelines - JPEG
 | |
|
FEEDBACK
Week 7
For Task 3B Brand Guidelines, have to rework on the navigation and also make sure that the line length is consistent.
Week 9
Improve the navigation, try to squeeze into half a page so that it does not disrupt the side panel. Change the Headings so that there is H1, H2 and H3. Try a few ways to make the cover look nicer, as right now it just looks like the picture was slapped in.
Week 11
Overall, the layout looks fine. For the website, remove one of the mockups and include the site. For the application images, make them interactive when hovered over. Change the size of the heading for type specimen to H2.
REFLECTION
Experience
While revisiting this task that I have done previously in Sem 3, I realised that there were so much improvements to be made. After sitting through weeks of class learning how to do a good book layout, I put my knowledge into good use for this brand guidelines and reworked on the layout. Overall, the task was not that challenging. I was glad that I got the chance to rework on my navigations because what I had previously was not that great. I also added more interactive buttons to my new brand guidelines which makes it more fun and engaging.
Observation
I observe that a navigation should not be too complex and 'in your face' as they are only there to guide you when you need it. In the previous semester, I have been focusing on making the navigation look neat but also noticeable at a glance. However, after exploring a few navigation layouts, I still think the simple and subtle one works best as it does not drown out the overal layout and visuals of the brand guidelines.
Findings
I find that having interactivity for the images also makes the brand guidelines more engaging and fun. Previously, my layout and images felt very stiff and too serious. However, after I made the improvement, I notice that my brand guidelines look more alive and the images are growing (literally in size) which reminds me of the flowers in my brand.
FURTHER READING
 |
| Fig. 5.1 Examples of Brand Guidelines https://www.oberlo.com/blog/brand-guidelines |
To further understand and look for good references, I went onto this website to read more about brand guidelines.
Common things included in brand guidelines:
- Colour palette
- Logo and logo guidelines
- Typography
- Illustrations and other imagery
- Brand voice / personality
How to come up with a good brand guideline?
- Come up with an impressive brand story
- Define your brand voice
- Include brand logo and colour palette
- Choose the visuals and imagery that reflect your brand image
Comments
Post a Comment