this website :)

client

me (and potential clients, art directors, employeers)

goal

to redesign & restructure my portfolio website to make it easier for potential clients to learn about who I am as a designer.

role

Web Design, Development, UX

process

After thoroughly reviewing the content of my website, I noticed it lacked who I am as a designer and creator. I’ve always enjoyed typography, but there wasn’t much to showcase that interest. I took this opportunity to pay more attention to my typography and continue working on my coding by creating a more experimental layout.

sketch of previous website

example of previous site sketch wireframe, i enjoyed the layout but wanted to add more content to this version

I started digging into who I am as a designer. I created lists and wrote self-reflections about my qualities, skills, interests, and long-term goals that would hopefully lead to a semblance of me. After a “brain dump”, I read and reread what I wrote. I picked out some overlapping themes: typography, coding, and a love for learning. I reflected those in my designs and writing.

I made a simple brand identity for myself and the site, something that matches my resume and is accessible on the web. It has minimal color, but the colors reflect my personal style. It’s clean with some bolder accents.

Once I found my visual style, I determined my ideal client and audience. I took that info and researched/thought critically to determine what information they want from a personal site. Then I created a couple of simple sitemaps that could be easily expanded if I needed to add work or content in the future.

sketch of part of this website

example of some sketch wireframes and the bottom of one site map

At the same time I was writing my content I was also sketching wireframes. That’s not the ideal solution where written content is a large focus and when there are multiple creators. For me, in this personal project, I had general content thoughts stewing in my head that didn’t need a writer so I multitasked. It was a mix between all writing, all designing, and anything in between.

My brain constantly gets hooked on small details or questions, sometimes they’re related and sometimes they’re not. So I need to take a few moments to purge those thoughts with research, experimentation, or sketching then I can get back on track.

screenshot of my working design file wireframe

adobe xd file with more elaborate wireframe

Once I was satisfied with the sketched wireframes I built them out in Adobe XD. I created a grid to build that would work with the CSS grid, with notes for grid lines.

After those digital wireframes seemed decent enough I started coding. I’ve been using Brackets to code, I like their live preview and on-site update feature. This part always takes me longer than I expected! It also reminded me about the limitations of CSS grid, I want a way to nest grids but keep the parent’s structure. I recently read an article that mentioned this exact sentiment! No the major browsers need to implement. :)

reflection

Overall, I enjoyed the process of my refresh and rebuild. I enjoy helping others, but I struggle with my personal projects. I didn’t include any of my process work on my last site, so I pushed myself to include work that isn’t seen as “perfect”. I enjoy seeing other people's process work, so why wouldn’t others enjoy seeing mine?

like what you see? want to work together?

shoot me an email — erin@erinknapp.com