♡ This task is a collaboration project with our Brand Corporate Identity module. We are to come out with out brand guidelines for this task
♡ Document size - 1366 x 768px, single document per page, no facing pages
♡ A Brand guideline is different from a corporate identity system, it is much more simpler than Corporate Identity System.
Things to include:
- 1st chapter, profile of our brand (brand positioning etc) - 2nd chapter, everything to do with logo - 3rd chapter, how we apply our brand identity to various applications
PROGRESS ( WEEK 9 - 27/10/2022 ) :
♡ I started by looking at a few references of other company's brand guidelines.
♡ Based on the grid systems above, we were then told to create 2 different layouts using the 2 different grid systems. My final chosen grid system is the 2nd one with 7 columns.
Fig 2.2 Attempt 1
Fig 2.3 Attempt 2
♡ After settling with our prefered grid system, we were then asked to design the coloured version, from first page till the end of first chapter.
Fig 2.4 Attempt 3
Fig 2.5 Attempt 3
♡ After the feedback session, I decided to retry my layout as well as the navigation bar.
♡ During the feedback session, both Ms Lilian and Mr Vinod mentioned about my colours being too pastel so I decided to introduce new colours to my palette.
Fig 2.7 Old colour palette
Fig 2.8 New colour palette
♡ For Visual guidelines, I was advised not to use images from my collaterals. Ms Lilian suggested that I could use my patterns to showcase the 'texture' & 'feel' since it falls under the 'identity' section.
Fig 2.9 Initial collateral image used (1)
Fig 2.10 Initial collateral image used (2)
Fig 2.11 NEW patterns used
Fig 2.12 NEW image used
NAVIGATION BAR PROGRESS:
♡ Personally, I struggled alot with the navigation bar. We were told to try something unique instead of the simple navigation bar. Making the navigation bar into a circle form was a unique idea at first but a few of my classmates started making their navigation bar into a circle form so it became normal too. Below are a few youtube videos I've watched to get familiar with the interactive buttons.
♡ Aside from the simple navigation bar that shows up on the top or side, I decided to try this layout where I fit all of my navigations into 1 box. Mr Vinod mentioned it looks like the navigations from government page so I decided to retry.
Fig 3.1 Navigation bar attempt 1
♡ I decided to make my navigation bar into a heart shape as my brand is called 'Lovebomb' so the heart is derrived from 'love'. I was quite satisfied with this version so I decided to go with it. While trying to link my pages together, only 'home' button and 'visual guidelines' was clickable since all my text are overlapping with each other.
Fig 3.2 Navigation bar attempt 2
♡ I figured I had to create outlines for all of my texts before converting them to buttons. After doing that, all the buttons are clickable since none of the texts are overlapping. I was also advised to change the 'home' button to 'content'.
Fig 3.3 Navigation bar progress (1)
♡ Another issue I had while creating navigations was my buttons not showing up correctly in Google Chrome. It shows up fine in my Indesign file as well as the preview function in Indesign so I'm not sure what went wrong. (Still could not find the solution to this)
Fig 3.4 Navigation bar progress (2)
Navigation walkthrough:
♡ Left right buttons (heart and bomb mascot) on top left of every page, can be brought to next page once pressed. The brand logo is also clickable and it will take users to the next page.
Fig 3.5 left right buttons on first page
♡ Navigation button on top right of every single page, when roll over it changes to light pink and once click it changes to hot pink. If click it will bring user to the destination.
Fig 3.6 navigation button
♡ Headings (01, 02 and 03) are buttons, changes to a purple colour once clicked and hot pink when rolled over, will also bring users to its' specific destination.
Fig 3.7 table of contents, 01, 02, 03 title are clickable
♡ Texts are buttons on these pages shown below, changes to blue colour once clicked and hot pink when rolled over, will also bring users to its' specific destination.
Fig 3.8 about us, all subheadings are clickable
Fig 3.9 visual guidelines, all subheadings are clickable
Fig 3.10 applications, all subheadings are clickable
♡ Texts are buttons on these pages shown below, changes to original colour once clicked and hot pink when rolled over, will also bring users to its' specific destination.
Fig 3.11 stationery, all texts inside the circle are clickable
Fig 3.12 merchandise, all texts inside the circle are clickable
Fig 3.13 communication, all texts inside the circle are clickable
Fig 3.14 environment, all texts inside the circle are clickable
♡ Pop up window (1), click on image the pop up window will appear.
Fig 3.15 pop up window (1)
♡ Pop up window (2), click on 'target audience' the pop up window will appear, and by clicking on the 3 illustrations on the left, the other texts will appear too.
Fig 3.16 pop up window (2)
Fig 3.17 text appearing when clicking on the illustration
♡ Roll over (1), logo will change from black and white to coloured version when rolled over.
Fig 3.18 roll over (1)
♡ Roll over (2), patterns will change colours when rolled over.
Fig 3.19 roll over (2)
Fig 3.20 colour change during roll over
♡ Hyperlink & Pop up window, the instagram icon will change to hot pink when rolled over and back to black when clicked. After clicking on it, it will direct the users to Lovebomb's Instagram profile (workable). Pop up window will appear when clicking on '@lovebomb_co'.
Fig 3.21 hyperlinks & pop up window
FLIPBOOK ERROR:
♡ Initially when I uploaded my interactive pdf on the flipbook website, it was weird how all of my interactive buttons were missing. Then I realised I had to upload a pdf version that is not interactive for everything to show up nicely on the flipbook. Luckily I seperated my layout and navigation files so it was easier for me to export them seperately without having to redo anything.
Fig 3.5 flipbook progress
FINAL TASK 4
♡ For optimal viewing (and for all the buttons to be working), it is best to open the pdf using Google Chrome. Sometimes, some of the elements will dissapear if it's opened with Safari, Preview, etc.
- Remove the bar because it does not align with my brand
- Overall layout information looks fine - I can try to use my wordmark as the ‘bar’ instead to see how it works and my navigation bar can be on the left or right top - I can also try to change my navigation bar on the side instead - Maybe my logo can appear in the center white the other navigation informations can be on the side of the logo - Or I could use my element as a navigation icon and when people hover it the text will appear
Week 12 - 15/11/2022
Lecturer Feedback:
- colours look more contrasting
- for 'vision & mission' page just put the text under the title instead of repeating it in the paragraph.
- instead of using images from my collaterals in the visual applications, I could perhaps introduce patterns there instead to showcase the 'feel & texture' of my brand. It also fit well with the section.
- for brand colour, I can just put the hex code inside the little hearts instead of repeating it.
- I can also include a link to my brand's instagram page on the last page.
- overall looks pretty good to go
REFLECTIONS :
Experience -
I was glad to hear that this task is a combined task with Publishing design and Brand Corporate Identity. It really made our workload much less. I am also glad that the informations needed and included for this task were already done previously so all we had to do is just determine a layout and figure out the navigation bar. Overall, it was quite manageable to carry out this task as this was almost the end of the semester. The only hectic week we had was week 11 where Mr Vinod suddenly wanted us to complete the FULL layout and all navigations all-together. Another stressful part was that we had to come up with a unique navigational system which no matter how much I think about it, I still couldn't come up with one (and that is my problem to fix). Nonetheless, I was quite happy to see how my brand guideline turn out and I'm very satisfied with my own work.
Observations -
I observed that creating a good navigation system is not easy. Linking pages to buttons is also not an easy task as sometimes we might not know what would go wrong. I learnt that it would be the best option if we seperated our layout and navigation files to avoid any issues from happening. We can test if our buttons are working in the navigations file without having to redo anything if it goes wrong.
Findings -
I found that creating a brand guideline may look simple however that is just not the case. It takes many trials and errors to be able to come up with a consistent layout with good flow. I also learnt that to create a brand guideline, you must have a deep understanding on the brand itself. With proper knowledge of the brand, we will be able to reflect it on the guideline itself.
A brand guide is how an organisation (brand or company) presents itself to the world through its logo, font, colour selection, photography and many more. A brand guideline is important as it is how the world recognises your brand and begins to trust your brand.
Key components of a brand identity:
Vision & Mision
Target Audience
Brand Personality
Core Values
The first step to creating a brand guide is to collect brand guide inspiration. Next is to define the 6 essential brand guide elements (brand story, logo, colour pallete, typography, imagery, voice). Moving on is to showcase the other collaterals in your brand (both digitally and printed). Lastly is to determine the structure of our brand guideline.
Comments
Post a Comment