Peter is a developer, new to the business, who's skills are unmatched by anyone I've worked with in my career. I've watched him be given task after task, and tackle each one in a different way. So when he told me he wanted to create a portfolio of his work, I knew there was nothing I could think of that he couldn't do. So we truly created magic.
Before beginning any design work, we wanted to set the stage as to what this portfolio should look like. We first detailed who would be the demographic for this portfolio, and it's purpose. On one hand, this portfolio was meant to show-off work, structure hierarchy of information easily, and be easy to navigate. On the other hand, the portfolio itself was meant to stand as it's own portfolio piece, especially seeing that it is being created by a designer and developer. Once we specified demographic we began our research on trends.
1. The Wave Trend
A trend we almost immediately noticed was this "wave trend" sweeping across many landing pages of websites and portfolios. We even noticed many options for interactions with wave features on many well-known websites like the navigation on the career page of ZocDoc, and background image placement in Twine.
2. Horizontal Scrolling
Horizontal scrolling is probably one of the finer things of mobile applications. The human thumb is capable of a lot, and the way we've implemented multiple directions of scrolling on our phones, it's almost as if we evolved just for that purpose (I used to say this about the GameBoy before my designing career). To bring some innovation to the landing page of the portfolio, we wanted to incorporate some kind of horizontal scroll as well as some direct interaction a user can take once entering the portfolio.
Designers love shadows, and with Sketch being such a popular tool and helping to make depth the easiest it's been to implement since Illustrators laggy shadowing tool, it's everywhere. But just because depth is everywhere, it doesn't mean it's old news. We live in a 4D world and we like things rounded and slightly realistic (save for uncanny valley syndrome when hyperrealism was in and everyone was trying too hard).
Everything you do leaves remnants of either you, your personality, or your style. To help shape Peters brand we wanted to make sure everything "felt" like Peter. From pantone, to typography; From funny-but-informative-verbiage, to the amount of shadow and depth used.
I've had this Tiempos Headline font in my arsenal for a while waiting for the right moment to break it out, but once I wrote "Hi, I'm Peter!" on that Sketch artboard it was game over. Those thick serifs contrasting with the waves in the background felt like such a nice touch. Accompanying it with a secondary sans-serif font that reciprocated the waves shadows brought the whole thing together, and really helped with the flow of the verbiage.
The majority of the website was created to follow a depth-by-shadow aesthetic. We found it visually appealing to contrast the muted colors of the sites foregrounds and backgrounds with vibrant hues that borrowed elements of pastel pantones.
Due to the size of the project, I found it an excellent time to try and implement my learnings from Atomic Design. Atomic Design is a concept of design that compares the smallest of UI elements or components to atoms. In this example, aspects including color, text, and shadow depth would be considered atoms. Combining these smaller atoms creates molecules, which are larger design components created by grouping the smaller components into assets like text input, and buttons. The specific layout of the molecules on a page are considered organisms. By grouping smaller design elements like atoms into larger organisms, we are able to expedite newer pages on both the design end, and the development end of things.
We examined multiple users experiences while using the website across multiple devices. It was found that on phone screens there was an issue when using the parallax scrolling where the user would accidentally pull the page and be taken back to the prior page. To correct this we listed out all works vertically, with a pulse touch upon scrolling. Another more minor issue was found on screens larger that 2500 pixels, where the parallax scrolling feature wasn't as visually appealing, so the sites "snake" was replaced by a two column vertical display that still proved to be visually appealing.
After solidifying the layout and style, the pages started to create themselves. This also helped the development side of things to prep code and research for expected things to come. Working so closely with a developer, I learned the importance of transparency, and how harmful it can be to the sprint of things when unsolicited changes are made or when too many style guides are implemented and/or changing between pages.
This project is currently in development. If you want to be notified on it's completion, or are interested in beta testing the project for feedback and critique, leave a comment below.
This case study strictly details the research and branding research done for CodePeter, and does not detail my finalized work for the site. To learn more about the final version of the website and identity of CodePeter, click here.