When we partner with a client on a website redesign project, we strive to delight. We look to set our clients apart from the competition, inspire their prospective students to take action, and build pride among alums. By paying careful attention to the details of our craft, strategists, designers, writers, and developers at mStoner bring intentions to life. We believe the quality of a website is a reflection of the brand and the values our clients wish to express — in short, the site should exude excellence from every corner.
How do we achieve excellence on every project? We start with the big ideas then dive into the details of the design. Here are four steps in our creative process where the details make all the difference.
1. Choose a Great Web Font
One of the first things designers do for any project is select typefaces, typically a pair, usually a serif and sans serif. Modern browsers allow designers to use custom fonts hosted by any number of free or paid services and foundries. Google fonts, myfonts.com, and Adobe Typekit all host high-quality web fonts designed for the screen.
With a nearly unlimited number of options, we start by using the same criteria for selecting a typeface for a website as we would for a print project — it must be legible and complement the voice of the content. But because light and glass are very different from ink and paper, we pay particular attention to the weight of the letterforms and the contrast between strokes. The chosen typefaces must work on screens at various sizes for headlines, paragraphs, captions, navigation, links, and calls to action. Limiting the number of styles improves page weight — so the more versatile the better.
If an institution’s brand typefaces are not available for the web, we select a suitable alternative. In many cases we choose fonts that are better suited for the screen and give aging brands a refreshed feel.
2. Achieve Resolution Independence
With responsive web design, images, graphics, and type are no longer constrained by their pixel values. Instead these elements can be defined relative to the screen size being viewed. In addition, manufacturers have doubled and tripled the pixel density of our screens. How do we produce and maintain high-quality images in light of this complexity?
In order to achieve resolution independence, it’s more important than ever that all graphics be defined as vector objects, and the preferred format for vector objects on the web is scalable vector graphics (SVG). SVGs can be created using programs such as Adobe Illustrator and manipulated with CSS. So in addition to retaining crispness on any device at any size, motion and transitions can be added to an SVG for more impact.
For photographs, we recommend defining a consistent image ratio and implementing the largest size required on the website and scaling down on smaller devices or for smaller syndicated content areas. For the best quality achievable on retina and retina HD devices, double or triple the pixel dimensions of your exported jpeg – but be warned that larger images require additional download times. Be strategic when deciding where to use retina images, you may want them on a large home page hero, but it would be less important to have retina images for every new story.
3. Edit, Copy Edit, Proofread
No one gets it right on their first try. Great web copy is one of the most important aspects of web design and requires careful consideration to get it right. It must be clear, concise, persuasive, and also inspiring. It must consistently carry the voice of your institution across many pages and many different types of content, from feature stories to academic programs and headlines to call-outs. And let’s not forget about the number of content creators potentially writing on your site. At mStoner, we start by recommending a model that syndicates content across the website, reducing variability when presenting the same information on different pages. But the best way to maintain excellence across your website content is to edit, copy edit, and proofread.
Writing should not be a solitary activity, done alone under the cover of night. You will need to have a trusted colleague help you edit for logic, structure, and flow. Our brains know what we want to say, but our paragraphs need sculpting to make sense to our intended audiences. Copy editing is the process of refining your words to fit the institutional style, voice, and tone. If your institution doesn’t have a style guide for voice and tone, consider creating one. Finally hire a professional editor or proofreader to polish your grammar, check spelling, and punctuation. The details matter here: Craft copy that inspires as much as it reassures prospects of the quality of the educational experience they are paying for.
4. Use Established UI Patterns
User Interface Design patterns are recurring solutions that solve common design problems. Our strategists, designers, and developers are continuously surveying modern sites to find the best, well tested patterns from higher-ed and beyond. In many cases, you don’t have to create something new, you just have to be good — and stay focused on user needs. By using familiar UI patterns, we can be sure users will get to the information they need without frustration. The goal is to create an interface that feels natural to the user. Often innovation is achieved by using common patterns in novel ways. Think a shopping cart and comparison chart for academic programs or tags for related brand values across featured stories.
Using consistent UI patterns across a site helps our development team. By using a pattern library, developers can duplicate design and functionality across a site without guesswork or starting from scratch each time. In addition, a website that relies on reusable UI patterns will require less testing time than a website that doesn’t leverage patterns.
Keep Working on It
Optimizing images, pairing great web fonts, refining your copy, and using patterns are effective ways to improve the quality of your website. Dig into the details and accept nothing less than excellence. Continue to evaluate and refine your content and assets on a regular basis to keep the standards high. Your website is a living system that can grow, evolve, and improve over time.
Ben Bilow Creative Director Creative success comes from digging in, getting messy, and making stuff. As a kid in St. Louis, my interest in skateboarding and rock & roll music shaped my work ethic — be resourceful, build community, share. We invented our own fun, designing rock posters and building half-pipes — tearing them down and doing it again.