Web Designers are as diverse as websites. Some will agree with my commandments and some won’t. The purpose of this article is to nail down what consistently breeds success. While I used the term ‘Commandments’, I recommend looking at the following as guidelines.
1st Web Design Commandment:
Thou Shalt Design for Mobile
As of the writing of this post, Google will soon consider mobile versions of sites before desktop versions. This is not an SEO article but the change points to a larger sway on the internet. It’s clear now that, mobile is now the first pick and desktop is the second. Thus, mobile device experience is more important than ever. The mobile experience becomes more substantial every day in an exponential way.
It’s also worth learning a bit about The AMP Project (https://www.ampproject.org/), which aims to make mobile pages faster.
The following is an article about Google’s mobile first indexing:
2nd Web Design Commandment:
Thou Shalt Make All Text Legible
Careful when overlaying text in front of photos. Text that is not readable is not only impractical in a technical sense but an unfashionable choice. If you insist on using photos or renders with a text overlay, darken or lighten the photo/render so that text is legible.
Another danger with text overlay on photos is the exclusion of access for color-blind users. While it’s unavoidable that people will have a different experience due to vision impairment, as designers we should strive to make the information on our sites as accessible as possible for those with disabilities. The purpose of design is communication.
3rd Web Design Commandment:
Thou Shalt SVG
Scalable vector graphics (SVG) have taken the internet by storm. Nearly 98% of browser users can see SVG (http://caniuse.com/#feat=svg). With the functionality of SVG, the short-lived portable network graphic (PNG) is to be left behind. SVGs work great for logos or any vector based art. For more information of SVG and vectors, stay tuned, I will write another article soon. For now, check out this slideshow from a recent presentation.
The following slides are from a past presentation about image formats:
4th Web Design Commandment:
Thou Shalt Use Flexbox or Grid, Not Float
Floating elements in CSS to create columns and rows is obsolete. Use Flexbox for one-off (HTML/CSS) operations and Grid for larger projects (XML/SASS). Flexbox works for all but 5% of users where grid has a much higher incompatibility rate. However, the grid still functions in a usable way, even if it’s not “compatible” with some of the older browsers that are still in use. What is Flexbox? Flexbox is an element display hierarchy for responsive design. What is grid? A grid is a column and margin based hierarchy for responsive design. Stay tuned for another article on flexbox and grid coming soon.
The following slides are from a past conference presentation about Flexbox:
This is a post I recommend about grid:
5th Web Design Commandment:
Thou Shalt Study Typography
Typography is the art of arranging font in a way that works. Really, Typography should be called Type Theory (like music theory). My suggestions to new designers are to use fewer fonts. Helvetica is awesome! When in doubt, use Helvetica. No font is more versatile and timeless. When in doubt align left. Always try to build on an axis. If you are using different font weights, always skip a weight. For headings, double your font size. If you place words together, it conveys that words are connected so be mindful of text placement. I also recommend staying away from the corners, giving yourself healthy margins in all your designs. Never use forced justified type.
Here is a list of great fonts to choose from: Akzidenz Grotesque, Avenir, Avant Garde, Bell Gothic, Bodoni, Bembo, Caslon, Clarendon, Courier, Din Mittelschrift, Franklin Gothic, Frutiger, Futura, Garamond, Gill Sans, Gotham, Helvetica, Letter Gothic, Memphis, Meta, OCRB, Rockwell, Sabon, Trade Gothic, Trajan and Univers.
6th Web Design Commandment:
Thou Shalt Think Process Process Process
Know your process so you can reproduce it. Clients will be more confident employing your service if they see a clear path to achieve the objectives of said client’s business. Use case studies to ensure the client that you can predictably achieve the desired results. When a designer is less of a risk, said designer can charge more for services. Have templates ready to go for every step of the process from pitch to handoff. I would love to share some of my templates with you, just sign up for the email list, and shoot me an email to let me know what type of template you would like.
7th Web Design Commandment:
Thou Shalt Keep Up With Design Trends
Make friends with hipsters and use them for their feedback!
In 2018, it may be considered unfashionable to use drop shadows. I want to be careful to say that drop shadows work great in some contexts. There are two places where I see drop shadows the most by beginner designers. 1) In web design, many people are using themes that were created outside of an industry on which the web designer is applying said theme. I recently spoke to a woman who was creating a site for a flower arrangement competition. The site was covered with drop shadows. Drop shadows say the project has depth, but they also make the project seem heavier. On a smaller screen, a drop shadow can seem a bit noisy because it’s difficult to quickly identify a drop shadow with your eyes. I tend to see drop shadows working decently in construction and manufacturing business based sites, and I think it works in this context, for many reasons. Bezeled fonts are also considered by many to not be ‘cool’.
8th Web Design Commandment:
Thou Shalt Use a Color Palette
Considering using a distinct and consistent color palette across all mediums. I recommend using fewer colors than more. Colorful design is great, but if you are relatively new to web design, there is a good possibility you could harm yourself more than help. Like with font choices, minimalism is more achievable for a beginner.
Free color palettes from Adobe:
9th Web Design Commandment:
Thou Shalt Spend Time in a Discovery Phase
The words design and art are not synonyms. Art is an expression. Art’s existence is an end to itself. While design can be expressive, the goal of the design discipline is to communicate. As a designer, your role is not to express yourself. Your role is to communicate. Therefore a dialogue between the designer and the business representative is essential. Your job as a designer is to help brands realize their brand in the form of a website. The brand exists before you had ever met the client, you just are going to develop it. Usually, for me, I have multiple discovery sessions, and it can take a third the scope of the project with a new client.
The above video addresses stylescapes, which I recommend for all web designers.
10th Web Design Commandment:
Thou Shalt Plan with the Objective of the Site In Mind
This is connected to discovery. First off, you need to take a good hard look at the business you are prospectively working with. If they are looking to sell online, you design the site so that the user is driven towards that goal. If you would like to do email capture, then create a site that will capture emails. The possible objective of a website has no limit. Know that objective and stay focused on it. Some business needs vast libraries of information and hundreds of pages for their site. Other business would only need a single page site, allowing the business to free up resources for other business demands.
Wrapping It Up
So did you agree with my guidelines? What did you like? Did I miss something? Let me know below!