Blog

By default, WVU Design System components are “stacked” visually on top of each other within a page layout, and the content within each component is surrounded by some default padding. This doesn’t mean the content within each component must stay trapped inside. You can use Bootstrap’s negative margin utility classes to have content “break through” its container to blend components together and create interesting page layouts. Below is an example where you may want to do this.

A while back, I created a guide outlining some common tips for designing WVU-branded websites. I discussed some common design principles: using a grid to unify page elements, rules for typography, keeping your content balanced and grouped appropriately, as well as how to size page elements to establish a visual hierarchy. If you need a refresher, please check out the original guide. I thought I’d write a follow-up outlining some common mistakes I see designers make and offer some tips on how to avoid them, based on following similar design principles.

When displaying articles on your site, say, for news stories or a blog, you would normally use an Article Index template or Article Index component to display a list of articles. Each item in the article index includes a thumbnail, header, excerpt, and a call to action. Here’s what it looks like:

Below are some examples of common mistakes designers make when submitting their site for approval in Conceptboard. Avoiding these mistakes will avoid delays during the approval process.

Use the Page Collection - Icons component to create a nifty Icon Bar for featured content.