DEV Community

Cover image for Sev to Dev: Planning my Site
Sev
Sev

Posted on • Updated on

Sev to Dev: Planning my Site

The first step of this long-term journey I've embarked upon is to design my website. But before I even open Photoshop and get to the fun part, I need to plan out the goals and structure of the site. These foundational steps are key to a successful design. I did this over the course of a few days and here's how I did it. Let's gooooooo!

Day 1:

Planning Website Goals

I started by writing down the purpose and target audience of my site. I want this site to be my portfolio/ resume site for my coding, design, music, and video work. I want a place I can show people my projects and services all in one place.

Then I wrote down some of the main actions I'd like my target audience to take. My target audience are ideally new clients, collaborators, and potential employers. I would like for them to view my work, contact me if they'd like to hire me, and lastly find me on the socials if they'd like to follow along with any of my projects:)

Website Structure

a visual representation of my site map. It has a home page that includes navigation to the Work, About, and Contact sections of my portfolio site
I used the information from these initial questions to sketch out the basic structure of my site, planning out the main sections and the content that will be in each section.

I've decided to keep this a one page site for now, with navigation to each of the sections.
I settled on these sections:

  • Home 
    • catchy tagline (tbd)
    • interesting  img
  • Work
    • code
    • design
    • music
    • video
  • About
    • picture of me
    • short bio
  • Contact
    • contact form
    • social media links

Day 2:

Creating User Personas

A site that meets the needs of one specific person is the best way to meet the needs of many. Sounds weird but trust, sis.
If you try to build a site for too many kinds of people, it can become overly complicated and not really be of use to anyone.

I created these personas with as many details as I thought were relevant and since I'm also documenting this and have several other projects going, I had to give myself a deadline. I did try to include real life details because people are complex and diving into what's motivating them often makes it easier to meet their needs.

A stylized user persona card with demographic information and a photo
A stylized user persona card with demographic information and a photo

When creating these user personas I provided demographical information such as age, gender, location, occupation, income, etc. I also include information from their everyday "lives" like personality traits, current challenges, what they care about, and what they do in their free time. I used to write a lot of fiction when I was a kid and these user personas reminded me of the stacks of character sheets I would make as potentials for my stories. And I guess as I'm writing this and thinking about it, its also VERY much like D&D character sheets. I am a nerd. Deal with it. lol

Day 3:

User Flow Storyboard

I used the user personas and the site map I made earlier to create a user flow storyboard.

Storyboard showing how many steps a user has to take to get to the content they are looking for

In this step, I determine what content potential users would want to see and try to guide them there in as few steps as possible. The more steps a user has to take to get to what they are looking for, the less likely they will stay on your site for long.

For this website, if it takes a user more than 2 steps to reach a goal, it's considered a fail. Almost all goals are met with the exception of the blog portion of my site which I will be using an external blogging site for this until I am ready to integrate one.

Takeaways

After completing all of this I feel like I have a solid idea of who and what my site is for which will help me to make more informed choices when I start to design it.

I wanted to also mention that I learned how to do this from a course on SkillCrush.com. Its one of the many online resources I've used in my learning journey. I like the way the content was broken down into smaller chunks and the fact that it's a woman owned and ran business. I stan for sure.

Next I'm going to create a barebones wireframe of the site.
And then I'll work on some personal branding and create a look and feel that I want to represent me. When I put these last two steps together I should end up with an organized design comp that I can code my site from easily.

Stay tuned!

Top comments (0)