25/11/2024-09/12/2024 (Week 10-Week 12)
Lizzie Tanaka (0362065)
Brand Corporate Identity | BDCM | Taylor's University
Task 4: Brand Guidelines
LECTURE
All lectures are in Task 1-3.
INSTRUCTIONS
For task 4, we are to compile our task 2-3 into one brand guidelines PDF. The
publication will be an interactive PDF.
Process
When starting the brand guideline, I wanted it to be like my task 3 positioning PPT but better. I started by determining the grids and trying out a few
layouts, especially on the first chapter. My first attempt uses 8x8 grids and
I tried several layouts.
Fig 1.1 First attempt draft
During group tutorials, Ms. Lilian said it was okay but maybe I can try to use
9x9 columns and to incorporate imageries to fill up chapter 1.
Week 11
I started off this week by making the logo dont's in Adobe Illustrator and exporting it in 300ppi PNG.
Fig 1.1 Logo dont's
After this, I proceeded to change the grids to 9x9 and started doing the rest
of the layouts. While the 2nd and the 3rd chapter did not have much to explore, I struggled
quite a bit on the first chapter. For the visuals, I sourced them from
Unsplash and mostly Pinterest. I chose pictures of products. I had so much
difficulty finding quality pictures that aligns with what I want in a high
quality. Most of them were low quality and it was blurry when zoomed in. I also attempted to do the buttons based on what Mr. Hijjaz has taught us briefly in Publishing Design class.
Fig 1.2 Week 11: few attempts on visuals
Fig 1.3 Week 11: Chapter 2-3
From the group tutorial, Ms. Lilian said that the layout is good to go for chapter 2-3 but the chapter 1 feels a bit boring. She suggested to change up the pictures to pictures of people laughing or such. Pictures that would communicate how I wanted my brand to feel. She also told me that I already have mockups and product images so it might be better to change things up and use pictures of people. Ms. Lilian also suggested to break off the usual layouts of chapter 1 by incorporating full page of picture and maybe a quote.
During the rest of week 11, I worked on my guideline again. I proceeded to
change the visuals. I had even more difficulty finding the right picture
because I don't want it to feel so corporate but finding pictures in stock
websites gives me corporate-feeling images. Pinterest had a lot but again, the
quality wasn't the best.
I wanted the images to feel friendly, like candid-taken pictures, and not
staged. There were some pages where I hated the image and struggled in
trying to find the right picture. Since I was stuck, I decided to finish up
the buttons first. I wanted my buttons to have a minimal hover effect of
underline. I thought it was subtle but clear for the audience.
.png)
Fig 1.4 Rollover effect
I did the hover by using the multi state feature in InDesign. I added a bookmark for every page then I start by
setting up the desired hover effect in the 'rollover' section. From 'normal,'
I set the action to 'go to next state.' And in the 'click,' I set the action
to 'go to destination' and picked a bookmark. This process was quite simple and quick. On my first attempt and trial on the button, I only wanted to see if the buttons would work so I did it using "go to page" but following Ms. Lilian's tutorial, I changed it to bookmarks.
Fig 1.5 Attempt on Week 11 to Week 12
Week 12
Right before my consultation, I changed up some of the pictures and removed
some as well. I ended up including a picture of some products to balance the
images. My friend saw my layout before and told me that just from the first
chapter, it felt like it's about a group of friends having fun. So I decided
to add pictures of products to not mislead people. Below is the final
imageries I put and showed on my consultation.
Fig 1.6 W12 Consultation
Ms. Lilian approved the overall layout and design but reminded me that I
needed to be more picky with my visuals. She thought that some of the visuals
just don't match well. Such as the first page on the brand story, the USP
(felt too sporty), and the vision and mission can be improved on the visuals.
I had forgotten to put text descriptions on the 3rd chapter and Ms. Lilian
also reminded me to fill the pages with texts.
After the consultation, I continued working on the guideline since the
deadline was near. I worked on improving the visuals first. I started finding
more visuals that may fit my brand. I ended up with these attempts. Figure 1.10 was a replacement of the 7th slide of Figure 1.6.
.png)
Fig 1.7 Layout attempts on USP
Fig 1.8 Brand story new visual
Fig 1.9 Vision Mission new visual
Fig 1.10 Quote page
Moving forward, finalizing the document, I worked on the buttons on the table
of contents, following the same hover effects. I had to retype one by one
since the previous version was in the same text box. I made sure to give more
space for the underline so that it won't feel too crammed when the texts are
hovered.
I also decided to make the buttons in bold on sections that the users are in.
I thought of changing colors and all but the different colors would make it
more complex. Changing the buttons to bold creates a subtle difference. This,
unfortunately, meant I had to copy and paste the buttons once again. Moreover,
I had started with 'go to page number' and when I was exporting, InDesign
would not make this action interactive. I had to go back again to change the
action to 'go to destination.'
Finally, to really finalize this document, I checked on the interactivity of
each button, the hover effects, and the usability of it. Below is the published PDF at the time. I felt like it was done but I still had to show Mr. Hijjaz my progress to get feedbacks.
Fig 1.10 W12 Progress
Week 12 - Publishing Design Feedback
On week 12, I showed my final guideline to Mr. Hijjaz in publishing design
class and got a few feedbacks. I was advised to change the serif font to a
sans serif font. The serif font is not recommended for screen and Mr. Hijjaz
suggested I give another section in the typeface section for screen and print
medias.
For the font, there were a few trials. I had wanted a sans serif with a bit of
character to it, something not too plain. Initially, I had gone with Neue Haas
Grotesk but I thought it felt too boring. I ended up trying two more typefaces: Synonym and Excon. I liked Synonym more as I felt like it matched the fancy serif better than Excon.
Fig 1.11 Font choices
(L to R: Neue Haas Grotesk, Synonym, Excon)
After I finalized all the typeface, I made another slide to differentiate print and screen typefaces. I was reluctant to change the font but I rethought that decision because I wanted my slide to be as functional and as readable as possible. I consulted Ms. Lilian through chat to ensure if this was allowed, to which she agreed.
Fig 1.12 Screen typeface slide
Fig 1.13 Print typeface slide
He also noticed a problem with the buttons in chapter 2 and 3, where the left
area of each text/button would not hover. Users would have to hover around the
text instead. The problem ended up being solved with me re-doing the buttons
from scratch.
Fig 1.14 Hover issue (no rollover effect on the first word)
Fig 1.15 Hover issue solved (rollover effect is seen on all words)
Mr Hijjaz also suggested I make the entire cover page as a button so when
users click it, they are immediately redirected to the table of contents page.
Another issue I had was when I clicked on the USP button, it would glitch
between the USP page and the brand profile cover page. It ended up being the
fact that the USP button overlapped with the brand profile button area in the
USP page. So it immediately clicked to the brand profile page. I adjusted the
textbox and the problem was solved.
Finalizing the PDF, I made the logo on the back cover page to be navigable to
redirect users back to the cover page. I also decided to compress the mockup
images since they were so large in size (20mb+) and was making the pdf load
slower.
Final Submission
Fig 2.1 Final PDF (Interactive)
Click below for the e-brand guideline:
FEEDBACKS
Week 10
Try to use 9x9 grid
Use of pictures is recommended for chapter 1. Use visuals thatyou want your brand to feel like.
Add a logo in the cover page
Do complete the entire guideline by next week
WEEK 11
The layout in chapter 1 feels a bit boring. Maybe instead of using product images, try using people laughing or smiling, pick pictures that represent how your brand wants to be perceived and feel like.
Try adding a full page of just an image with a quote to break the repetitiveness.
Try changing up a bit of layout as well (chapter 1)
Add a bit of body text to chapter 3 and a bit of the chapter 2
Good use of typography
WEEK 12
Overall already good in terms of layout, however be more picky with the visuals
Visuals to fix: vision and mission (a bit too corporate), USP (feels more sporty)
Maybe the cropping in the vision and mission picture can befixed. Try removing one picture and working with only 2 pictures instead
Finish up the rest of the table of contents button. So far, the buttons are good to go.
Add body copy to chapter 3
Good that some layouts have full bleed images to break up the repetitiveness.
(PD) Change font to sans serif, add a section in brand typeface to differentiate typeface for screen and print media
(PD) Fix the hover effects on the buttons on content page
(PD) Layout and color is good to go
REFLECTIONS:
Experience:
Throughout the 3 weeks of this project, I was surprised at how
simpler it had been compared to my expectations. The difficult part
was definitely starting out with a layout that looks good, feels
right, and readable. After more pages were done with the layout, it
felt easier to continue. On my own experience, I felt like I tend to
be too rigid in the layout and less flexible, making my layout feel
bland and flat. Moreover, I have never struggled so hard just
finding pictures.
Overall, I definitely learned a lot in terms of layout design and
using InDesign since I don't use it that much. This project will be
a great help for me in future projects.
Observations:
I think the one thing I observed most from group tutorials is that
we have to really be mindful of our typography. I felt like
typography is something that we often neglect, especially in the
smallest things like paragraph alignments, consistent type sizes,
and more. I also observed that I myself tend to be too rigid in
setting my layouts that it felt boring and flat despite my brand
being 'fun' and 'bold.'
Findings:
When I first arranged the layouts, I thought that each page should
be as similar as possible. But through group tutorials and
individual consultations, I find that it's okay to break that
rigidness and be more flexible and creative with the layouts to
ensure that it isn't too repetitive. I found that consistency does
not equal to repetitiveness. Being more creative and breaking up
that repetition is what makes the design more interesting and
engaging to the readers.
Comments
Post a Comment