Picking up where we left off before students work, we’ll continue to design the rest of the page, and consider what is the next set of important information to display following the hero unit, and some tips for standard practices for design that will highlight that information well.
Highlight Key Services or Information:
A standard practice on many site following the hero unit is to highlight a few primary pieces of information or services. For the example of a social media agency I’ve chosen 3 services.
Start by creating a box for each and align and space them evenly. Start with white boxes, and then add in some photography. We want to create contrast between the background so I’ll darken this gray background.
Keeping up with web trends:
In this example I use some drop shadows to help make the design pop. Shadows were out of style for awhile because earlier in web design there were a lot of more extreme uses of bevels and gradients etc. (skeuomorphic design) and then design went to more of a flat look. Now it’s popular again to subtly use shadows and transitions.
The images you choose matter a lot, because these are key images in telling the story of your company or organization. The point is to help make a visual connection to the information being highlighted. In a later video I’ll cover icons that can be used in this space as well.
Fonts & Text:
It’s hard to master using a lot of fonts, so I recommend for beginners by starting with just 2 or 3 fonts.
Try to keep these short and introductory, just like the hero unit. You can write more about them farther down the page.
You want to get into the mind of the potential customer and think about what their goals are. So this is a good opportunity to quickly show the value propositions.
I like to have a softer sell at the beginning of the page, and make a harder sell towards the bottom. if they read all the way down, that indicates they may have more interest that they want to contact you.
For visual interest, alternate section backgrounds and font colors. A common convention is to alternate images, text and buttons from left to right.
You really want to be able to feature a good amount of content when it gets further down the page you don’t want it to be just images because you want there to be something for search engines to index and you want there to be enough information so that somebody can feel like they are being educated about the service so they don’t go looking for information elsewhere and discover a competitor.
- Don’t overwhelm yourself trying to make typographic choices, stick to just a couple of fonts to work with, and styling those for their purpose on the page.
- Alternating styles using color and placement in each page section will help to distinguish the sections as well as create visual interest to the user.