[oneday-1] Design a hero section.

This Sketch-Beginners-Tutorial is all about fast designing or prototyping different hero sections for a website project.

The Oneday Frontend Framework for Sketch will support my process.


Since there are millions of websites hosted worldwide and humans are flooded with information during the day, it is important to keep things as clear, lean and simple as possible. So why not use the hero section to inform about the website and get visitors interested you, your product or whatever else.

So lets start to quick design some different and clean hero sections.

Before you start.

Download the Oneday Frontend Framework for Sketch here. After your download has finished, you should copy the sketch file directly to the template folder of Sketch App.

Sketch Startscreen with template file.

First things first.

After you opened the Oneday file from your template library, you should edit the color settings to fit your needs. So double click on the rectangle for primary color and choose your favored primary color. After that you should add this color to your document colors (“Documents Colors -> +”).

Don’t forget to update the shared style (bg_primary)!

After you added your new primary color to your document colors, you also want to change the other shared and text styles. You could easily do that with holding “cmd+shift key” and update all colors to your new primary color.

Again: Don’t forget to update all shared and text styles!

If you want to change all the other colors, you can do it the same way. As a last “first step” you should add a new page to your document, which will be the place for our main design.

Design a hero section.

Our first here section should be very clean with the following elements: navigation, hero headline, hero subtext and a button. The artboards size is 1440px x 900 px, the layout grid has 12 cols and a width of 980px (gutter-width: 8px). So let’s start with drawing a rectangle which will have 100% of height and 100% of width. As a background I choose “box_gradient_1” from styles library.

Afterwards, just add a light navigation (variant 1), center it and move it 32px from the top. Now the navigation is in place and we can add our hero headline and our hero subtext. As text styles let’s use the “H1_light” and “H3_light” for subtext. Center both of your texts and give them a horizontal space of 32px between. Change the opacity of your subtext to 70%.

Add a light and rounded button, change the text and size of button (192px x 56px), center it and place it 64px below your hero subtext.

Group those three elements and name it “hero_content” or something like this. Now you can center the group horizontally and vertically. Your hero section is ready within minutes.

As you finished your first design you can duplicate the artboard and start playing with symbols and styles. Change the background style, change the navigation variant and button symbol. Within seconds you will get another hero section for your next web design project.

As a next and for this tutorial last hero section design, I will use a hero background image and some input form with button (newsletter signup or something else).

So lets draw a hero background (100%) and fill it with an image (via Craft Plugin for example). Duplicate this layer and change the style of duplicated layer to “box_transover_light”.

Now add a dark navigation (variant 3), give it a height of 100%, move it 64px from top and subtract 128px from height (900px minus 128px).

Add some text and align it to the right with a horizontal space of 16px between hero headline and subtext.

Add a button with affix and a dark, filled input (from symbols > forms). Change the height to 48px and override the labels. As you can see, the background of input is transparent. So in this case you can add a white rectangle (347px x 64px x) with a border radius of 8px. Move this white rectangle behind the input/button combination.

Now it looks much more better. Group those form elements and add a “box_sahdow_1” style to this group. Align it right and add 32px of horizontal space between the subtext and this group. Align the whole hero_content group to the vertical center.

Within a short amount of time you’ll have your next hero section design ready.

And easily make another variation of this hero section design.

Finally.

As you can see, it is very easy to use a small amount of symbols and elements to design or prototype a clean, lean and lightweight hero section with the Oneday Frontend Design Framework for Sektch.

I would be happy to see some of your hero section designs made with Oneday and Sketch.

Thanks for reading!