Design and Website Best Practices

  • Want to make the most of your website and ensure that you are following best practices for design? We've got you covered! Below you will find a comprehensive list of recommendations provided by our experienced and award winning UI/UX design team.


    Responsive. Accessible. Intuitive.
    We consider these non-negotiable requirements. Responsiveness is essential for a great user experience on tablets and mobile devices and your users will absolutely expect this. Accessibility is not only a legal requirement, but a moral and ethical mandate as well. If you care about your users and their ability to consume your content, you should be proactive in your pursuit of having an ADA compliant website. Usability is a basic requirement of every website. If your site is not intuitive, it will frustrate users and prevent them from accessing important information.

    Tips:

    • Ensure that you have a prominent, user friendly mobile menu, your content stacks appropriately, and design elements scale as needed to fit within smaller device windows.
    • Links need to be obvious - utilize an underline, font weight, or unique font style. Color can also be used to distinguish links from static text, but should not be the only style difference as users with vision impairments may not be able to differentiate the color difference.
    • Use appropriate font sizes on both desktop and mobile and choose widely supported, clearly legible fonts.
    • As a general rule, clickable items should have a hover effect (animation of some sort) and non-clickable items should not

    Example Sites:

     

    Navigation

    Clear navigation is essential for a successful website. It is the method in which users access information and needs to be designed and organized in a manner that helps, not hinders, the user. A considerable amount of thought should be put into how the navigation looks and functions in addition to how content is organized. When planning site navigation, be sure to consider more than the main menu bar. Navigation can also include breadcrumbs on interior pages, links built into the header or footer of your wbsite, icon areas, etc.

    Tips:

    • A persistent (sticky) navigation bar enables access the main menu from anywhere on the page without having to scroll back to the top.
    • Anchor tags (styled links or buttons) such as 'scroll down' or 'back to top' reduce manual scrolling
    • Breadcrumbs on interior pages indicate the user's click path and make it simple to backtrack
    • Icons add a visual element to text links and help draw attention to high priority content
    • Site Shortcuts are ideal for highlighting your most accessed links, but avoid flooding the homepage with too many links outside of the main navigation bar

    Example Sites:

     

    Content

    At Blackboard we often stress that content is a seperate entity from the template, which is true from a website management standpoint, but content is often considered part of the design by end users. Every organization has unique content, but following general best practices will help your website look its best.

    Tips:

    • Utilize white space and color banding to create digestible sections of content
    • Padding! We can't stress this one enough. Content needs space to breathe and should have ample negative space around it (but avoid going too far with padding or users may think something is missing from the page)
    • Features such as More buttons, arrows, pagination, accordions and tabs help keep homepage content concise, organized, and attractive
    • Avoid animated graphics and auto scroll content (such as horizontally scrolling announcements)
    • Understand your target audience and tailor your content to meet their needs
    • Consider audience/persona based navigation and keep staff or faculty content seperate from general user content

    Example Sites:

     

    Layout & Components

    Layout refers to the grid or region struture of your website that your content sits within. Components are the parts and pieces that make up the website. When it comes to layout, we encourage creativity and thinking outside the box, however, it's important to consider what users will expect to see and where they will anticipate finding it.

    Tips:

    • Scrolling on a website is something all users are accustomed to, but your logo, site name, navigation, search and translator are key features that should always be in a prominent location above the fold.
    • We recommend a mixture of horizontal (wide) and vertical (skinny) content regions on your homepage to accomodate all varieties of content
    • Utilize the full screen real estate by designing your website at wider widths (1200 pixels is a common standard) or opt for fluid width, which means that content expands to fill the entire browser window rather than being constrained within a maximum width
    • Every website needs a grid structure, even if it isn't readily obvious to the user
    • Don't be afraid of scrolling! Everyone using the internet knows how to scroll, but keep the amount of scrolling reasonable and utilize sticky navigation bars or anchor tags to assist the user
    • Keep in mind that items located in your website header or footer will show on all pages. Contact information, social media links and legal links are items users expect to see in the header or footer of a website.

    Example Sites: