Website Style Guide
David Heckhoff Portfolio Website
Intent
The intent of this website is to clearly show David Heckhoff’s skillset as a developer, his creativity, and his creations.
Voice
The voice of this website is conversational, friendly, and straightforward.
Tone
The tone of this website is pretty consistent throughout the whole site–concise and casual. The Home, Work, and Contact pages all use very little text with a friendly tone. However, on the About page, the tone becomes more informational and formal, as David describes himself in a third-person point-of-view.
Brand
David’s brand is creative, technological, and amiable. It is consistent throughout the whole website. On the Home page is a 3D rendering of David himself in a room. When you first open the website, the model smiles and waves at you before going on his PC and presumably working, giving the viewers a sense of being welcomed. You can also enable sound to hear music, the scrolling of his mouse, and the typing sound, which makes the website immersive, appealing, and creative.
On the About page, David’s model is inside a cylindrical specimen tank, as if it is analyzing David. Moreover, the text is formatted as a character data sheet, allowing viewers to see David’s skill set clearly. This page emphasizes the technological aspect of David’s brand.
On the Work page, the layout becomes simpler, allowing viewers to focus more on the content–his works. He uses very little text–using tags to show what he used to create each work and a short sentence to describe what each work is about–allowing viewers to clearly and quickly look through his portfolio.
Finally, on the Contact page, David’s model returns to fade out and shows a picture of what David looks like in real life. By doing so, David creatively shows his real face without disrupting the flow of his website.
Furthermore, on the Home, About, and Contact pages, the 3D models move slightly by moving the cursor, making the website also interactive. This is further emphasized on the Home and About page, where there are some items that you can click on to interact with, such as clicking on the speaker to turn on and off the music or on a button to switch on and off a screen. Overall, David’s website offers an interactive, immersive, and fun experience that accents his technological skill sets and creativity.
3 Personas
Persona 1: Jimmy Moore
Jimmy Moore is a 12-year-old Middle Schooler who loves playing video games. His favorite game is Pokemon, and he has been using the official Pokemon website when needing a Pokedex (a collection of all the Pokemons and their stats). Recently, his friend, who also plays Pokemon, introduced him to another Pokedex website that is easier to use and more visually appealing than the official one. This Pokedex shows all the stats color-coded, and the best part is that the images of each Pokemon are pixelated and moving, looking exactly like the game. He becomes curious as to who the creator of this website is and finds out that it is David Heckhoff. He decides to explore David’s other works to see if there is anything else that he would be interested in and visits David’s portfolio website.
Home Page
Immediately, he is surprised by the 3D model waving at him through the screen. He finds it cool how this isn’t even a video or a game, but the 3D model is moving around. He gets shocked another time when he moves his cursor and the 3D models shift with it. He is now completely engaged and interested in the website.
About Page
Another set of 3D models appear and Jimmy is getting more excited as the About page has a sci-fi theme to it. In the beginning, he wasn’t interested in exploring any other information except for David’s works, but due to the appealing layout of the About page, he reads through David’s biography and skillset. He finds it easy scrolling through all the information.
Work Page
Finally reaching the Work page, Jimmy is excited to see if there is anything interesting that David made other than the Pokedex. He scrolls through the different works, but is disappointed as he doesn’t find anything else that looks intriguing.
Contact Page
Jimmy scrolls down to the Contact page, finds David’s social media account, and clicks on the link to follow him.
Overall, even though Jimmy wasn’t able to find any other interesting works, because of David’s Pokedex and his unique and creative website, Jimmy decides to follow David on X to see David’s future works.
Persona 2: Michelle Baker
Michelle Baker is a job recruiter for Swish, a web development firm specializing in creating unique websites and apps for clients. Currently, they are seeking a new creative developer to join the company. Michelle accesses LinkedIn to look for possible candidates for this position. After looking through many profiles, she is tired of looking at the same boring portfolios that all use a very basic format. With not much hope, she goes onto David’s portfolio website.
Home Page
Immediately Michelle is intrigued by David’s portfolio website as it is not using a basic layout. The 3D models look well-polished and the interactive elements clearly show his ability as a web developer.
About Page
The About page is also very well made, and Michelle notes David’s creativity in making the About page look like a specimen analysis. Through the status bars, Michelle is clearly able to see David’s skills. There is very little text about David, so Michelle would like to know more about him—how and why he became a developer.
Work Page
The layout of this page makes it easy for Michelle to navigate between the different works and with the tags, she is able to easily know what programs David used to create them. However, each work only has a one-sentence brief explanation, which makes it hard for Michelle to deeply review them.
Contact Page
The Contact page doesn’t really interest Michelle, as she came to this website from David’s LinkedIn.
Overall, pleased by the creative and interactive portfolio website, Michelle is willing to ask David for the job offer. However, because of the lack of information on the website, it is hard for her to be certain that David would fit the job. So, with the job description, she requests David to send a detailed CV on LinkedIn.
Persona 3: Sue Lee
Sue Lee is a university student majoring in web development. Her favorite developer is Bruno Simon, and she recently started learning Three.js, an engine used to create 3D models for the web created by Bruno. While browsing through X, she sees a post from Bruno congratulating David’s website, which was made with Three.js. Curious on how the website looks, Sue visits David’s website.
Home Page
Immediately, she falls in love with the 3D models David created—the character that is working on his computer, the computer screen, the speaker, etc. When she realizes she can click on the speaker, she starts to press on all the objects to see which ones she can interact with.
About Page
When she scrolls down to the About page, she loves how the 3D character model from the Home page goes down to the About page to be ‘analyzed’ in the specimen tank. It’s very creative and the transition is flawless. She doesn’t care much about the text so she just skims through it.
Work Page
The Work page looks basic, so she just skims through some of David’s works, but nothing interests her.
Contact Page
She wasn’t expecting much from the Contact page, but was positively surprised when she saw that same 3D character model again. She really liked how the 3D character faded out and showed a photo of David.
Overall, Sue was pleased by the website and its usage of Three.js to create very creative models and interactive elements. She felt inspired and noted down some of her favorite parts of the website for future reference.
Wireframe
Home Page
About Page
Work Page
Contact Page
Copy Deck - Home Page
Title: Home
Headline: Hi, my name is David.
Subheading: I love creating beautiful user experiences.
Navigation Button Text: Get in touch
Drop-down Menu Categories
Drop-down Menu Footer: Music produced by HM Surf
Competition
This website stands out by being more unique and creative compared to other development portfolio websites. By using 3D modeling, the website offers an interactive, immersive, and appealing experience to the viewer. This makes the website much more enjoyable and showcases David’s web-developing skills. As creating 3D models and animating them takes a lot of time, most developers don’t use such methods on their websites; instead, they use static designs. By having some motion on the website, David creates an original portfolio. The voice of his website is also very casual, showcasing himself as a friendly person.
Because David’s website is so creatively focused, the experience is very amusing, but it lacks some essential information compared to other portfolio websites packed with text. I think David’s website would improve if it showcased more of what he did for each of his works and showed some of the process. It would be better if each of his works could be clicked on to show more information and images.