Web Design Process

Web 101

• Understanding the purpose of the Site

  Understanding the purpose of the Site

  Keeping the purpose of your site top-of-mind helps maintain organization throughout the project. Before diving into the intricacies of website design, it's crucial to define the purpose of your site as this lays the foundation for all subsequent decisions. Consider the following:

  1. Identify Your Goals: Clarify what you aim to achieve with your website, whether it's to communicate with patients, students, employees, faculty, or community members. Work with stakeholders to determine project requirements ahead of time and create a requirements document for all stakeholders to sign off on.
  2. Know Your Audience: Who are your target users? Understanding your audience's demographics, preferences, and behaviors will guide your content and design choices.
  3. Define Key Metrics: How will you measure success? Establishing metrics like website traffic, conversion rates, or user engagement will help evaluate the effectiveness of your site.
  4. Differentiate Your Brand: What sets you apart? Your website should reflect your unique brand identity, conveying your values, personality, and offerings effectively.
  5. Consider Future Growth: Will your site evolve over time? Anticipate future needs and scalability to ensure your website remains relevant and adaptable. 

• Organizing the site

  Organizing the site

  A well-organized website enhances usability and helps users find what they're looking for quickly. Consider the following principles:

  1. 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 to improve user experience.
  2. Clear Navigation: Design intuitive navigation menus that guide users through your site logically. Prioritize important pages and content, keeping the top navigation to the 5 primary reasons someone would visit the site will keep essential information easily accessible.
  3. Logical Hierarchy: Structure your page content hierarchically, with main categories and subcategories. Use HTML headings (h1-h6), bullet points, and visual cues to break up content and improve readability.
  4. Consistent Layout: Maintain consistency in layout, typography, and design elements across your site. This fosters familiarity and reinforces your brand identity.
  5. Mobile Responsiveness: Ensure your site is optimized for mobile devices. Responsive design adapts to various screen sizes, providing a seamless experience for users on smartphones and tablets.
  6. User Feedback: Solicit feedback from users to identify areas for improvement. Monitor analytics data and conduct usability testing to refine your site's organization and navigation.

• Content Gathering

  Content Gathering

  Once you've outlined the purpose of your site, the next step is to gather relevant content. Here's how to approach it:

  1. Content Audit: Take stock of existing content, if any. Evaluate its relevance, accuracy, and alignment with your goals.
  2. Content Strategy: Develop a plan for creating, organizing, and managing content. Determine the types of content needed (e.g., text, images, videos) and establish guidelines for tone, style, and voice.
  3. Content Management: Implement a system for organizing and maintaining your content. Using SharePoint for file management and editing live shared documents will keep the content well organized and cut down on missed revisions. 
  4. Create and edit content in a word processor like MS Word: This will help to think of the content on its 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 on the situation.

• Content Creation

  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. Content is King: Create compelling, informative, and engaging content that resonates with your audience. Balance creativity with clarity, ensuring your message is effectively communicated. 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 readable content: Write content at an appropriate reading level for your target audience. Use clear, concise language and avoid unnecessary jargon or complex terminology. Use headings, bullet points, and white space to break up text and improve readability, especially for longer content.
  3. Heading hierarchy: Construct a good hierarchal heading (h1-h6) content structure on each page. Have a good understanding of the content regions that will make up the page or article.
  4. Craft a thoughtful page title: Each page 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. 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
  5. Plan metadata (description and keywords): Metadata should directly reflect the content and purpose of that page. Planning metadata along with content will improve the quality of descriptive metadata. This helps with SEO (findability) of the content. Identify keywords and phrases relevant to each page and incorporate these into your content and the metadata to improve search engine visibility and attract targeted traffic.
  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 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.

