How To Successfully DIY Your Pet Brand Part 2: Hierarchy & White Space
[et_pb_section fb_built="1" fullwidth="on" _builder_version="3.22.3"][et_pb_fullwidth_header title="How To Successfully DIY Your Pet Brand Part 2: Hierarchy & White Space" text_orientation="center" _builder_version="3.22.7" title_line_height="1.2em" background_color="#0f7fff" background_image="https://dox.design/wp-content/uploads/2019/05/Blue-Lines.png" background_layout="light" custom_margin="||" custom_padding="5%||5%"][/et_pb_fullwidth_header][/et_pb_section][et_pb_section fb_built="1" _builder_version="3.22.3" custom_padding="0|0px|0|0px|false|false"][et_pb_row _builder_version="3.25" custom_margin="0px||" custom_padding="32px|0px|0|0px|false|false"][et_pb_column type="4_4" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text _builder_version="3.27.4"]
Hierarchy and White Space
Both are topics often overlooked when it comes to building a reputable and cohesive brand. Both are also essential to the organization of your website and other visuals, such as social media graphics, packaging, and print material.
Let’s get to it, shall we?
[In case you missed it, this post is part 2 of Dox Design’s branding series on how to successfully DIY your pet brand! Make sure to read Part 1: Colors & Fonts here first.]
First, let’s define what hierarchy and white space even are:
Hierarchy: As defined by MicroArts, your brand hierarchy, otherwise known as your brand architecture, “defines the different levels within your brand and provides a hierarchy that explains the relationships” between every component of your business, including your products, services, blog posts, or values. Essentially, by utilizing a hierarchy within your brand, you’re calling out different pieces of information in a strategic way and directing your viewers or readers through the content.
White Space: White Space is essentially the area inside, between, surrounding, and behind design elements (and no, it doesn’t have to actually be ‘white’).
Why Are These Two So Important?
- It’s not enough to get people on your website. It then becomes your job to direct your viewers and potential customers in a way that moves them through your funnel to become a client or customer. You do this through the hierarchy.
- Without effective use of white space, you can easily piece together a TON of information, which can become overwhelming for your audience. We see a lot of pet business websites out there jam-packed with information because often times, we just want to pour out EVERYTHING we can in order to convince people to buy from us. But, your information becomes convoluted when it’s so tightly compiled on a website. White space allows you to not only look more elegant and modern as a brand but also relaxes the reader into enjoying your business’ online presence.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="3.25" custom_margin="||-40px" custom_padding="24px|0px||0px|false|false"][et_pb_column type="4_4" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text _builder_version="3.27.4" text_font="||||||||" text_font_size="33px" header_font="||||||||" header_font_size="43px"]
Components Of Effective Hierarchy
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="3.25" custom_margin="0px||" custom_padding="32px|0px|0|0px|false|false" column_structure="1_2,1_2"][et_pb_column type="1_2" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text _builder_version="3.27.4"]
Color & Contrast
In order to direct people’s eyes where you want them to go, color and contrast is the way to go! After all, if you were looking at 100 blue pencils, they’d all look the same to you. Now imagine 99 blue pencils and 1 bright yellow pencil. Which pencil out of the 100 would you notice first? Probably yellow. This also relates to contrast. If you draw attention towards something that’s significantly different than everything else in an effective way, you’ll call people to that item. For example, you could switch up and bold a font or include a dramatic shift in color.
[/et_pb_text][/et_pb_column][et_pb_column type="1_2" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_image src="https://dox.design/wp-content/uploads/2019/06/hierarchy.jpg" force_fullwidth="on" align_tablet="center" align_phone="" align_last_edited="on|desktop" _builder_version="4.9.4" hover_enabled="0" alt="blue pencils with one yellow pencil" sticky_enabled="0"][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version="3.25" custom_margin="0px||" custom_padding="32px|0px|0|0px|false|false" column_structure="1_2,1_2"][et_pb_column type="1_2" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text _builder_version="3.27.4"]
Size & Scale
Why is size so important? For the most part, larger objects will draw your attention over smaller objects. Think about it - your banner images on your website or your flyer header will typically have larger typography compared to the rest of the content, right?? That’s on purpose. It’s the first thing people see, which means it’s important and needs to draw attention quickly. Closely related to size, scale is essentially the size of an object in relation to the other object. By comparing the two, you’re able to create importance in the larger object.
[/et_pb_text][/et_pb_column][et_pb_column type="1_2" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_image src="https://dox.design/wp-content/uploads/2019/06/main.jpg" force_fullwidth="on" align_tablet="center" align_phone="" align_last_edited="on|desktop" _builder_version="4.9.4" hover_enabled="0" alt="heading sizes" sticky_enabled="0"][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version="3.25" custom_margin="0px||" custom_padding="32px|0px|0|0px|false|false" column_structure="1_2,1_2"][et_pb_column type="1_2" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text _builder_version="3.27.4"]
Alignment
Aligning your visuals is an extremely effective way to strategically guide viewers through your website, packaging, copy, graphics, etc. in the way you want them to. For example, if you are outlining your process for your dog walking business, you may have columns that allow people to start with the first column and read them in the proper numerical order. That’s a strategic flow in alignment.
[/et_pb_text][/et_pb_column][et_pb_column type="1_2" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_image src="https://dox.design/wp-content/uploads/2019/06/white-space.jpg" force_fullwidth="on" align_tablet="center" align_phone="" align_last_edited="on|desktop" _builder_version="4.9.4" hover_enabled="0" alt="text grouping" sticky_enabled="0"][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version="3.25" custom_margin="0px||" custom_padding="32px|0px|0|0px|false|false" column_structure="1_2,1_2"][et_pb_column type="1_2" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text _builder_version="3.27.4"]
Proximity & Spacing
Both proximity and spacing have to do with where you actually place each text, graphic, or visual on your medium. Using these components allows you to distinguish one group from another. For example, by grouping together a header, body text, and button with one another, you’re assuming that the button goes with what the header and body text describe. Piecing these close together is on purpose. By increasing your spacing from one group to another, you’re letting your viewers know that it’s something completely different or something new.
[/et_pb_text][/et_pb_column][et_pb_column type="1_2" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_image src="https://dox.design/wp-content/uploads/2019/06/important.jpg" force_fullwidth="on" align_tablet="center" align_phone="" align_last_edited="on|desktop" _builder_version="4.9.4" hover_enabled="0" border_width_all="3px" border_color_all="#000000" alt="website layout example" sticky_enabled="0"][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version="3.25" custom_margin="0px||" custom_padding="0px|0px|0|0px|false|false"][et_pb_column type="4_4" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text _builder_version="3.27.4"]
How To Utilize White Space
Step 1: Increase your line spacing
It’s easier to read for your viewers and looks way more professional.
Step 2: Use fonts the right way
It’s one thing to pick out your fonts. It’s another thing to actually use them properly. Make sure you’re adding in contrast with your fonts. We talked about this in Part 1 of DIY Your Brand series here.
Step 3: Don’t Be Afraid To Separate Things That Are Important
By having something stand alone, you’re able to draw attention and importance it. Sometimes, less is more and white space definitely helps you achieve that.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="3.25" custom_margin="||-40px" custom_padding="24px|0px||0px|false|false"][et_pb_column type="4_4" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_image src="https://dox.design/wp-content/uploads/2019/06/user-test.jpg" align_tablet="center" align_phone="" align_last_edited="on|desktop" _builder_version="3.24" hover_enabled="0" sticky_enabled="0"][/et_pb_image][et_pb_text _builder_version="3.27.4" custom_margin="||20px"]
How Do I Know If I’m Doing This Right?
The best thing you can do if you’re DIYing your brand is to get some website testers. We suggest asking people who are unfamiliar with your business to look through your website or flyer or whatever item you’re testing. You will want to ask them what they notice first, second, third, etc. Don’t tell them exactly what you’re looking for here because you want them to use the website as if they were a potential customer or client! We also recommend testing several unrelated people to allow you to see what is standing out and what might need more attention.
From there, go back to the above components of hierarchy and white space and try to piece together WHAT you want to get across through your content or website. This blog post will serve as a guide as you get more strategic in your brand visuals placement.
Stay tuned for Part 3 on How to Successfully DIY Your Brand! In the meantime, if you need any extra help or want some feedback on your hierarchy or white space, head on over to the Dox Design Facebook Group and we’ll be sure to support you.
Want to stay updated on all our blog posts so you know when part 3 is released? Bookmark this page and check back next month to see part 3!
[/et_pb_text][et_pb_signup mailchimp_list="Dox Design|7759df9d10" title="Begging for more? " description="
Be the first to know when new blogs posts come out so you can continue to DIY your brand like a pro. We promise you won't want to miss out on all this FREE #droolworthy information.
" _builder_version="3.24" header_font="FatFrank Regular||||||||" header_text_color="#e8dd16" background_color="#0f7fff"][/et_pb_signup][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" _builder_version="3.22.3"][et_pb_row _builder_version="3.25"][et_pb_column type="4_4" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text _builder_version="3.27.4" text_font="||||||||" text_font_size="20px"]
Related Posts
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="3.25"][et_pb_column type="4_4" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_dpblog_portfolio posts_number="4" include_tags="10,55" show_categories="off" fullwidth="off" module_class="bloggrif" _builder_version="3.24" custom_padding="20px|10px|20px|10px|true|true" custom_css_portfolio_image="margin-bottom: 20px!important;" custom_css_portfolio_title="display:inline !important;||margin-top: 50px !important;"][/et_pb_dpblog_portfolio][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" _builder_version="4.0.5" background_color="rgba(181,200,216,0.8)" background_image="https://dox.design/wp-content/uploads/2019/11/Background.png" background_blend="luminosity" custom_margin="50px||" custom_padding="61px|0px|0|0px|false|false" global_module="5614"][et_pb_row module_class=" et_pb_row_fullwidth et_pb_row_fullwidth et_pb_row_fullwidth" _builder_version="3.25" width="89%" width_tablet="80%" width_phone="100%" width_last_edited="on|desktop" max_width="89%" max_width_tablet="80%" max_width_phone="" max_width_last_edited="on|desktop" custom_margin="-10px||" custom_padding="0|0px|30.375px|0px|false|false" make_fullwidth="on"][et_pb_column type="4_4" _builder_version="3.0.47" custom_padding="|||" custom_padding__hover="|||"][et_pb_cta title="This Could Be You!" button_url="/work-with-us/" button_text="Get Your Own Droolworthy Brand" _builder_version="4.0.3" header_level="h1" header_font="Bourton||||||||" header_text_color="#000000" header_font_size="71px" header_line_height="1.2em" body_text_color="#ffffff" background_enable_color="off" custom_button="on" button_text_size="13px" button_text_color="#ffffff" button_bg_color="#000000" button_border_width="0px" button_border_color="rgba(0,0,0,0)" button_letter_spacing="0px" button_font="||||||||" button_icon="%%246%%" button_custom_padding="10px|16px|10px|16px|true|true" background_layout="light" custom_padding="||" button_bg_color__hover_enabled="on|hover" button_border_color__hover_enabled="on" button_bg_color__hover="#0f7fff" button_border_color__hover="rgba(0,0,0,0)" button_text_color__hover_enabled="on" button_text_color__hover="#ffffff" button_bg_enable_color__hover="on"][/et_pb_cta][/et_pb_column][/et_pb_row][/et_pb_section]