2023 Web design: How I built my portfolio

Project overview

Mock-up image of a male-presenting person with malanted dark skin tone. The person has two hands on the laptop keyboard and the person is facing the screen. The person is looking at the laptop screen, which shows an image of this portfolio website's main page being tested under the WAVE accessibility checker tool for compliance. On the screen, there are many colorful icons that resemble content that needs to be changed in order to meet accessibility compliance. There are printed pieces of paper on the table next to the laptop.

Image description: Close-up image of a male-presenting person with light skin tone next to a colleague. The person is looking at the laptop screen, which shows this portfolio website's main page test results after running the WAVE accessibility checker tool for compliance.

Summary: In this project, I mindfully designed and tested my own portfolio website to solidify my knowledge of digital web accessibility standards, coding languages, and user-first experience (UX) design to make this visually stunning and accessible!

Standards

Section 504 and Section 508
The Americans with Disabilities Act (ADA) 1990 Codes
Web Content Accessibility Guidelines (WCAG) 2.1 Level AA or higher

Responsibilities

User Experience (UX) design
User Interface (UI) design
Universal design
HTML and JavaScript
Website usability testing

Goal

To design and build a welcoming, accessible, and dynamic portfolio website that showcases relevant projects to land a remote job!

Tools

Google Sites website developer
Adobe Suite (Adobe Ilustrator)
WAVE Evaluation Tool
OSS Tool Color Check
NVDA screen reader

Target audience

Prospective employers, hiring managers, colleagues and anyone else that is interested in my design portfolio on web or mobile devices.

The problem

Mellie needs to showcase their new instructional design skills on a portfolio website to begin applying to jobs and land remote roles.

The solution

The solution is to quickly create a visually appealing, professional portfolio that is user-friendly and meets accessibility compliance.

My website-building process

Step 1. Research

My first step was to conduct some research and compare various website-building platforms. I decided to go with Google Sites because of it's beginner-friendly features.

These are the Google site features:

Beginner-friendly customizable themes
Easily control website permissions
No additional host or data storage costs
Allows for web and mobile friendly versions
Advertised to be able to edit HTML code

Step 2. Design and develop: color scheme, typeface and fonts, buttons, logo, and visual layout

The goal is to intentionally match engaging design choices to accessibility compliance standards, such as the WCAG 2.1 at level AA, while still making this visually appealing to anyone navigating through the portfolio.

Below is a Style Guide for this portfolio website that will showcase Color Scheme, Typeface and Fonts, Buttons and the Logo.

Figure 1. Style Guide for the Mellie Design portfolio website, showing Color Scheme, Typeface and Fonts, Buttons and Logo. This information is presented below under Color scheme paragraph.

Color scheme

Amber is known to be a energetic, warm, bold and confident color, while beige represents simplicity and serenity (van Braam 2019). Lastly, black often symbolizes protect, strength, and comfort (van Braam 2019). All the characteristics of who I am are represented as colors.

I selected these typefaces and fonts:

<h1> Title (Arial Bold 42 size)
<h2> Heading (Arial Bold 36 size)
<h3> Subheading (Arial Bold 30 size)
Normal Text (Arial Regular 22 size)
Small Text (Arial Regular 16 size)

I selected these colors for my color scheme:

