1: Using the grid layout


Now that you have a basic understanding of Bootstrap's layout and components, let's specify how to use these features to create an engaging website. There is no one way content should display on a website but certain techniques and design elements are more effective at positioning information in a clear and consistent format than others.

 

Grid system layout

amazon.com

amazon.com gird

Most websites are built on a grid system that uses columns and rows to present content. As you learned earlier, Bootstrap is heavily centered around this grid system and is a great framework to quickly create this type of layout. Use two or more equally-sized columns to display images, text, and other helpful information but avoid adding over 6 columns per row to prevent content looking cluttered.

Websites such as YouTube and Amazon use the grid layout to present images and video content in a way that highlights all of the content as equally important.

 

Grid system with cards

airbnb.com

airbnb.com cards

The grid system can also include cards. Information such as different services or products are placed in each card and can contain links or buttons to their respective pages. Reddit, Instagram, and Airbnb all use the card design layout to present information in contained, bordered spaces.

 

Grid system with double columns

mailchimp.com

mailchimp.com double column

Double column or split screen layouts play off of the human tendency to scan the page in a "Z" shape from the top left to top right corner then to the to the bottom left and bottom right corner. Users are directed to zigzag from one column to the next and then down to the next row to repeat the process. The split screen layouts are also used to create a banner with visual interest on one side and text on the other. (source: https://xd.adobe.com/)

 

Single column layout

wikipedia.com

wikipedia.com single column

Single column layouts technically only utilize one column of the grid system. It is more often than not used to display articles and blog posts. This format organizes all content within one, easy-to-follow vertical column. The page is usually formatted in an "F" pattern to follow the natural reading tendencies of online readers skimming text. Readers go from the top left to the top right of the screen then drop to the next line of text and repeat the process. Single columns also tend to be utilized by websites when rendered on mobile devices to help present easy-to-read content. (source: https://xd.adobe.com/)








2: Formatting the homepage


The grid system alone can create appealing websites, but a truly well-designed website maximizes the user's ability to navigate easily throughout the site. Presenting clear navigation paths helps users find information quickly and focus on main services offered on the site.

 

Navigation bar at the top of the page

adobe.com

adobe navbar

A navigation bar at the top of the page is the main roadmap of your website. It should list and link all of the main pages and/or sections of the website that visitors would immediately look to locate. This includes pages such as the about, contact, and blog pages.

As you may recall, Bootstrap provides the option to make your top navigation bar fixed or sticky. Although not required, if your website contains long page lengths add a fixed or sticky navigation bar so users can access links easily without scrolling to the very top or bottom of the page. The example above shows Adobe's homepage with the navigation bar displaying five of their main categories of service. The navigation is not fixed given that the page has a short scroll to the bottom of the page.

 

 

Navigation bar in the footer

beatsbydre.com

beatsbydre.com footer

Navigation links can also be added to the bottom of the page in the footer element.  Among the social media links and copyright, navigation links can be helpful for users who scrolled all the way to the bottom of the page and are still looking for more content.

While the top navigation bar and the homepage are reserved for the most relevant and searched for information, the footer can serve as the expanded, secondary navigation that provides a list of relevant but less commonly visited pages.  The BeatsbyDre footer has several navigation categories that provide links to pages that most people would not be interested in but some will still look to find.

 

 

Call-to-action (CTA)

firefox.com

firefox.com cta

The first opportunity to present the user with the most relevant information is on the initial homepage load. User attention significantly drops as they scroll further down the page so it is vital that the content at the top of the page draws the user to take action.

 

 

CTA message

spotify.com

spotify.com cta message

A call-to-action message should be brief and direct. It should relate directly to the service or product being offered and display as a large, bold text at the top of the page when the homepage loads. In the example above, Spotify is a free digital music service so it makes sense that the CTA message would be "Music for everyone".

 

 

CTA button

godaddy.com

godaddy.com cta button

The call-to-action button should relate to the CTA message and be written in an active voice to encourage action.  GoDaddy, a website that sells domains, displays a prominent button "Find Your Domain".  The button text ties directly back into the CTA message and is easily seen right when the homepage loads.

 

CTA image

barkbox.com

barkbox.com cta button

The call-to-action image is the last part of the CTA section and should not only relate to the CTA message and button but also be the best visual representation of the overall site.  An effective CTA image allows the user to understand the services offered without reading a single word.  In the example above, the image shows a dog begging next to boxes filled with dog toys.  Even if the user does not know the exact service being offered, they can gather that it has something to do with dogs, boxes, and toys.








3: Selecting a color scheme


A website's color scheme solidifies the overall look and feel of the site. Bootstrap has provided ten different colors to get you started. One tip is to create the site using these preset colors, then determine if you would like to create a custom color scheme.

To find color inspiration, turn to other websites selling similar products and get a feel for their color schemes. You could also find an image that you would like to use on your site and select colors from within it. Download a color picker tool browser extension to select exact colors so you don't have to guess.

Websites such as ColorSpace and Coolors are also helpful when looking for colors given their endless generated color schemes. But remember that less is more when it comes to color and there needs to be a balance struck between accent, primary, and secondary colors on a website.

 

Color schemes

aws.amazon.com

#09172C

#232F3E

#2F3765

#638CFF

#E26108

#EC912D

aws.amazon.com color scheme

In the example above, Amazon Web Services uses different shades of orange and blue to create a cohesive, gradient color scheme that plays off their logo.

avocode.com

#000000

#2D2D2D

#AF1985

#0EB688

#34DBFE

#FFA800

avocode.com color scheme

Avocode takes a different approach to color with a complementary color scheme within a single, vibrant image.

 

Accent color

An accent color should only take up a small percentage of the overall website color scheme and be used sparingly. Theses color are often the same colors used in a company logo and should be a bold and vibrant color that draws the user's attention to the main CTA button.

AWS uses orange as its accent color, as seen it the logo and CTA button. Avocode uses a bright green as their main accent color for text and a chat button while the bright pink, yellow, and blue are used for links and small icons throughout the site.

 

Secondary colors

Secondary colors are used to highlight supporting or additional information like subheadings and secondary buttons. A secondary color is used more often than an accent color but should not detract from the main accented features.

AWS uses several shades of blue as secondary colors for their images and subheadings further down on the page. The shades of blue compliment the orange accent colors without drawing away too much attention. Avocode uses black and gray as secondary colors throughout the website to not detract from the larger number of accent colors.

 

Primary colors

Last but certainly not least, are the neutral or primary colors that comprise the majority of a website's color scheme. Neutral colors are often shades of white, beige, black, and gray used for background colors and text.

AWS uses a large amount of white and dark blue as their background colors for the majority of the site. Avocode uses white, gray and black as their primary colors. The neutral colors help users focus on the content displayed in accent and secondary colors by providing a clean backdrop.

(source: http://mmicreative.com/the-60-30-10-rule/)








4: Pairing fonts


Some users tend to skim read websites for the content they need rather than leisurely read every word on a site. To help the user navigate the website's text, font-end developers change text sizes and colors to clearly display relevant headings and groupings of information.

As discussed earlier Bootstrap has several class attributes that quickly change the size, color, and font of the text displayed so you can quickly format your website's text.

 

Text formatting

apple.com

apple.com font pairings

Apple displays information with several different sized and colored text in organized layers to increase legibility.

 

Headings

Headings provide the user with instant information regarding the text that follows. As discussed earlier, Bootstrap headings work well given that it automatically makes text bold.

In the example above, the heading has few words and is the largest text in that section. The color is black so it instantly grabs the users eye.

 

Sub-headings

The sub-headings work to elaborate on the heading while also describing the text that will follow. This text can be a phrase and not just a few words. It is often the same or a lighter color than the heading. The subheading can also be created using a Bootstrap heading, however it should be a noticeably smaller font size than the heading.

Arguably, Apple has multiple sub-headings in this example. One is grouped more closely to the heading while the other is closer to the button. You can see that multiple subheadings are differentiated by font size, with the first being slightly larger than the other.

 

Paragraph text

Paragraph text is always smaller than the heading and often smaller than the sub-heading. It is typically a block of text presented as a muted color to allow users to focus on the heading rather than the paragraph text.

The text formatting example above does not have paragraph text but if it did, it would be formatted similarly to the second subheading. The text is smaller than the previous text and does not detract away for the previous headings.








5: (Optional) Layout your website


Now that we have covered some of the basics of website layout and design, it is helpful to visualize the look of the website before we begin coding.  While you can jump feet first into coding a site, you may end up wasting time re-coding sections because you are unclear of the order and way of displaying the content.  Prevent this from occurring by using Adobe XD, a free design tool that allows users to create an initial layout and even prototype mockup designs before coding. 

 

Download Adobe XD

Download Adobe

For this tutorial, we have already created a sketch for you in https://www.adobe.com/products/xd.html.  Create a free account with Adobe and download XD to your computer.

 

Download Adobe XD

XD sketch

Download: XD Tutorial Sketch

With Adobe XD installed, you can download and save the tutorial sketch to your computer's Downloads folder to easily find and open in Adobe XD. For this course, we have created a sketch of the homepage to give you a basic idea of the site you will build in the later portion of this tutorial. The sketch is meant as a guide and is not a prerequisite to coding but as we stated earlier, it does help to have and idea of what you are coding beforehand.







Next lesson


Check out the comments and debug buttons if you get stuck.