You don’t need an art degree to make your website beautiful

Whether you’re building a product, a tool, a website, a service, or a startup: first impressions are everything. Users inherently gravitate towards products they can trust, products that feel legitimate and provide a sense of security. A website that looks like it was designed by a child always make users feel safe and sound. Even if your product is great, no one will use it if it looks like you don’t know what your doing. Yet, as a developer, design can often feel like an uphill battle. Your number one goal is to ensure the software you’re building works, and that it works well. Most developers give little or no thought to the visual design of their work, and for most developers that’s okay. But if you’re a frontend developer, design should be at the heart of everything you do. Not only do you need to implement the designs of others, but you really should be able to handle designing your own project. So, how do you design your frontend in 2018? That’s what I’ll cover here. Think of it as a comprehensive cheat sheet for the non-designer. I’ll hit three primary design components: Color

Light

Typography Each section is broken into a set of general rules to follow, an example, and a list of resources you can use. But first let’s get you grounded in the relevant design principles.

Semi-skeuomorphism Before we dive into all the shortcuts you can take when designing a frontend in 2018, it’s important to understand the design principle we’ll be following: semi-skeuomorphism. Sounds scary, but it really isn’t. In fact, you’re probably already highly familiar with the concept. We made a custom demo for .

No really. Click here to check it out . Click here to see the full demo with network requests Skeuomorphism is a design principle where shadows, gradients, and textures are used to create elements representative of real-world elements. Texture and light are the two primary ingredients in skeuomorphic design, and from 2007–2013, they seemed to appear everywhere. The iOS 6 Find My Friends app (2011) heavily utilized skeuomorphic design, as well as the majority of Apple’s products at the time. Much of this may have been attributed to Apple’s own interpretation of modern design language, as their 2011 User Interface Guidelines specify: When appropriate, add a realistic, physical dimension to your application. Often, the more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it… often, an amplified or enhanced portrayal of something can seem more real, and convey more meaning, than a faithful likeness. Yet by 2012, a slow migration had begun towards a much flatter design system. Driven by the emergence of design languages like Metro UI and Material Design, flat design introduced softer and more uniform color palettes, thinner typefaces, and the use of shadows as tools of systematic hierarchy as opposed to the reinforcement of hyper-realism (referred to by Google as “Elevation Hierarchy”). iOS Calculator: 2011 (skeuomorphic) vs. 2013 (flat) Alright, so what’s semi-skeuomorphism? Semiskeu is a design principle that combines the colorful gradients and use of shadows found in skeuomorphic design with many of the principles found in flat design. You’re likely pretty familiar with this one too, as it’s pretty much everywhere. A great example of semiskeu in action is the Stripe homepage:

What do you notice? Soft shadows add subtle dimension to the page’s flat device illustrations The header gradient moves from dark to light, left to right, pulling your eyes towards the illustrations and creating an accent Illustrations rest at an angle compared to the page copy to bring focus to them In semiskeu, shadows and gradients are not only used to imply light, but are used to accent, amplify, or bring attention to notable elements on the page (points 1 & 2). Additionally, while semiskeu maintains the geometric simplicity found in flat design, an increasing number of websites utilize unconventional shapes and curved divs in order to the page as a fluid entity, as opposed to a page divided into clear horizontal sections (3). Now that we have some context, let’s start designing. Color One of the most common mistakes frontend devs make when building websites is leaving subtlety out of their designs. It’s 2018, not 2003. People can’t get away with shipping bright blue and green operating systems anymore. Websites no longer have dancing gifs or starry backgrounds. Choose your color palette carefully. General rules of thumb: The background of your site’s content should never be anything but a shade of gray. Use white, light gray, or a dark gray. Only use colored or gradient backgrounds in sections designed to draw the user’s attention. Think headers, heroes, call-to-action banners, etc. In most cases, use white text on any image, colored, or gradient background. Additionally, a light drop shadow can sometimes help promote the text’s prominence. Never use absolute blacks. Pure, opaque black (#000) is often too harsh for most webpages. Even this article has its font color set to an opacity of 84%. Ensure colored components do not border each other. Unless the colors are very strong compliments of one another, often times the contrast of two neighboring colors can create a sense of polarization and division that breaks the flow of your page. If a navigation bar might touch a colored hero, opt for a transparent navbar background instead.

The first production website I ever wrote (2013) looked like Windows XP threw up on a page. Its biggest design fault was its use of too many primary colors. Meanwhile, the project’s redesign (early 2014) overused a singular primary color far too much, which was equally as toxic. Your website should contain one or two primary colors, and utilize a grayscale background for all body content. By third redesign (late 2014), I had learned my lesson.

Example Using only these five simple rules, we can drastically transform this black-and-blue webpage into a much more aesthetically appealing site: The body of the site is light gray, reserving the blue brand color for the header only (rules 1 & 2)

The header text is white, to complement the blue (rule 3)

The text color was bumped up from black to a very dark gray (rule 4)

The navbar’s background is transparent, so the bordering black and blue do not contrast with one another (rule 5) Resources Flat UI Colors

Flat UI Color Picker

Adobe Color

Coolors Light While color serves many purposes, it can also be used to imply light through the use of gradients. In semiskeu, this practice is incredibly common. Let’s take another look at the Stripe homepage. Where do you think the light source is?