The web offers a broad canvas to create experiences that allow people to engage with their energy data. Clear layouts allow people to comprehend and navigate through information quickly. These principles and guidelines show how to create intuitive and engaging web layouts.
Principles
A few key guidelines for creating visually pleasing and easy to understand web pages.
Create focus
++Give content space to breathe, and reduce elements on the screen.
--Visual clutter makes information hard to process and frustrating to interact with.
Use hierarchy
++Creating emphasis on a web page makes it easy to understand the importance of information.
--Lack of hierarchy muddles understanding of different types of content.
Guide the eye
++Grouping content allows people to smoothly move through content.
--Scattered layouts make people search all over the page for what they need.
Web elements
Opower’s web pages generally share a few consistent elements and layout guidelines. While these elements may not appear in every page, they help give consistency to Opower’s content.
- Navigation
- Use straightforward, non-technical labels to help people find what they’re looking for.
- Headline
- Open the page with a primary heading that explains the content of the page at a glance.
- Body
- Shows graphs, tips, and other information users should read about. Use alternating colors to break up the content into visually distinct sections.
- Call to action
- This is the primary action—don’t include more than one. Provide a next step for people to act on after reading information.
- Footer
- Includes information about the utility like contact, legal disclosure, help, and copyright.
Web grid
Opattern’s grid creates a set of rules to structure content in a consistent, easy to understand format. Opattern’s grid is built on Foundation. The default grid is 12 columns on a desktop screen and can stack vertically on smaller screen sizes.
12 columns
Basic grid
Vertical stack
Small screens
Layout Patterns
While a 12-column grid provides plenty of flexibility, we typically constrain our layouts to a few grid formations that best fit Opower’s content:
Alternating rows
Big and Little
Triplets
How to use the grid
You can create a grid by using Foundation’s grid classes in your markup, or by using Sass grid mixins in your stylesheet. The following example builds a grid with HTML classes (no extra CSS required):
HTML
...
...
The example below creates the exact same grid layout, but with semantic classes and Sass mixins.
Sass
.widget {
@include grid-row();
.widget-aside {
@include grid-column(3);
}
.widget-main {
@include grid-column(9);
}
}
HTML
For more guidance on using Foundation’s grid, head over to the Foundation documentation.
