Before and After

I chose this original design due to the large appeal the heading and overall layout of the pages had. I liked the simplicity of the template, but knew it needed some changes to satisfy the overall aesthetic I was going for. I felt while the simplicity of the site and large amounts of white space were nice in some ways, it was almost “bland” in what could have been a very creative and cool site. I decided to add some different elements into my design such as less white space, more colors, and elements including more linked pages in the nav for users to interact with.

Before Design

As stated above, I wanted to add more of my creativity to the page to showcase more of who I was as an individual creator. I decided to hop on illustrator and create a personal logo (seen in top left nav) as well as backgrounds for certain pages (like the contact page linked on the home page) to make this site itself a part of my portfolio. I utilized previous projects I have made over this past year and created “projects” and “Individual work” pages to showcase my abilities. I definitely took advantage of negative space, but also used more space than the previous template as seen above. I believe this allows for more engagement and less confusion between viewers and what is on their screens.

I created direct links to my LinkedIn account using HTML as well as a link that opens a new message to anyone who would want to email me directly from the site. Using CSS, I changed the font family, size, and color (as well as hover link color) for more interactivity among users. I found out how to directly link images to PDF’s so users could click on said images and get a larger, higher quality version for their viewing pleasure (seen with my resume, project images, etc.). I directly linked my “First Web Page” project section to the link of my first web page so users could interact with another one of my websites, while also seeing another completed site of mine. I incorporated fun designs (such as the “contact” scrolling nav and Illustrator “blob” background on my contact page) to hook the viewers attention and give them a sneak peek into who I am as a designer while also incorporating a little about my design inspiration from where I grew up to being at JMU.

After Design

Design Principles:

HTML/CSS: I created a code that linked my webpage directly to my LinkedIn account utilizing <a href> tags and “class” descriptions to link my HTML code block directly to a CSS style page that allowed me to change and style the font family, size, color, and more. That specific code can be found on my “Contact” page. I also decided to create the same code within my footer under the name “Visit my LinkedIn!” so users can have that option no matter which page they are on within my website.

ADA Compliance:

  • I utilized color contrast and checked my contrast ratio utilizing WebAIM Contrast Checker for all of my color combinations with my lowest ratio being 4.59:1 (passing ADA compliance).

  • I made sure my text was resizable without loss of functionality or content clarity.

  • Alt text was used to label each image so viewers would have the ability to understand what the image is supposed to be without actually seeing it.

  • I utilized readable fonts for all content avoiding highly decorative or cursive font that not all users could understand.

  • My navigation is consistent across all pages and links within my webpage to ensure there is no confusion between pages.

  • My website is responsive from mobile view to desktop view.

UX/UD: As I described above under the “After Design” heading, I utilized many different UX/UD principles for the overall design of my website. From the color pallet to the fluid consistency within visual hierarchy across all pages, I really believe I bought this website together. My navigation is clear throughout each page, my logo I created in Illustrator links directly back to the “Home” page no matter which page you visit, my website is responsive to different screen sizes, my links link directly to internal and external sources with no error, and I used consistent design throughout the entirety of the website.