White (HEX: #FFFFFF)
Beige (HEX: #E6E3DF)
Yellow (HEX: #FFC845)
Red (HEX: #F46A61)
Blue (HEX: #4F7AA4)
Green (HEX: #6AA26B)
Purple (HEX: #A53AA6)
Black (HEX: #000000)

Designing with accessibility at the fore-front in the early stages of design is optimal to avoid getting to the end of a project only to realize that all color combinations are unreadable. I tested the main colors for text and backgrounds. I didn't run an accessibility check on black text with a white background because that is a well-known highly accessible color combination with a contrast ratio of 21:1 (WebAIM 2021).

According to WCAG 2.1 level at AA, the minimum acceptable contrast ratio for text and images of text is a ratio of 4.5:1 (W3C Web Accessibility Initiative 2023). Below are the results for this color standard accessibility check.

An accessibility color checker tool software is opened and comparing the contrast between the background and foreground of colors to ensure there is enough contrast between text and background colors to meet the Web Content Accessibility Guidelines 2.1 at level AA.

Figure 2. Screenshot image of OSS Tool Color Check tool results on the "Featured projects" page of the portfolio website.

OSS Tool Color Check tool accessibility compliance results:

- YES - Off-white (230, 227, 223; HEX #E6E3DF) and Black (0,0,0; HEX #000000). Contrast ratio 16.4:1. Passed accessibility color contrast check.
- YES - Yellow (255, 200, 69; HEX #FFC845) and Black (0,0,0; hex #000000). Contrast ratio 13.59:1. Passed accessibility color contrast check.

Typeface and fonts

Thinking about accessibility first, I researched typefaces and fonts that are known to be highly accessible. I intentionally chose a well-known, highly reader-friendly font that is accommodating to individuals with dyslexia called Arial typeface and font (Rello and Baeza-Yates 2013). I used regular and bold fonts for this style.

According to research on eye tracking by the Neilson Norman Group, how users experience scan text is usually done in specific ways, including in an F-pattern (Pernice 2017). I designed my Featured Projects sections in this way to make these important portfolio pages scannable to my readers.

Additionally, I used bulleted lists with action-verbs, consistent line numbers and number of list items to keep information chunking more easily readable (Loranger 2017).

During my website design, I had to ensure that the coding and headings, such as level H1, H2, and so on, matched to ensure a logical list order for accessibility.

Buttons

Let's get into buttons! You will often notice that buttons have a small script, or copy, to tell the user (you) how to interact with a product. Buttons have the following main components: structure, sizing, states, microcopy, and color.

While there is no right or wrong way to go with button edges, I went with rounded rectangles because most of my script in the buttons and stacked navigation menu items had long descriptions so I made them more square to add a larger target for users to click (Shen 2018). Also, I wanted to stay consistent, so I avoided using a combination of rounded and squared corners for this website design.

For the microcopy script in my buttons, I avoided ablest language like "View projects" or "Look at projects" because not all users have the ability to see so their experience is invalidated and unrelatable. Instead, I used "Visit projects" often for button text. Lastly, I made sure each button text on a page was unique. Having a "Visit projects >" button that opens a new page every time is confusing.

Logo

Logos are important to show off the feel for any product, design or website. I decided to create my own!

For the Logo, I used Adobe Express, Adobe Illustrator and Canva to design a creative visual that shows movement, the color scheme, and waves coming out of a friendly sloth character's head to show energy and ideas appearing. I chose the sloth character to resemble my work ethic: intentional worker that carefully and sometimes slowly puts together relaxing and empowering work.

Visual layout

The visual layout changed a lot from January to July 2023 as I learned more about user experience (UX) design through Google's UX Professional Certification Program. Below you'll find some iterations of this website homepage for some examples of the evolution of this site.

Figure 3a. This is the January 2023 version of my website's homepage that had a GIF of a moving red wave around the designer's headshot. However, this was an accessibility compliance issue. There was no way to allow for users to stop the animation, so I selected a static image instead.

Figure 3b. This is the April 2023 version of my website's homepage with significantly larger font size. While I had good intentions for individuals that are visually impaired, I realized my mistake after completing a training. The heading levels were all messed up and made screen reader lists inaccessible with illogical order. I also played around with a white background color.

Figure 3c. This is the July 2023 version of my website's homepage as a more sophisticated version with a sloth logo headshot instead of the designer's portrait. After growing as a User Experience (UX) designer, I created a more visually appealing landing page with a logo and button with microcopy text that is inclusive and doesn't say things like "View projects" or "Look at projects".

(In progress) Step 3. Testing: color contrast check, validating code, heading order, and more

There are many ways to test for acessibility but it is important to always check with official regulation guides. I used these guides to test my website:

How to Meet WCAG 2.1 (Quick Reference) guide by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI)
WebAIM's WCAG 2 Checklist by Web Accessibility in Mind (WebAIM)

To test the accessibility of my portfolio website, I also used a handful of comprehensive Google chrome extensions to evaluate the color, text, and overall features of my website. For example, making sure alternative descriptions are added appropriately to all images is critical and can be forgotten.

Also, I used my knowledge of screen readers and used Non-visual desktop access or NVDA, a highly accessible and free screen reader software, to test for navigation on this website. I will show you below how I used each tool.

Tool 1. Web Accessibility Evaluation Tool (WAVE)

This is a tool developed by WebAIM.org that provides holistic feedback on the overall accessibility of a website's content based on WCAG 2.1 standards. Results show icons that may require the tester's attention to assess accessibility issues and make changes. It's important to note that not all red flag icons equal non-compliance.

While this tool is comprehensive, this tool is known to show many of the warnings and errors that are potential accessibility issues in addition to the actual problems (Godfrey 2021). For example, the results show 55 contrast errors as potentil accessibility issues. I double-checked these errors in another tool just to make sure the text and background colors are all meeting WCAG 2.1 at level AA standards. Below you will find the WAVE results showing the homepage of this website.

Screen shot image of Web Accessibility Evaluation Tool (WAVE) results on the homepoage of the Mellie Design portfolio website taken on August 8, 2023. The test shows a list and highlights contrast errors, alerts, features, structural elements, and ARIA components on the homepage.

Figure 4. Screen shot image of Web Accessibility Evaluation Tool (WAVE) results on the home page of the Mellie Design portfolio website taken on August 8, 2023. The test shows a list and highlights contrast errors, alerts, features, structural elements, and ARIA components on the homepage. There were not alternative text image errors because my entire website has these descriptions for all images.

Tool 2. Stark Accessibility Tools

I used the Stark Accessibility Checker chrome extension plugin to validate the color contrast error suggestions from the WAVE tool, as an extra precaution to accessibility compliance. All of my text and background color combinations passed at WCAG 2.1 level AA or higher. Below you will find the Stark tool results of the color contrast checks performed on the homepage.

Screenshot of Stark tool color contrast results from testing black and white colors on "Visit all projects >" button on home page of Mellie Design portfolio website. The results show that the black text on a white button background have a 21:1 contrast ratio.

Figure 5a. Screenshot of Stark tool color contrast results from testing black and white colors on "Visit all projects >" button on home page of Mellie Design portfolio website. The results show that the black text on a white button background have a 21:1 contrast ratio. In 2023, this is accessibility compliant at WCAG 2.1 level AA and level AAA for normal and large text.

Screenshot of Stark tool color contrast results from testing black and white colors on "Hi, I'm Mellie" section text and background colors of the home page of Mellie Design portfolio website. The results show that the black text on a beige background have a 16.41:1 contrast ratio.

Figure 5b. Screenshot of Stark tool color contrast results from testing black and white colors on "Hi, I'm Mellie" section text and background colors of the home page of Mellie Design portfolio website. The results show that the black text on a beige background have a 16.41:1 contrast ratio. In 2023, this is accessibility compliant at WCAG 2.1 level AA and level AAA for normal and large text.

Screenshot of Stark tool color contrast results from testing yellow and white colors on "Featured projects" section text and background colors of the home page of Mellie Design portfolio website. The results show that the yellow text on a black background have a 13.59:1 contrast ratio..

Figure 5c. Screenshot of Stark tool color contrast results from testing yellow and white colors on "Featured projects" section text and background colors of the home page of Mellie Design portfolio website. The results show that the yellow text on a black background have a 13.59:1 contrast ratio. In 2023, this is accessibility compliant at WCAG 2.1 level AA and level AAA for normal and large text.

Tool 3. HeadingsMap Chrome Extension

This tool maps out the heading rank structure as a list and highlights any headings that are problematically out-of-order. It's a simple yet super effective tool. It helped me re-organize all my headings and fix them. You'll find images of the some of the page results below with some failing that fail and need a heading re-structuring and some passing pages.

Screenshot image of the HeadingsMap chrome extension test results on the Mellie Design home page. On the left, this will show a menu map of the heading rank order of the current page.

Figure 6a. Screenshot image of the HeadingsMap chrome extension test results on the Mellie Design home page. On the left, this will show a menu map of the heading rank order of the current page. This is a not-so-obvious failing logical heading order with <h1> titles as 1 and <h2> headings as 2. It would make more sense to have "Hi, I'm Mellie" as a <h1> main title and nest things up to <h3> as subheading.

Screenshot image of the HeadingsMap chrome extension test results on the Mellie Design Mobile App page. This is an obvious failing logical heading order with <h1> titles as 1 and <h3> subheadings as 3 immediately after. At the end, there are <h2> headings.

Figure 6b. Screenshot image of the HeadingsMap chrome extension test results on the Mellie Design Mobile App page. This is an obvious failing logical heading order with <h1> titles as 1 and <h3> subheadings as 3 immediately after. At the end, there are <h2> headings. This was flagged with a red box to show that this needs to be fixed and does not pass accessibility standards, which is especially confused to screen reader users.

Screenshot image of the HeadingsMap chrome extension test results on the Mellie Design Learning Products page. This is smooth pass. The logical heading order starts with with <h1> titles as 1 ends with <h2> headings immediately after in a list of all the products.

Figure 6c. Screenshot image of the HeadingsMap chrome extension test results on the Mellie Design Learning Products page. This is smooth pass. The logical heading order starts with with <h1> titles as 1 ends with <h2> headings immediately after in a list of all the products.

Tool 4. Axe DevTools Accessibility Checker

I used the the Axe DevTools chrome extension by Deque Systems to scan entire website pages for accessibility issues within the HTML code of my website. While Google Sites is a great platform, unfortunately this platform does not allow for advanced HMTL code fixes or editing. I was able to fix ARIA code issues temporarily, and not permanently for now. I am currently in contact with Google's Disability Support team to see if anything can be done. Below you will find some images of the Axe DevTools running on a few pages of this website.

Melliedesign.com homepage test results by the Axe DevTools accessibility checker chrome extension. The tools found 1 critical issue on July 31 at 12:45pm and suggested to solve an ARIA code problem for the home button in the navigation bar.

Figure 7a. Melliedesign.com homepage test results by the Axe DevTools accessibility checker chrome extension. The tools found 1 critical issue on July 31, 2023 at 12:45pm and suggested to solve an ARIA HTML code problem for the home button in the navigation bar. This is the only common problem encountered in all of the website pages after testing. It appears to be a page link issue in the coding for all links in the navigation page.

Melliedesign.com homepage screenshot where the HTML code is being edited to delete ARIA coding and insert a simple button type for the homepage link in the top navigation bar page.

Figure 7b. Melliedesign.com homepage screenshot where the HTML code is being edited to delete ARIA coding and insert a simple button type for the homepage link in the top navigation bar page.

Melliedesign.com homepage test results by the Axe DevTools accessibility checker chrome extension. The tools found 0 total issues on July 31 at 12:45pm.

Figure 7c. Melliedesign.com homepage test results by the Axe DevTools accessibility checker chrome extension for a second test. The tools found 0 automatic issues on July 31, 2023 at 8:41pm MST time. Unfortunately, this is a temporary fix and not temporary due to new Google site's not allowing permanent HTML coding fixes by user. This is currently a discussion I am having with their support team.

Tool 5. NVDA Screen Reader

The global, free, open-access screen reader tool for Windows Operating System computers. This is an awesome tool built and designed by individuals that are visually impaired. I used this to navigate my page and ensure that all parts are navigable and more.

Figure 8. Screenshot image of home page of Mellie Design portfolio website showing the "Welcome to NVDA!" screen reader dialogue box pop-up.

Here are some key findings from using NVDA:

Pass: No keyboard traps found
Fail: Needs another way to move through pages. This was fixed by adding an additional Search Bar feature to the website.
Pass: No timings are required to interact with buttons
Pass: Navigable and restarts in logical order
Pass: Links have meaningful distinguishable text

On a different screen reader, iOS VoiceOver, the search magnifying glass and the caret icon for the nested drop down menu title "Projects" in the navigation bar are voiced as "Image" and do not tell the screen reader user what these icons do, which can be a problem as well. For now, I cannot extensively change the HTML of this Google Site because Google provided very limited capability of doing this, but perhaps in the near future there will be a solution.

Results and conclusion

While Google has it's own Volunteer Product Accessibility Template (VPAT) with results on Google Sites, it was important to manually test my Portfolio website for accessibility. To visit the VPAT or Accessibility Conformance Report (ACR) file provided by Google, visit the Accessibility Information page.

Not all WCAG criteria were presented in this project write-up. Also, not all WCAG criteria applied to this website when testing. For example, if the content contained videos, audio, or live media, then accurate closed captioning, audio descriptions, and transcripts would be required to meet certain guidelines.

In conclusion, creating an accessible website design is not just a matter of compliance; it is a commitment to inclusivity and equal access for all users. A website can look visually appealing and pixel perfect, but can also be inaccessible and not compliant with standards.

With more resources and opportunities, I would like to:

Collaborate with accessibility subject matter experts (SMEs) to validate the accessibility of this website and expand my knowledge of ARIA.
Get a stronger foundation on screen readers and start working towards a certification in testing with NVDA, a well-known accessible screen reader
Continue towards more certifications through the International Association of Accessibility Professionals.
Keep testing my website for accessibility. WCAG 2.2 recently launched in July 20, 2023 while I was testing this site initially!
Integrate more JavaScript user interfaces. Due to the limited features in Google Sites, there is currently not a lot that can be done with interactive JavaScript code on this website but it is being researched heavily.
Keep in touch with Google's Disability Technology Support team. Currently, the new Google sites platform as of July 31, 2023 does not allow users to edit HTML permanently for accessibility code issues. I reached out to Google's Disability Support team about this to find a solution together.

As we embrace the principles of accessibility, we take a significant step towards a more equitable digital landscape, where everyone can fully participate and benefit from the vast opportunities the internet offers. I have a lifetime commitment of continuing to prioritize accessibility in all of my design work, making digital spaces more welcoming and accessible for everyone.

Acknowledgements

A ginormous appreciation for the people, organizations, and resources that are readily available to make a difference in the lives of everyday people, especially to those with different abilities and disabilities.

ChatGPT - I used OpenAI's Artificial Intelligence (AI) prompt software to assist me with some of this project's write-up. This is a tool that has the potential to create a more accessible world.
Free CodeCamp - This is a 501(c)(3) charitable organization that provides free coding certifications to people interested in upskilling and breaking into software development and engineering. This organization gave me the foundation to start coding for accessibility!
MDN Web Docs - Mozilla's web developer tools page made by developers to help beginners with HTML, CSS, and JavaScript languages to apply best accessibility practices. This page helped me make sure I am applying the best, optimized, accessible coding scripts for screen readers.
Nielson Norman Group - A huge repository of research-based UX best practices relevant to accessibility and usability. A valuable asset to this project!

Sources

Adams, Chuck, et al. “Web Content Accessibility Guidelines (WCAG) 2.2.” www.w3.org, World Wide Web Consortium W3C, 25 Jan. 2023, www.w3.org/TR/WCAG22/. Accessed 10 May 2023.
Edwards, Sarah. “UI/UX Tips: A Guide to Creating Buttons.” Make It Clear, 26 Apr. 2022, makeitclear.com/ux-ui-tips-a-guide-to-creating-buttons/. Accessed 10 May 2023.
ELM. “The SAM (Successive Approximation Model) Approach to ELearning.” ELM Learning, 4 Jan. 2022, elmlearning.com/blog/sam-successive-approximation-model-approach/. Accessed 10 May 2023.
Loranger, H. (2017, April 9). 7 Tips for Presenting Bulleted Lists in Digital Content. Nielsen Norman Group. https://www.nngroup.com/articles/presenting-bulleted-lists/
Office for National Statistics. “Symbols and Special Characters.” Style.ons.gov.uk, style.ons.gov.uk/accessibility/symbols-and-special-characters/. Accessed 10 May 2023.
OFF-SITE SERVICES, INC. “Color Check for ADA Image Compliance.” www.oss-Usa.com, www.oss-usa.com/color-check-ada-image-compliance. Accessed 10 May 2023.
Palliyaguru, Chanka. “Color Basics and Psychology.” Medium, UX Collective, 30 Mar. 2018, uxdesign.cc/color-effect-b78fae8bb72f. Accessed 10 May 2023.
Panagiotidi, Maria. “How to Optimize Button Microcopy.” Uxpsychology.substack.com, 4 Nov. 2021, uxpsychology.substack.com/p/how-to-optimize-button-microcopy. Accessed 10 May 2023.
Pernice, K. (2017, November 12). F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile). Nielsen Norman Group. https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
Rello, L., & Baeza-Yates, R. (2013). Good fonts for dyslexia. Proceedings of the 15th International ACM SIGACCESS Conference on Computers and Accessibility - ASSETS ’13, 14. https://doi.org/10.1145/2513383.2513447
Rimmer, Trina. “An Introduction to SAM for Instructional Designers - E-Learning Heroes.” E-Learning Heroes, 2019, community.articulate.com/articles/an-introduction-to-sam-for-instructional-designers. Accessed 10 May 2023.
Shen, Shan. “Make Sense of Rounded Corners on Buttons.” Medium, UX Collective, 18 Nov. 2018, uxdesign.cc/make-sense-of-rounded-corners-on-buttons-dfc8e13ea7f7. Accessed 10 May 2023.
Godfrey, B. (2021, April 7). WebAIM WAVE Browser Extension Review | Automated Accessibility Testing Tools. Foundry.sparkbox.com. https://sparkbox.com/foundry/wave_evaluation_tool_website_accessibility_audit_website_accessibility_checker
van Braam, H. (2019). Color Psychology. Color Psychology. https://www.colorpsychology.org/
W3C Web Accessibility Initiative (WAI). (2023, June 20). Understanding Success Criterion 1.4.3: Contrast (Minimum). Www.w3.org. https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
WebAIM. “WAVE Web Accessibility Tool.” Wave.webaim.org, 2021, wave.webaim.org/. Accessed 10 May 2023.
WebAIM. “WebAIM: Contrast Checker.” Webaim.org, 2019, webaim.org/resources/contrastchecker/. Accessed 10 May 2023.
WebAIM. (2021, January 9). WebAIM: Contrast and Color Accessibility - Understanding WCAG 2 Contrast and Color Requirements. Webaim.org. https://webaim.org/articles/contrast/#:~:text=This%20brightness%20difference%20is%20expressed

< Go to last page: AI chatbot

Go to next page: Mobile app

Page updated

Google Sites

Report abuse