Design matters on the web today, and users are savvy enough to know it when they see it. While they can’t necessarily articulate why, they enjoy using a well designed site more than a poorly designed one.
Unfortunately when starting out, it isn’t always possible to have access to someone whose focus is the design of your site. Therefore, it’s necessary to roll up your sleeves and do the best that you can.
While no one can learn design from a single post, we’ve put together a few guiding concepts that have helped us get by until we’ve found that special someone who really does have the skill and focus to create a beautiful experience.
Constraints are necessary
While it might seem counterintuitive at first, great design comes from embracing constraints rather than shunning them. If you think that your project has no limits, it’s because they might not be obvious at first. You should work to find these constraints before starting because without them your project is bound to become directionless and complicated.
For example, if you are designing a mobile site, your constraints might be the size of the screen of the devices that are viewing the site or it might be the amount of time your users are willing to wait for your page to load.
Visual constraints are similar. While you could make a website that uses unique colors for every new element or a single page that contains every action on your site, restraint is preferred by your users.
At first, it’s best to have too much constraint rather than not enough. So, we suggest using a CSS grid to minimize the number of layout choices, a fixed color palette to limit the number of colors used, and a style guide to limit the number of distinct elements across your site.
How to Use This:
Take half an hour and list out all of the constraints for your specific project. Here are a few to get you started: Are your users primarily mobile or desktop? How many screen sizes do you have the resources to design for? What are your users’ goals? How many actions should it require for your users to achieve their goal? How much time will they wait?
Once you’ve made your list, keep it in a prominent place while you work. At each decision point, check your list and ensure your proposed solution fits within all of your constraints. If it doesn’t, continue to propose solutions until you find one that fits. Unwavering support of your constraints is one of the most difficult parts of the design process but also one of the most critical.
Good design isn’t done in a vacuum. The best artisans and engineers have always been influenced by their peers. You should take advantage of the design that surrounds you on a daily basis. When you see something that impresses you, capture it and write what you find appealing about it. This act of capturing and cataloging allows you to better understand which elements work and which don’t.
Until you’ve built up a collection of inspiration, the internet can provide a pretty good substitute. We’ve found Dribbble to be a useful source of inspiration when looking for a new direction at Easel. They have an incredible collection of designers as well as a large volume of high quality work. We’ve also found the top rated color schemes on Kuler to be indispensable.
How to Use This:
Set a timer for 15 minutes and find five designs that you find visually interesting (without a timer you can easily kill an hour or two). You should strive to chose pieces which are distinct from one another. Keep these designs close at hand while you work on your project. Then, when you face a moment of creative block, review these pieces to see how those designs have resolved the problem you face.
While visual flourishes can be a way to differentiate your site, your users are more interested in utilizing your site to achieve their goals. Instead of thinking of every page of your site as a chance to start fresh, think of creating a new page as employing elements you’ve already created in your visual language. Only create new elements when there really isn’t something already in your language which communicates the desired material.
How to Use This:
Create a style guide for your site. This style guide should be a living document and part of your main site (hidden from view of course). Every time you create a new element in your visual language, add an example to this page with the same markup you used elsewhere. When an update to a style is made on your site, your style guide should be updated to reflect the change.
Once you’ve established your style guide, designing a new page of your site should mostly be a matter of pulling in elements you’ve already created. This process will reduce duplicate work and allow your users to better anticipate how your site will respond when presented with a new page.
These are just some of the guiding concepts that we use when working on Easel. We intend to share more about design for the web and how Easel (currently in beta) can make it easier for you. For updates, subscribe to our feed or follow @easelapp.