DEV Community: Sev

Sev to Dev: Portfolio Design Magic

Sev — Tue, 12 Jan 2021 15:21:47 +0000

Okay, so it's not magic. It's a process and a practice. There isn't just one way to do this but I follow a set of steps that works for me and I'll try to break it down in this post.
Every person gives off a vibe. So does every website. When creating this digital space of mine, I want it to be representative of who I am.
I wireframed the basics of my website in my last post (which you can see HERE) and that's where we're starting off.

The first thing I did was think about what I want my personal brand to say about me. I would describe my brand (which is ultimately just describing me) as friendly, professional, fun and a little different.

My next step was to think about what visual elements best communicate these vibes. I started by choosing a typeface pairing that I felt embodied fun, stylish, and professional. I decided on the bold-but-fun display-serif Shrikhand, with high contrast for my headers and nav. To compliment that, I decided to go with the thin and easy to read Raleway, for the copy text. Google Fonts actually suggested this as a pairing. The Google Fonts website is a great resource for developers and designers alike!

Color theory is just a set of guidelines to follow to achieve a visual effect by mixing and combining colors. Wanting to stick to my playful/fun aesthetic, I decided on a triadic primary color scheme using different values and tints. I ended up with these colors which I based on the background images I chose for my site.

Next came plugging in these choices into my wireframe that I made in Photoshop. I like to start by adding the fonts first. Then I'll add the base colors. Finally I put the images where they should be.

I find it important to keep the Photoshop layers organized and properly labeled. I'm the only one coding this design but I decided to treat this like I would be handing it off to another developer.

I created a little pineapple logo (which I'm still working on) in Illustrator. I will also be using this on my business cards so I made sure I designed it in a scalable vector so it stays crisp at any size.

Recap! I started off with my finished wireframe and first added the styles I chose to convey my message and vibe. First I plugged in the fonts, then the base colors and finally the images. When I was finally happy with the final version, I made sure to organize my files to get ready to code it up.

This is just the Desktop version. I think my next steps will be to decide on how I want this to look on mobile as well as coding up the Desktop version.

Stay cool and stay tuned!

Sev to Dev: Website Wireframe

Sev — Mon, 28 Dec 2020 03:22:42 +0000

The holiday season was a little hectic this year (when is it not?! lol) and of course 2020 was no exception, but I'm back on track. I felt compelled to work on my wireframe for my portfolio website design to keep this project going strong into the new year.

First I took a look at the sitemap I created at the end of November to refresh what I had wrote down. Check out my previous Planning My Site post for details on how I created this.

I settled on these sections:

Home

catchy tagline (tbd)
interesting img

Work

code
design

About

picture of me
short bio

Contact

contact form
social media links

I started with a hand drawn version that I made on my ipad pro and procreate. Ive seen a website before and I've designed a couple before too so this stage was relatively easy.

Next, I placed my hand drawn wireframe into Photoshop for some refinement. Once I got all the sections in place, I slapped a grid on that bad boy and was able to even it out a bit so it looks balanced.

Here are the three side by side for comparison:) On the left is the hand drawn, in the center is the non-gridded photoshop recreation, and on the right is the final wireframe spaced out proper with a grid.

My next step is to turn this solid wireframe into a properly organized design comp in photoshop with the proper use of color theory, typefaces, images, and spacing.

Stay tuned for more!

Sev to Dev: Planning my Site

Sev — Sat, 21 Nov 2020 21:59:55 +0000

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

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.

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.

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!

Sev to Dev: New Github Account

Sev — Sun, 15 Nov 2020 18:58:23 +0000

I have had the same Github account since I started learning to code in 2016.

After weighing the pros and cons, I decided to create a new Github account. A few factors influenced my decision.

Deleting repos is kind of a pain and time consuming if you have years of pointless repos and used to be bad at documenting ( lookin back, I'm appalled at myself lol. What IS all this stuff?!)
My username was not really that professional and I was feeling a little silly giving people my handle.
A fresh start is just nice sometimes and I'm ready to live my best life.

My portfolio site will be a constant work in progress so being able to track changes is important to me as I go along. I also know that I will not be working alone forever and being able to work on a codebase with other people is a very BIG part of being a developer from what I've seen so learning these version control skills before the time to collaborate comes seems like the move.

After I configured these environments, I took some time to refresh my knowledge of general terminal commands as well as git specific ones which I will review in a separate post.

The next step is going to be to design the damn thing so this will be my last post about version control for a while but we WILL be back shortly when I start to code my design:)

Sev to Dev: My Journey Into Tech

Sev — Sun, 15 Nov 2020 17:14:14 +0000

Hello!
My name is Sev and I'm going to be building my portfolio site from scratch and documenting the process.

First a little about me:
I went to a small private art college for music before dropping out and entering the retail/barista workforce. Thanks to my own natural curiosity and the freaking MIRACLE of online learning I started to teach myself to code on and off for the last couple of years. I managed to create a position at my current company (a small wine and spirits brand in San Francisco) that involves a little coding, content creation, and video and design work in addition to website admin, blogging, and online order fulfillment. I love the creative/tech aspects of the job.

It's become increasingly clear to me that my skills are valuable and with a little focus, I know I can do something really cool.

My goals of documenting my journey:

Create portfolio that can showcase my many skillsets and projects.
Show my work and engage with community. I'd like to meet more creatives like me.
Get better at articulating myself. I want to be able to confidently talk about what I know. And, as I'm sure you're aware of by now, writing isn't my thing. lol. Looking at this as an opportunity to stretch that muscle as well.
Either get a job that involves even more of the stuff I love to do or do freelance work.

Feeling very excited for this endeavor. See you soon!