Do always use a grid
Grids help to establish consistency and rhythm in your design. Embrace it without overly relying on it. Our sites use a 12 column grid percentage system.
We have a lot of things to account for when developing a website these days. They need to meet the clients initial objectives, but they also need to look great, be cutting edge, respond to the users device, and still be managed in a CMS. Some of these things can clash for sure. Here are a few things we have learned along the way.
Grids help to establish consistency and rhythm in your design. Embrace it without overly relying on it. Our sites use a 12 column grid percentage system.
Responsive design means having break points. For all factor1 developed sites, we use foundation. Which has a small (mobile +) medium (tablet +) and large (larger than 1200px) break point stack. Learn more about this.
You may have a large screen, your client’s visitors are most likely on a 1300px x 800px screen (75% of all internet traffic is on that size or less).
Style guides are essential to establishing and maintaining consistency within a design system. Particularly useful for teams.
By designing a system rather than individual pages you are able to think how something works in relation to the whole site. The site we build is in a system, and managed by the client as a system.
Using familiar common ui patterns will keep the user comfortable using your interface. These content patterns also layout in the cms.
Export your jpgs and open in the browser or on an ipad. See what it looks like on the screen, and scroll. Is it legible? Do buttons stand out enough?
Your job as a designer is to eliminate ambiguity: your designs should be obvious and self-explanatory. Know the demographics at hand and assume they are less tech savvy than you. This is a your mama scenario. Can your mama figure it out?
Small text on a form is hard on the user. Also apple ios requires 16px, or else it will zoom to the point of being 16px.
Ensure that touch targets are easy to select — 44x44px area is recommended. Apple and android require this in their app approval process. You should too.
Text on the web should be generally larger to ensure optimal legibility.
Web fonts have been designed and hinted specifically for maximum legibilty on screens. Take advantage of them. Typekit, google fonts, and font squirrel are your friend here.
Headings in site layout represent visual and seo hierarchy, very much inline with how a newspaper or magazine would work. There should not be 3 flavors of a heading 1.
Any time we have a CMS, the end client will add too much, or not enough content. Will your design work with that headline wrapping to 3 lines? What about when there is not a photo for that blog post?
Objects should be accelerated swiftly and decelerated slowly to avoid abrupt changes in velocity.
Keep in mind that the mass of an object will determine how fast or slow it will accelerate and decelerate. This mass also effects the page load time
Use motion to guide the user’s attention and focus through an experience and not simply as an embellishment.
Here are just a few critical elements to plan for both in design and development hand off.