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
Some elements that change depending on screen size
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.
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.
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.
