The CALS/LAS web team continues to roll out the iastate22 Web Theme update to the Sites+ platform. The new design ecosystem is not only a change to typography, color, and button design; it's a complete overhaul of web content strategy meant to resonate with prospective students and prioritize accessibility and mobile experience.
This post is a guide for leveraging those resources when designing your new homepage in the iastate22 theme.
Jump to:
Theme resources
The university theme team provided many resources to support web groups across campus in implementing the new iastate22 theme. We used these resources to build the theme in our Sites+ platform, but you may find them helpful as you begin your content restructuring journey.
Note: At the time of writing, most of the iastate22 block components are available in the Sites+ platform. We are actively working to add the remaining components, and they can be expected soon.
The style guide
The iastate22 Style Guide is your resource for do's and don'ts in the new theme. It outlines how your site should be organized, the tone for graphics and writing, and gives tips for search engine optimization, accessibility, and more.
Style guides are living documents and may evolve over time to better meet goals. Be sure to always consult the most recent version of the document.
Kitchen Sink
The Kitchen Sink resource has live examples of all content components available for websites so you can see what they look like.
Example page designs
If you prefer to begin your homepage design from a designated starting point, check out the example page designs from the theme team. This page breaks down multiple types of pages you may need to create for your new website based on the type of content you will be featuring.
Now that we've reviewed the reference materials that are available to you, let's get started designing your new homepage!
Consider your visitors' goals
A useful way to begin building your homepage is to put yourself in the position of your visitors. The homepage should include the most important information to them, what you can offer, and present a clear navigation so that they know their path forward. It is critical that you review your website analytics. You may also wish to conduct interviews or consider sending a survey. Create a short list of what content should be highlighted and place it in order of importance to your visitors. Remember that this can be updated later if you aren't getting the results you were hoping for! This is just a starting point.
Determine page layout
Our team will work with site administrators to build homepages and landing pages based on the blocks you decide to build each page with, then Site Admins can edit the content of the blocks.
Begin each page with a Hero block
A hero introduces a page and includes:
- the page title
- an image to grab attention and provide tone and context (optional)
- button(s) for primary tasks (calls-to-action)(optional).
For most of the pages on your website, a basic page title will do for the hero; however, your homepage hero should really grab your visitors' attention.
Homepage hero blocks
These attention-grabbing hero blocks are for homepages. Each of these heroes can include one or two call-to-action buttons. Use these buttons for the most important thing to your target audience. Use your website analytics to determine what is most important to your visitors. Some of these hero blocks include an image. Reference the Style Guide's Image Specification: Ecosystem [PDF] section for image sizes, focal points, and additional usage notes. The Sites+ platform will automatically crop and resize images, but you should start with an image at least as big as the dimensions called for. Here are the kind of heroes available:
- Hero - Featured Image
- Hero - Atmospheric Image
- Hero - Supporting Image
- Hero - Background Video
- Hero - No Image
View example page with each hero
For example, let's select Hero - Featured Image.
Begin by selecting an image for the hero. We can infer that because the title and call to action buttons overlap the image, and the image has a blue overlay, the image should be more decorative than informative.
The style guide has more specifications.
- Image automatically scales down for mobile and will become a 375 x 480px ratio crop at its smallest size. The same image is used for both, so the main focal point must be in the center.
- Focal point: centered
- Dimensions in pixels: 2002 x 1065
You can learn more about properly sizing images in Best Practices for Optimizing Images for the Web.
Choose content blocks
With the hero determined, begin selecting blocks to highlight the rest of the content from the list you created above. Review the kitchen sink resource and select the component block that best promotes your content.
Reference the Template Themes: Kitchen Sink [PDF] section of the style guide for notes on how and when to use them. As often as possible, we strive to use the blocks in the way they were intended.
Let's use Feature with Large Image as our example (#17 on page 53 [PDF]).
This block has two variations: with and without Intro content:
. 
The first guideline explains the block's purpose:
"Use to break up a page flow, create visual rest, and call out an important feature in instances where the featured content clearly supports the same on-page narrative as the prior [component] or page section."
See #18 [PDF], Feature with Large Image and Intro, for an alternative in instances where this is not the case.
There are also important notes about keeping content brief in the grey box; it is not coded or designed to accept long text. It should be a quick read.
We can learn more about the specifications for the image in the Image Specification section (page 45 [PDF]). It reminds us about the focal point of the image and the dimensions.
| Element/Widget | Aspect Ratio | Focal Point | Dimensions (px) | Notes |
|---|---|---|---|---|
| Feature with Large Image | 16:9 | Center- Right | 1713 x 963 | Image will always stay the same aspect ratio at all screen sizes |
Each block has this kind of guidance in the style guide, and can be referenced whenever a question arises.
Order of components
The Kitchen Sink resource has been designed to show an approximate idea of the intended order/hierarchy of blocks. It's not a hard rule, but it can be helpful when considering the block's purpose.
For example, Call to Action - Small and Call to Action - Large are intended to be placed towards the end of a page. If the hero's call to action buttons direct people to the most important actions, the Call to Action blocks can drive that point home, emphasizing what to do next after a visitor has browsed the full page.
More help
The style guide is full of detail to describe the various elements, but it takes practice to use them confidently. Thankfully, the iastate22 theme team has provided several resources for clarification, examples, and support.
In addition to those listed above, there is an active Microsoft Teams discussion where questions can be asked directly to the iastate22 theme team. This is a great place to get clarification on when to use different blocks.
Access the Teams Discussion Forum
The CALS/LAS web team is, of course, always happy to engage with our content editors on these questions. We provide content strategy, design guidance, training, and all technical support for the Sites+ platform. Reach out by emailing us at websupport@iastate.edu.