Ali SpittelI've gotten asked a couple times when showing people my portfolio site what my design process is. Up until this week, I would (truthfully) say I didn't have one. I would just code and then tweak my site until it looked the way I wanted it to. This week, I decided that I should at least try to use a design software when I prototype sites instead of just winging it. A lot of designers I know use Sketch, so I decided that was the way to go!
I hadn't used any design software before, other than Inkscape for SVG editing, but the interface was very intuitive. I didn't have many issues getting started. I did play through a few of the YouTube Sketch tutorials by LevelUpTutorials on 2x speed to familiarize myself with the UI, but other than that it was mostly trial and error.
Full disclaimer, I actually wrote a resume in Sketch earlier this week, but I feel weird using that as my "final project". Instead, I built three prototype websites for what my blog could look like if I made a website for it!
The Final Project
The first step I took was to create an artboard using the insert button on the top left. I used the desktop option so that I would have a standard webpage to work with. You can create artboards of various sizes and shapes in order to fit your needs! I used a standard paper-sized one for my resume! I also set the backgrounds to white so that when I download the artboards the background downloads as well.
Next, I added shapes and text to the board. On the right-hand side, you can edit features of them -- like font, color, and opacity. I love this because you can align things down to the pixel! You can type in the pixels directly if needed rather than having to drag the item until it is in the perfect location. One helpful hint here for dragging, though, if you want the items to snap into location in a smaller unit, zoom in! It makes dragging a lot easier!
You can also group items so that you can edit them together. For example, I would put all header items into a group so that if I wanted to move the whole header I could do so.
In order to get the fonts that I normally use in my code, I installed them onto my computer using the Font Book that comes pre-installed on Mac's. I just clicked the download button on Google Fonts, then downloaded them. I didn't end up using icons for this project, but if I did I would have used these icons as images in my designs. I also used Hipster Ipsum for my article bodies!
Now let's get on to the prototypes!
My design style is relatively minimalist with some bold detailing. The first design has a bold header with graphic gold hexagons on it. It uses mostly Montserrat font mixed with some Playfair for headings. I also made a sidebar that repeated the hexagonal detailing. I really like the graphic details, and I think the final look is simple but still visually interesting.
For the next one, I wanted to challenge myself to add images from my projects. This is somewhat difficult since the posts have different color-schemes and have differently sized details. I decided to add in longer images that would usually be of the header of the site. The images turned out to be a little bit stretched out, but that could be easily improved in production! I also added some "millenial pink" polka-dot details to make the site more interesting! I think in the long run, the images would be difficult and impractical, but I do like the way this design looks as well!
The third, and probably my favorite, design is based on my personal site. I have a similar header with multi-colored text. This was kind of a pain to build in Sketch because I had to create a textbox for each letter. It's also annoying to do in CSS, though, so that definitely isn't Sketch specific! I also added different shapes to the sidebar to mimic the shape background I have on my site! My resume also follows the same theme, so I thought it would be kind of cool to have all of my main landing points cohesive! I really like the bright colors combined with minimalism elsewhere.
Next Steps
I really liked using Sketch to prototype! I think it was fun to be able to design so quickly, and it made the aesthetic more cohesive. I think I will keep using it moving forward, and I will be interested to see how it helps me write my frontend code!
Part of my On Learning New Things Series
