website design principles header

Understanding the Website Design Principles

The David Geffen School of Medicine Laboratory Sites are designed utilizing both the David Geffen School of Medicine Guidelines and the  UCLA Brand Guidelines to help you engage your audiences, amplify the impact of your messages and deepen your relationships. While each site shares a common theme, there are unique elements to differentiate each group from one another.

Click on the topics below to learn about the design principles

Responsive design allows you to build a website for multiple screen sizes (phones, tablets, and desktops) with the same code. During the initial mobile days, designers would build two websites to account for desktop devices and mobile devices. This increased the complexity for developing, updating and maintaining content. Fortunately, these sites will respond to the size of the screens displaying the content.

We are using a framework called Bootstrap developed by Twitter. Their approach to design is mobile first . Pretty much all most of your content will display correctly with minor considerations.

Images and tables are usually a fixed width when they are displayed on a website. When adding content such as this - additional classes must be added in order for these elements to respond appropriately.

There area few ways to see responsive design in action

  1. Open up a page on your mobile device and compare it to the same page on your desktop computer.
  2. On your desktop computer, adjust the size of your browser window and watch the elements flow.

Some elements that change depending on screen size

  • Shaping the Future is removed from small screens to allow for prominent display of DGSOM logo (left) and organization logo or title (right).
  • Home page photo or carousel is removed from small screens

Although considerable effort has been made to make all aspects of the site responsive, we do not recommend trying to edit your site using a mobile device.

The main theme of the website is designated by UCLA Brand Guidelines.

Graphical Elements

The background incorporates molecules as overlapping elements ."Molecules are percolating with thought and energy, many individual elements working in harmony as one. Their brilliance is not manufactured; they are the byproduct of energy, of innovation and of optimism. They are the light that makes UCLA graphics pop."

The landing page graphic or carousel borrows from the overlay box . Specifically, images are dropped behind the content to allow for the content to take precedence.

There are a few elements that make up the header. Below is the starting point for the themes.

Theme 1

  1. DGSOM Logo
  2. Laboratory logo or title

Theme 2

  1. Laboratory Name
  2. DGSOM Logo

Theme 3

  1. Laboratory Name
  2. UCLA Logo

Theme 4

  1. UCLA Logo
  2. Laboratory Name

We will work with you to create the homepage that you want to represent your laboratory.

Each site has control over creating their own content. Photos can be displayed on any page. Files can be uploaded and linked.  Movies and forms can also be included.

Each page is edited using a "What You See is What You Get" (WYSIWYG) editor. While such editors are great for minor editing it will shortly become evident their limited capabilities in placing elements and changing how elements are displayed.  The creative designer is able to utilize Bootstrap to create a feature rich and interactive site.

The html for each page can be edited directly and will give you much greater control over how your content is displayed. Please refer to our resources page for additional instructions on how to utilize more advanced features.

Each theme does not currently list a footer.  You can add a standard footer (as seen below) or one of your own creation.