Killer Documentation
How I designed my own website and documented the entire thing.
Before my time in Digital Media Design 1 I had no experience with inDesign. This fact made this class all the more challenging. After a little bit of introduction to the software and learning a few key design principles, I was introduced to the idea of creating a website design document — a design and validation guide. View the full document here
I chose to create a design and validation guide on a personal portfolio website. I thought by doing this I would be able to fully express my creative ideas and personalize the style and theme of my website. This theme and style would also be transferred to the design guide, to keep everything consistent.
I kicked off my website by creating a concept model surrounding the ideas, goals, and target users of my website. This was something I had never done before — and I think it showed in my concept model. This was by far the hardest part of the entire project, not the idea part, the linking ideas together part.
The ideas easily flowed and I had a vision of what I wanted in my head, but when I had to flesh everything out in the planning stage, it was harder than I expected. But looking back, this planning and linking phase helped me solidify my ideas, and sort out the good/tangible from the bad. This also helped me come up with the specific pages and content I wanted to include in my website, as well as the personas I was designing the website for.
Personas were also new to me at this time. I had only heard about them in the other class (DGM 2240) I was taking that same semester. I didn’t quite know how what to include and consider when creating a story for them. After a few different attempts, and a some constructive criticism from my professor I was able to come up with round personas that had specific needs that my website could meet. Including some technology and life stats, their personal characteristics, a short story, and a quote describing their needs and objectives.
By creating these personas it allowed me to come up with what specific content I needed to include in my website to suit their needs and keep them interested. By putting faces and “people” to ideas made things easier to understand and visualize when thinking about user needs.
Keeping the personas in mind I began the physical planning of my site, first starting with a sticky note hierarchy of what I wanted to include in the navigation as well as the content, then adapting that into a site map.
From there the real fun began, the actual layout of the website. I sketched out the wireframes for my website, in a desktop version, tablet version, and mobile phone version. It was a little bit of a challenge to keep everything consistent when switching the layout for devices, making sure all the same content was included and presented in a good way. There was a lot of sketching for this project, which I was new to. I had sketched and drawn things for art classes, or for artistic reasons, but never to lay things out on a website. In my mind they are more like blueprint sketches. I would like to say that my sketching skills have greatly improved since this particular project.
As I began different phases of the project I had to document everything I was thinking, and explain my design reasoning in a validation guide. This was frustrating at times, because for certain things I couldn’t explain my reasoning for doing stuff. But in the long run it really helped me solidify my design with good ideas, and get rid of things that I didn’t actually need. It helped keep everything organized, and if I were to show this to a client, they would be able to follow along and understand what I was doing. The explanation process of the guide also helped me plan out exactly what I wanted everything to do on my site, it also helped me to be better at explaining my ideas and established better planning on my part.
After the sketches I created a high fidelity mock up design, which had a sharp learning curve for myself. (Seriously I had never done most of the stuff we did for this project before)
I didn’t understand how to design on a grid the first time around, but after a little bit of review, I went back and changed a few things so that my designs would be consistent and fit on a grid. Designing on a grid keeps the work inline and maintains consistency throughout the different devices, as well as makes the site look clean.
Finally I began to design the website. This was the best part of the whole project, it allowed me to be creative and express my own personal style through my designs. It really made all of the pages and different device layouts flow together because they all had the same style and feel to them. Along with a color pallet and font book so that it could stay consistent, and if others were looking at the site, they would know what colors, and fonts to use.
Once all the screen assets were created and documented I put them into an Invision project and turned each device into a prototype version.
Desktop version: https://invis.io/A89N90J57
Tablet version: https://invis.io/HC9NAIBXJ
Mobile version: https://invis.io/FV9NFXYZS
From starting out completely new to everything to creating three prototypes and a professional design document. I learned so many new things during the process of this project, how to use inDesign, how to create wireframes, concept models, and how to document all of it. All of these skills helped me design better, and become better at planning out my projects with what kind of content I want it to include. This made me all the more excited to create more things and learn how to navigate through different software. I am proud of the work I created through this project, and the skills I gained have been incorporated into my current projects and work.
Brittany Keller is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (Design Validation Guide) in the (DGM 2250 Course) and representative of the skills learned.
