What Say You, Documentation?!
DGM 2271 — otherwise known as Digital Media Design 1 — was the first course in which I created an over-2o-page extensive Web Design document containing a concept model, personas, Web hierarchy, responsive design, and more. It was known as the dreaded Validation and Design Guide. OooOooOo, scary, right? Well, as it turned out, it wasn’t quite as daunting as it first seemed.
For my Validation and Design Guide, I chose to create a personal portfolio website, as I felt that creating a personal portfolio website concept would engage me to begin thinking about an actual portfolio and what I could possibly include within one.
After the first few weeks of preparation for beginning the Validation and Design Guide, we began our creative venture by creating a concept model. So what exactly is a concept model? A concept model represents abstract concepts that are important to users and stakeholders, and serves as a meaningful landmark that offers insight into the underlying structure of your website. If it sounds confusing, that’s because it is, and at the time, it was something that I had never done before, hence making it the most difficult part of the entire guide.
While the creation of the concept model was difficult, it did help me to step outside of my comfort zone and deeply think about what I wanted my website to portray and include. It allowed me to place my thoughts onto the paper in a way that was abstract, but linkable among the various parts of the concept model. The concept model also eventually ended up helping me during the persona creation process that came next.
After the creation of a concept model, we began to develop Personas, which were a completely new concept to me at the time I was taking the course. I wasn’t quite sure on what was to be included within the personas, but after a bit of research, I was able to create personas that not only had a personal story, but specific goals, pain points, and behaviors. Definitely a step up from my know-nothingness about personas.
What was perhaps most helpful about the creation of these personas was that these personas allowed me to produce the content that I needed in the next phase of the Validation and Design Guide process, which was a site map.
After the creation of the personas and site map, what I consider the most fun part of the Validation and Design Guide began: the design and layout of the website we were to conceptualize.
The first step was sketching out wireframes. We not only had to create wireframes for a desktop device, but we also had to create wireframes for both mobile and tablet devices. This type of design process is known as responsive design. This responsive wireframe creation was challenging due to the fact that we had to place all the content that we planned for within three different sizes, all while making sure the overall design had a consistent look and feel.
After the wireframe sketching process, we then had to create a grid system that would be adapted to the three different screen sizes that we were designing for. The creation of this grid system gave me a much better understanding of the general dimensions involved with responsive Web design.
After the creation of the grid system came the creation of low-fidelity wireframes. My goal behind these low-fidelity wireframes was to make use of the grid system that I had decided to use in order to properly lay out the website with appropriate scale. I also wanted the low-fidelity wireframes to provide a simple-but-effective visualization of what the final product would eventually end up looking like. Throughout this process of working with the grid, I began to understand that the grid is an invaluable tool for Web design in that it truly helps your designs to feel more unified and consistent across different devices.
Then, finally, came the high-fidelity surface comp of my personal portfolio website and the creation of prototypes for the desktop, tablet, and mobile designs. This is where everything that we had done throughout the semester finally came into fruition. Throughout this course, I learned quite a bit about InDesign, concept model creation, wireframe creation and sketching, the grid system, and personas. I must say that having not known much about the extensive process of creating a Website from the beginning of the course, to putting it all into practice until the bittersweet end… I definitely made a great leap towards improving myself as a student and designer.
You can check out the three different prototypes I created below:
John Toral is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (Validation and Design Guide) in the (DGM 2271 Course) and is representative of the skills learned.
