Style Guide

Welcome to the viljamisdesign.com style guide. This living style guide serves as a resource that helps to define a common visual language for the components of this website.

Logo

Colors

$rich-black
$oxford-blue
$bleue-de-france
$white
$vermilion
$ucla-gold

Headings

The Quick Fox

The quick brown fox

The quick brown fox

The quick brown fox

Paragraphs

Design isn’t just about the look and feel. Design is how it works, and we believe the best way to focus on this is to work as close to the end result as possible. That’s why we start all our projects with simple sketches, and quickly transition into design­ing working prototypes in code. This is done by the same designers who started the work, which ensures that our original design intent is carried all the way to the end product.

Our core belief is that the products we design should work across anything that can access the web. Whether it’s a laptop, a smartphone, a watch, or even a browser integrated into a car’s dashboard. Previously, we worked in Silicon Valley designing digital products for everyone from startups to Fortune 500 companies. Today, we’re focused on helping our own clients to succeed in their businesses. Have a project in mind?

Lists

  • Responsive Websites
  • Web Apps
  • Rapid Prototyping
  • Design Systems
  • User Experience Design
  • Data Visualizations
  • Front-End Development
  • Digital Typography
  • Information Architecture
  • Research and Usability
  • Website Optimization
  • Consulting

Footer

Time

Text Selection

Design isn’t just about the look and feel. Design is how it works, and we believe the best way to focus on this is to work as close to the end result as possible.

Header Illustration

Customize?

Form elements

Choose project scope
$20K

Process cards

  1. Code

    4. Prototype

    Moving quicker to code helps us to put content over form, embrace the fluid nature of the web and focus on systems of components instead of pages. It also helps us to find user experience issues that previously only became visible once the implementation started.

  2. Visual Design

    5. Visual Design

    This phase happens in iterations before, after and during prototyping. Instead of designing all the different variations as static images in Sketch or Illustrator, we prefer to prototype these in the browser instead and go back and forth between design tools and code.

Punctuation

  • Don’t do: "It's a 'magic' sock"., do: “It’s a ‘magic’ sock.”
  • Don’t do: 1 x 0.5 - 0 = 1/2, do: 1 × 0.5 − 0 = ½
  • Don’t do: (c) 2015 Corp (TM), do: © 2015 Corp™
  • Don’t do: typeface - and thus a whole text - looks, do: typeface—and thus a whole text—looks.
  • Don’t do: 1024x768, do: 1024×768
  • Don’t do: Steve Jobs is 6’ 10”, do: Steve Jobs is 6'  10"