ruk·si

🧑‍🎨 Design
Process

Updated at 2014-12-25 03:55

This is a checklist for creating graphical design for a company, brand, campaign or person. The checklist is made from a web design point of view, but can be applied with any typographically heavy graphical design.

Related to design, graphical design, typography, fonts and colors.

  1. Find out the values, wanted emotion and vision of the entity.
    1. Go to the client facilities and look around.
    2. Talk with people related to the project.
    3. Look at the natural signs around the facilities.
    4. Vision the physical places where the graphical identity will be used.
    5. Search online what people say about the brand.
  2. Choose a body typeface.
    1. Collect a set of possible types that communicate the right emotion.
    2. Try different types with placeholder text in an actual context e.g. web.
    3. In the end, you should have 1 typeface for body text.
  3. Choose support typefaces.
    1. Collect a set of types that could work with the body typeface.
    2. Try these out in headings, subheadings and subtitles.
    3. In the end, you should have one or two supporting typefaces.
  4. Create base shapes and color palette.
    1. Draw boxes and shapes while taking inspiration from the typefaces.
    2. Place text using the new type inside and around those shapes.
    3. Play with different colors and gradients to create a color palette.
  5. Create a collection of numerical values for harmonous sizing.
    1. Find out a readable font size where the body type looks crips e.g. 16px.
    2. Use tool like modular scale to create a collection of harmonous sizes; sizes that go well together.
      Ideal text size = a pixel size where the font looks crips.
      Important number = a pixel size that should look good with the text
          Can be e.g.
          1) the pixel size at which headings looks the best
          2) the pixel width of a piece of media assets used in the project
      Relation = what harmonous value to be used in multiplification.
      
    3. Height and width of each and every element should somehow come from the resulting harmonous sizes. Every numerical value in your CSS files should be from the harmonous size table. Rounding is ok e.g. 22.162 to 22. Combining multiple values is ok e.g. 3.56 + 16 = 19.56.
      The most important things that must follow the harmonous sizes:
      Grid widths, image width, paragraph width,
      line height, baseline, image height.
      
  6. Create the final layout using these typefaces, shapes, colors and sizes.