Designing with Code

Back to: Web Design for All Ages

User Interface (UI) Customization via CSS

Once your initial site structure is stable and starting content is in place, a relatively quick and easy way to start exploring different visual styles for your website is to customize the user interface via code (CSS). Some web designers prefer using design software, some prefer pencil and paper, and some prefer code. Now that we have a basic setup and code base to work with, let’s explore a few easy ways to customize your UI by designing with code.

Quick Customization Options

Below is a general list of relatively quick and easy visual changes that you can make to your site quickly, in the browser, using HTML and CSS:

  • Color Changes
    • Element background colors
      • body (main background color of the web page)
      • header
      • navigation
      • footer
      • hero sections (large display sections at the top of each page)
      • main content area
        • sub sections
    • Text colors
      • headings (h1, h2, h3, …)
      • body
      • links
  • Typography Changes
    • Webfonts
      • Google Fonts
      • Adobe Fonts
    • Type Specimens (e.g. font combinations)
  • Content Changes/Additions (e.g. HTML + CSS)
    • add classes if needed (for targeted styling)
    • add divs and spans if needed (for grouping and/or targeted styling)
    • add new/more content (e.g. more category lists, more list items, etc.)
    • add sections to your home page (below your lists)
  • Add images
    • as content (HTML img tag)
    • as background images (css background image)
  • Add Design Patterns/Components/Features (advanced)
    • Image galleries with modals/lightboxes
    • Carousels and Slideshows
    • Embedded videos

Example: Blue Wave Inspired Blue UI

Below is an example of a clean, minimal, blue and white interface inspired by a photo of a wave that I found on Lorem Picsum (source: Unsplash).

Photo by Tim Marshall, from Unsplash

First I changed my link colors to a dark blue (#058) and made my header background white by removing any previous header background and header text colors.

a {
    color: #058;
}

Next, I added a “page-home” class to my body element of my home page (index.html) so that I can display the wave photo on my home page only.

<body class="page-home">

Then I added the image as a background-image to my home page hero with the following CSS:

.page-home .hero {
    background-image: url('https://picsum.photos/id/1041/1600/800');
    background-position: center top;
    background-size: cover;
}

Below is the result of these relatively quick edits: