Part 1 | Getting Started
15. Key Art & Design
Web design requires more than coding. Front-end designers should also have a fundamental understanding of Graphic Design, Typography and Layout Design. Good design is the art of communicating information in a visually engaging manner. While the broader subject of visual design is outside the scope of this guide, there are some basic concepts to be considered in the Web design and development process.
– “Graphic Design is the art of conveying information and ideas in a visually engaging and meaningful manner.”
Key Art & Design
Elements of Design
Art & Design elements are critical to creating compelling websites. The term “stylesheet” is derived directly from traditional print and publication design. A successful design in any medium includes a consistent set of visual elements throughout the work including typography, layout grids, graphics, and color considerations. These elements of graphic design define the”look and feel” of any published work and are key components in branding. Branding is another topic altogether, but in any field of design, it includes the visual elements that represent the personality of an organization, product or idea in a consistent and memorable way.
Any good website should incorporate consistency with the following elements of design in the overall stylesheet:
1. Logo
2. Color Swatches
3. Typography
4. Layout Grids
5. Support Art
6. Repetition & Variety
1. Logo | Figure 7
The Logo for this website was inspired by looking at many glyphs and icons in google images that reflect web design. It incorporates the arrow keyboard symbols used in HTML Tags (< >) wrapping a question (?) mark, and hopefully implies the mission of this guide with a simple and effective image.
It was designed in Adobe Illustrator first – as all logos should be – because Adobe illustrator is a vector drawing program and results in a file format that can be scaled to any size or used in any medium or application later. Therefore, it establishes a benchmark for the logo design. It was then imported into Adobe Photoshop and converted to various pixel based sizes and saved out in a .png format for use in the website. You can save web images directly from Adobe Illustrator, but Photoshop provides better control and more accurate previews when working with and saving pixel based screen images.
A good Logo in Web design needs to be highly legible at small sizes between 80px to 512px for various device screens. It is also a benefit if a Logo is legible at very small sizes to make a “favicon”. A favicon is the little image in the tab of your Web browser that brands the page your viewing. There are lots of free favicon generators online.
To learn how to make a favicon see this link: https://www.favicon.cc
Note: Always design Logos in a vector format (Adobe Illustrator) first. Then size and export for screen applications as pixels (Adobe Photoshop).
2. Color Swatches | Figure 8
Stylesheets for any Web design should follow have color assignments associated with typography and layout elements including headlines, captions, body copy, backgrounds, headers and footers. Existing brands usually have pre-define colors for these elements defined in print design color values. Web designers often need to translate print colors (CMYK or PMS) into equivalent screen colors. A good way to mange this, is to make a simple color swatch image in Adobe Photoshop to translate print values to Web colors and refer visually as need be.
If you are creating designs from scratch, you should define a color swatch for your CSS in advance and modify it as the design develops. A great resource for created color styles is Abode Color (Figure 3). Adobe Color is free to explore and translates all CSS color values. You can also save color themes with an Adobe ID.
3. Typography | CSS for Global Type Styles
It is important to establish typography standards for your Web designs early when developing CSS style sheets. Type styles reflect the personality of a design and are a key component of branding. Since the font-family property is inherited through the CSS cascade, type styles should be define at a high level in the base stylesheet starting with the <body> tag.
The <body> tag should always define the primary font for default page copy:
body{
font-family: Helvetica, Arial, “sans-serif”;
font-size: 62.5%;
}
Note: A value of 62.5% is often used as a font-size property for the <body> tag to define a base font-size of 10px when using em/rem as a unit of measure in the CSS stylesheet.
Likewise, headlines (h1, h2, h3, h4, h5, h6) should also be predefined early in the base CSS stylesheet to define typeface properties and values. You can define a group style for global properties in the CSS and then add additional styles to define selective properties and values as needed. You can also create class selectors for tag styles in specific instances later in the style sheet to overrule properties and values in specific instances.
h1, h2, h3, h4, h5, h6{
font-family: Helvetica, Arial, “sans-serif”;
}
h1,{
font-size: 2.4em;
font-weight: bold;
}
h2,{
font-size: 1.8em;
font-weight: normal;
font-style: italic;
text-decoration: underline;
}
Note: Property values not pre-define in the base CSS style sheet for headlines (and other font related elements) will follow CSS browser defaults. This includes hidden padding/margin properties in text related HTML tags such as headlines, paragraphs and list items.
4. Layout Grids | Figure 9
Defining a base series of visual layout grids early in the design process for mobile responsive designs will help you define CSS style sheets more effectively moving forward. As previously discussed, sometimes it is best to prototype layout designs in a design app such as Adobe Photoshop, Adobe XD or Sketch before coding layout designs. It is important to consider basic media query breakpoints early in the design process.
5. Support Art
Like any other layout design, websites need visual elements to make the layout attractive and support the written content of the page. Photography, Graphic Designs and Video can help draw your audience in and get them interested in other site content. Web designers should carefully consider what imagery best reflects the personality and brand of a Web design. The wrong image, video or other visual content can negatively impact on the look and feel of your design.
6. Repetition & Variety
The concept of repetition with variety is a constant in any successful visual design. Websites should use consistent layout elements such as a headers and footers to keep the design recognizable from page to page. Likewise, Web page layouts should also include some variety to accommodate content considerations and keep the design from becoming overly repetitive. Informational focused websites may tend to have less variety in page designs, while brand and advertising sites may be more dynamic and eclectic based on the content. Regardless of your approach, most websites need to layout well on at least three mobile breakpoints to be widely accessible.
CSS for Global Type Styles
@charset "UTF-8";
/* CSS Document */
body{
font-family: Helvetica, Arial, "sans-serif";
font-size: 62.5%;
}
h1, h2, h3, h4, h5, h6{
font-family: Helvetica, Arial, "sans-serif";
}
h1{
font-size: 2.4em;
font-weight: bold;
letter-spacing: -1px;
}
h2{
font-size: 1.6em;
font-weight: normal;
font-style: italic;
text-transform: uppercase;
}
p{
font-size: 1.2em;
}
Live Demo | Result:
Global h1 Headline
Global h2 Headline
Global paragraph text equal to 12px (1.2em)
Proceed to the next part of the guide if you feel you have a solid understanding of the topics covered so far. Review the related links to study these concepts in more detail.