• Digital Accessibility Compliance

  Digital Accessibility Compliance

  By addressing these accessibility concerns during the content creation and design phases, we can ensure websites are inclusive and accessible to users of all abilities, providing a better user experience for everyone:

  1. Screen Reader Compatibility: Screen readers are assistive technologies used by individuals with visual impairments to navigate websites. Designers should ensure that their websites are compatible with screen readers by providing descriptive alternative text for images, meaningful link text, and properly structured content that can be easily interpreted by these tools.
  2. Keyboard Accessibility: Some users may navigate websites using only a keyboard due to mobility impairments or other disabilities. Designers should ensure that all interactive elements, such as buttons and forms, can be easily accessed and activated using keyboard controls alone, without relying on mouse-based interactions.
  3. Color Contrast and Visual Legibility: Designers should consider color contrast ratios to ensure that text and interactive elements are easily readable for users with low vision or color blindness. Using sufficient color contrast between text and background colors improves legibility and ensures that information is accessible to all users.
  4. Semantic HTML Markup: Proper use of semantic HTML elements not only helps search engines understand the structure and content of a website but also improves accessibility for assistive technologies. Designers should use HTML elements such as headings, lists, and landmarks (e.g., <header>, <nav>, <main>, <footer>) appropriately to provide clear structure and navigation cues for users.
  5. Responsive Design and Mobile Accessibility: With the increasing use of mobile devices, it's essential for websites to be responsive and accessible on various screen sizes and devices. Designers should prioritize responsive design principles, such as flexible layouts and scalable images, to ensure that content remains accessible and usable across different devices and viewport sizes.

  Learn more about digital accessibility.

• Website Design Basics

  Website Design Basics

  1. Accessibility and Responsive Design: Always prioritize accessibility and usability in your design choices. Use semantic HTML5, microdata, and ARIA when appropriate. Consider all screen sizes and make necessary design adjustments to ensure functionality across devices.
  2. User Experience (UX): Don't focus solely on aesthetics. Prioritize intuitive navigation, clean layouts, clear calls-to-action, and fast load times to enhance user experience. Avoid cluttered designs and confusing interfaces.
  3. Visual Appeal: Use modern, engaging visuals and typography to improve readability and user engagement. Avoid excessive animations or distracting elements. Balance aesthetics with functionality, prioritizing clarity and simplicity.
  4. Creative Content Presentation: Evaluate the content from a visual design perspective. Determine if groupings or regions can be displayed in grids, tabs, or accordions. Consider adding images or icons to illustrate specific regions or topics effectively.

• Design Phase at UTMB

  Design Phase at UTMB

  It's essential that site navigation, application architecture, and content delivery adhere to UTMB's web standards, guidelines, and best practices. All UTMB websites must use UTMB's Sitefinity Web CMS, and meticulous attention to detail is crucial.

  1. Color Scheme and Layout: Discuss the desired color scheme and layout ideas with the client. Let the provided content drive the layout.
  2. Page Layout Planning: Maintain a clean, structured content architecture. Use the provided content, sitemap, and navigation structure to determine a consistent structure for similar pages. Utilize specific templates for similar page types.
  3. Template Layout Planning: Based on the sitemap, navigation structure, and content, determine the required page layouts. Keep templates simple and include only essential elements needed across all pages using each template.
  4. Content Components: With well-structured content, identify the necessary components, modules, or widgets. In Sitefinity, leverage various content types and widgets for shared content, repurposing, ease of maintenance, advanced layout, and styling options. Familiarize yourself with these components and use them wisely. Read about When to use Lists, Blogs & Event.
  5. Media Considerations: Ensure images have meaningful, descriptive alternative text for accessibility. Provide meaningful titles for embedded videos and iframes for assistive technologies.
  6. Avoid Placeholders: Never publish blank or empty "placeholder" pages. If a page is not ready at the site launch, exclude it and add it later once the content is prepared.
  7. Review and Test Accessibility: Understand how design decisions impact accessibility and SEO to improve the page's effectiveness and UTMB's online presence. Review the website thoroughly for any issues including accessibility and mobile responsiveness.
  8. Revisions and Approval: Meet with the client for a comprehensive review of the website design and content. Make necessary revisions and publish the site