tyler benning logo

Portfolio Site

Dec 2018 - Present

How I Designed This

Designing a portfolio isn’t rocket science. It’s a basic website that has a few pages worth of content. Regardless of its simplicity, I still approached this project the same way I approach most design projects. Figure out who the users are and what they want to accomplish.

Based on the conversations I’d had around my past portfolios (v1 v2), I figured that most users were:

  • Recruiters
  • Hiring managers
  • Other designers
  • Mom ❤️

What do I expect people to accomplish?

  • Learn
  • Read
  • Skim
  • Judge 🧐

Optimizing for Reading & Learning

Okay, so I expect users to read and learn on this site. What kinds of sites are optimized for reading? Well after months of perusing various documentation sites (React, Gatsby, MDN web docs), the answer was pretty obvious. Sidebars dwell within most documentation sites because of their power to guide users through content. The choice was simple.

For this site, I figured that if I use a sidebar, it would remove the need to go back to fiddle back and forth between the project list page, and the project write-ups. Less scrolling. Less clicks. Less cognitive load. Just click the next one in the menu! Sure, it only really saves a quick click here and there, but it adds up when you’re short on time and trying to flip between projects to figure out if this “Tyler guy” even knows what he’s talking about.

Visual Design

MVisual design is a finicky thing. It has the power to help with usability, convey ideas, and generally give you a “feeling” about a site. My hope is to convince you that I’m not a total bore of a designer that only knows how to draw boxes on screens, and to make you feel good about your interaction on this site. I also want to show that I can be creative damnit!

To begin the process, I drew out a few layout concepts on paper, which I then pieced together in Sketch. I wanted to add brand elements, but also make it feel personal. Sometimes I look at other designers’ portfolio sites, and can’t help but feel disconnected from the designer. Generally work is supposed to speak for itself, but I want users to feel pleasant, as if they’re meeting me in person.

To remedy this situation, I dug up the best “pleasant” photo I could find, that a friend had taken of me. I’m a sucker for mixed media illustrations, and decided to flex my Photoshop skills to build some brand materials. Over the years, I’ve been using illustrations that I pulled from a pattern on my favourite shirt to craft my personal brand. I did some masking and colour tweaking with layer styles, and put together the hero image you now see on the front page today.

Since this is a content site, I made the typography straightforward with large headings in IBM Plex Sans, that I paired with Google Font’s PT Serif. It’s amazing what a little CSS can do to really make a site shine. Perfect Motherfucking Website

How I Built This

Almost a decade ago, I’d started learning HTML/CSS, Javascript, and PHP in school. I’d built some Wordpress sites, and a couple of CRUD sites for school projects. I was frustrated with CSS floats and that I couldn’t centre anything vertically in a div. Soon after, I dove headfirst into a career in design, leaving coding (mostly) behind.

In late 2018, I decided I’d test the waters and look at how front-end tools have evolved. I found Flexbox. After Wes Bos’ Course, and now I feel like a born-again Christian, with a newfound love for CSS layouts.

I started learning git, set up a Github, and enrolled in a Javascript course at HackerYou. I started compiling a huge list of resources and used this roadmap to decide on what to learn. It turns out there’s loads of resources for designers who want to learn more code.

What The Flexbox?! — A simple 20 video course that will help you master CSS Flexbox

HackerYou | Learn to code in Toronto | Courses, Workshops, & IT Training

GitHub - kamranahmedse/developer-roadmap: Roadmap to becoming a web developer in 2019

It’s important to have projects while learning. After I’d completed a few jQuery assignments (project 1, project 2) for my HackerYou course, I wanted to dive into React and figure out what all the buzz was about.

I started taking some online tutorials from Wes Bos and Meng To to get a feel for React. I discovered Gatsby, and bought into the buzz surrounding the project. I read through all the Gatsby docs, and decided Gatsby was perfect for my needs. I installed Styled Components and Prettier, and started structuring my content in markdown files. I picked up just enough GraphQL to grab data from my markdown files, and get my site up and running on Github Pages.

Inspirational People and Projects on the Internet

I’m so grateful for all of the people who have put together such great content to learn from and be inspired by. I’d be so lost without these awesome people and projects!

How I Wrote This

Writing isn’t easy. I spent a great deal of time (probably too much) reflecting and digging through past projects. This is the fun part of creating a portfolio. You stop, reflect, and think back on old projects, parse through all of the design assets, and consider all of the decisions you’d made in the process. I think this exercise in itself helps you grow as a designer.

Choosing words is tough. These resources helped me to find the words you currently see in front of you. Writing is a journey, and I’ll continue Amazon.com: Letting Go of the Words: Writing Web Content that Works (Interactive Technologies) eBook: Janice (Ginny) Redish: Kindle Store Draft No. 4 | The New Yorker The Art of Pitching: How I Got Published in The Atlantic — Campfire Labs

As for my writing tools, I write everything using Bear. I found it a few months back, and now I write all my notes on Bear. There’s a handy feature where you can copy everything as markdown, so I just copy and paste everything from Bear to my markdown files. Sure, there are more elegant CMS’, but I don’t mind updating my markdown files manually and pushing them to Github pages.

SOS: Send Help

It’s been a wild ride getting this thing going, if you’re curious about the source code for this site, check the project out on Github. I always appreciate feedback on how to improve the site and refactor my code.

Better yet, fork it and use it for your own portfolio or blog project!