Landscape of a rocky desert butte in the foreground and snow-capped mountain peaks in the background

Website Redesign

In 2016, I created a website to showcase my writing portfolio. At the time, my primary goal was a simple site that provided links to my past publications as well as a blog to share my personal writing. I didn’t have any experience creating a website from scratch, so I signed up for a Wordpress account and was able to easily set up a site using their customizable templates.

Screenshot of website homepage with a photo and introductory text

Example of homepage from original website

The site served me well for two years, but as my interests grew to include design and user experience, I decided it was time to update my online presence. While enrolled in the Front End Web Design certificate program at the University of Utah, I designed and then created a new site that displays both my writing and design work.

When I started thinking about redesigning my portfolio website from scratch, I spent some time thinking about where my inspiration comes from and came up with a design philosophy. I’d already discovered that desert landscapes guide my designs and they feature prominently on my old website. I wanted to build on this with a new color scheme, an updated menu, and a responsive design for mobile devices.

Color Palette

I knew I wanted to use orange in my new design, but I knew I needed another color to complement it. After doing a mood board exercise, I decided to contrast the orange with a turquoise green. Both of these colors reflect the natural influences that inspire my work and provide good readability on the white background I’d chosen.

A collage of random images with a desert theme

A mood board exercise assisted me in choosing my color palette

Updated Menu

Most portfolio websites have similar content, and I knew I didn’t want to change my website drastically. I’d retain the About section as well as my writing portfolio, blog, and contact page.

However, I decided to remove the Work With Me tab, as it wasn’t providing much additional value. Instead, I added Work With Me buttons as a call to action in several places on the site. That button will lead the user to the contact page, where I’ve added some information about the work that I do and how I can collaborate with others.

Menu bar with the following categories: About, Portfolio, Work With Me, Contact, Blog

Old website menu bar

On my old site, I had no place to put my design work. As I build my portfolio, I need a dedicated space to show my work. My new website has prominent places for both my design work and my writing, allowing me to showcase both equally.

Menu bar with the following categories: About, Design, Writing, Blog, Contact

New website menu bar

While some elements of my website have remained similar, I feel like this new layout showcases the simplicity that I enjoy and makes navigation clearer for the user. I feel it will also allow users to more easily see the breadth of writing that I do along with my new design portfolio.

Responsive Design

The previous version of my website was built on a WordPress template, and therefore was automatically responsive for both web and mobile devices. As I began to build my new site from scratch, I wanted to maintain this aspect. More users than ever are accessing the web from their phones and various touch screens, so I felt it was important to continue to make my site accessible in these formats.

A collection of wireframes showing the new website layout

Mobile wireframes for new website

From Wireframe to Code

I first created my new site in Adobe XD, laying out all of the pages for web and mobile. Being new to coding and knowing I’d have to build whatever I designed, I decided to keep it simple and let my work be the focus of the site.

Once I had completed my wireframes, I began building my site using HTML, CSS, and Javascript. While I made a few changes along the way, I was able to build a site that was very close to what I’d imagined in my wireframes.

A collection of wireframes showing the new website layout

Wireframes for new website

Getting It Online

Once I’d completed my code, it was time to get my site online. I’d considered building a static website that didn’t require any WordPress functionality, but this was problematic for my already existing blog. In the end, I decided to continue hosting my blog on Wordpress while keeping the rest of the site static. While this may change in the future as my design and coding knowledge grows, I felt it was the most expedient way to maintain my content and get the newly design site up and running.

Due to this decision, I did have to make a few changes to my original designs, such as eliminating some forms that appeared on the site, but I don’t feel it affected functionality too greatly. Overall, I feel the new website better displays my design and coding skills while remaining a place to share my writing, too.