I’ve got a friend who will be attending the Fullstack Developer Bootcamp in two weeks. So to congratulate him and to practice design dark interfaces, I created a concept for his page. He’s a coffee snob and needs practice coding in Bootstrap so here is my Day three submission. A one-pager design.
It is 1366px wide, built on a 12 column layout, where the images cover up the entire screen. It has a sticky global nav bar and the links change as you scroll down. It was a quick 45min mockup.
Decided to start playing around with the design of icons for Trainer By Sport. Instead of using a drop down of words, I wanted to use as many icons throughout the app as possible.
Creation of icons is a design practice within itself. You need to understand how to balance negative and positive space. The soccer ball proved a hassle. The lines where too frail or too thick, with a solid background, making the patches and stitches negative space. There wasn’t even a border at first.
The rules I learned in storyboard and product design then came into play. Use of thick lines around the edge of an item definitely made the soccer ball pop, I switched the roles so that the outline, patches and stitches where made of positive space.
Now the set, the football not being round was tricky to size. Too small and it looks well…too small. Too big it looks strange since it is not at all as tall as the football/soccer ball in reality.
Mad props to anyone who makes icons for a living!
Made in Illustrator.
I then brought the icons into Photoshop and was initially going to make them some bright color but turning them into an overlay and picking up on the texture of the background was dope. A nice touch to bring out the grunginess.
I added some states of the icon selection process and created a dropdown.
I admit it, up until this project I equated goal-directed design/user-centered design to designing for the perfect outcome. From paper wireframes to clickable prototypes my focus was on the goal of the user and how to help them achieve those goals as quickly as possible. Designing for an “in a perfect world” scenario.
Rarely is the world “perfect”. I created a beautiful mobile interface for OvationTix clients. Using one of our more sensible clients to design the interface around. When I should have designed for the “less sensible”. Continue reading →