Web Design Process: A Content-Driven Approach

Always start with a plan. There's nothing like that "new site smell", but before you begin building anything, review this content-driven process checklist to help set you up for success on the web.

Even if you're a seasoned professional designer, developer, or content creator, it's helpful to roll-back and looks at the process through fresh eyes. Doing so can dramatically improve your productivity along with the site's usability, accessibility, findability (SEO), and overall quality.

While these steps focus on creating a new project, they can certainly be applied to any existing project or content review.



Site Planning

Understand the purpose of the project. Whether it's a site, app, page or post, keeping the purpose top-of-mind will help keep you organized throughout the project. Purpose and content should be well related and properly structured.

  1. Work with stakeholders to determine project requirements ahead of time. It's helpful to create a requirements document for all interested parties to sign-off on where applicable.
  2. Develop a good sitemap. A sitemap is the structured page hierarchy of your site. The sitemap will be used to establish the site's navigation and page structure.
  3. Create a concise and meaningful page name. Each page (node) of your sitemap should be well named because that name will be used as the URL address for that page - e.g. http://www.utmb.edu/my-department/about-us.
    *TIP: Keep page names lowercase. A best practice is to use hyphens (-), not underscores (_) to separate words. Do not leave spaces (empty characters) between words in page names.
  4. Establish the overall design or theme. There are many layout and design choices available for UTMB websites and applications, especially for UTMB Sitefinity users. At this stage, make decisions for the global theme of the site including which navigation menu and page layout options you wish to use.


Content Creation

By thoughtfully crafting our web content, better page design and component decisions will be more obvious. Now that we have our sitemap and core page structure in place, we can begin planning the individual pages, articles or application UI.

  1. Know Thy Content. Understand that the content is the true purpose of the web page or article. Take the time to properly craft and edit your content ahead of time to really improve the message.
  2. Create and edit content in a word processor like MS Word. This will help to think of the content on it's own, as well as help with spelling and grammatical errors. *NOTE: Once content is moved into place on the web, it may be a good idea to modify that content inside the application rather than a word processor, depending the situation.
  3. Construct a good hierarchal heading (h1-h6) content structure. Have a good understanding of the content regions that will make up the page or article. Once in a web page, this structure translate into our document model.
  4. Craft a thoughtful page title. Each page (node) of your sitemap should have a good, descriptive title. The page title should directly reflect the content and purpose of that page. This helps with Accessibility and SEO (findability) of the content.
  5. Plan metadata (description and keywords) ahead of time. Planning metadata along with content will improve the quality of descriptive metadata. Metadata should directly reflect the content and purpose of that page. This helps with SEO (findability) of the content.
  6. Gather all assets. Collecting images, icons or other media (videos, documents, etc.) to use for each page or article ahead of time will lead to better choices and make light work of moving content into the web page.
  7. Provide alternative text for images. Like page titles, all images need to have proper alternative text (alt-text) to describe the content or purpose of the image. Getting this done ahead of time will produce better results and save you a lot of time later.
  8. Proof and Approval. Make certain that all information is accurate with no grammatical or punctuation errors. Key project stakeholders should "sign-off" on (approve of) final content prior to being published to the web.
    *TIP: Blank or empty "placeholder" pages should never be published to production. If a web page is not ready when the site must go live, then leave it out. You can always add it in later once it's content is ready.


Design Phase

Keep in mind that site navigation, application architecture, and content delivery must all meet the minimum requirements of UTMB's web standards, guidelines, and best practices. This is a great argument for choosing to use UTMB's Sitefinity Web CMS, but even then, careful attention to detail is always important and still a requirement.

  1. Moving in: choose a theme and global default settings.
  2. Keep "Responsive Design" top-of-mind.
  3. Build-out site structure based on our sitemap.
  4. Maintain clean, structured content architecture.
  5. Look at content creatively. You've done a nice job of tailoring your content, now look at it from a visual design perspective. Are there obvious groupings or regions that can be displayed in a grid or perhaps tabs or an accordion would work better. Would a particular region or topic be better illustrated using an image or an icon? These are the types of questions you should ask yourself through the design process to better present information with enjoyable user experience in mind.
  6. Never compromise accessibility or usability for design choices.
  7. Determine content components. Since we already have our content nicely structured and organized from the previous steps, determining which types of components, modules or widgets to use will be a lot more obvious. Take the time to learn the various components and data types of your application and use them wisely.
    *TIP: In Sitefinity, there are many benefits to leveraging the various content types and widgets as opposed to only using plain text (content block), including shared content, repurposing, ease of maintenance, advanced layout, and styling options and more.
  8. Implement media considerations. Images should have meaningful, descriptive alternative text applied. This will enable users with accessibility needs to be able to understand the purpose of the imagery. Other media, such as Embedded videos and/or Iframes should have meaningful titles applied for assistive technologies.
  9. Leverage semantic HTML5, microdata, and ARIA when appropriate.
  10. Review content and test accessibility. Basic understanding of how all of these previous decisions affect accessibility and SEO will dramatically improve the effectiveness of this page, overall site, and online presence of UTMB as a whole. See Web Accessibility Testing for more information.

Design, Tools & Training

Skip Menu
Top