Wireframes

VIEW MORE

Requirements/Project’s Goals

This project’s goal was to take the first step in planning our future website to fully code. To begin that process, we needed to create a purpose for our website, and I decided to make a portfolio site to use an example itself of work I have done. With that purpose in mind, we proceeded to create wireframes. The wireframes came together in steps. For every site design, you must consider your target market, the “feel” you want to convey with your site, and any goals you have for the website. With these topics considered, we proceeded to sketch our ideas for each section of the website. After those sketches were completed, our digital wireframe and wireframe were created based off those sketches. The purpose of this project was to get us thinking about how the site would be designed and coded in the future.

Inspirations

I had researched many portfolio and advertising companies’ sites in order to find inspiration. I knew to be a successful advertising company, you had to have a website that was not only interactive, but the site was unique in its design. Therefore, I found these following sites as inspiration. Their incorporation of interactivity, such as hover effects and animations, allowed me to use them as goals for my website. I did not want a static site, so I considered the ways they let their users connect with their sites. I also used their simple and modern feel as a main theme for my site.

Targeted Audience

The target audience is potential clients as well as future employers. I wanted a site that conveyed my style to both audiences because they need to see how I design before they decide to work with me. I think it is essential to get a strong sense of someone’s design style to make sure you are paired with the right partner to get a job done to its best. Therefore, I wanted to use my site to target these audiences group to accurately reflect my preferred style.

Skills/Techniques/Programs used

I used Adobe Illustrator, Adobe Photoshop, and Adobe InDesign for each step of the project. While the wireframes and sitemap were created in the graphic software, I was able to compile and design a document on InDesign to present my project in a cohesive design. I used a lot of graphic design elements I had learned in previous courses in this program in order to build the wireframes from scratch rather than use a wireframe or sitemap generator.

Design/Coding Stages/Steps

My original thought process when researching for inspiration was to find websites that had videos as their main page. I knew from the start I wanted to have a video of Nashville’s skyline to depict where I live and work. This city has creative inspiration every day, so I wanted it as a main theme of my site. Therefore, I started my sketches there, and then the other pages’ design began to play off of the city and urban feel.

Favorite Aspect of Project

I loved this project because it tied together a lot of marketing methods that I had learned in undergraduate, and I was able to create a wireframe with those learned methods in mind. I also loved seeing my various courses’ teachings from the WDOC program come together in this one project. I was able to use multiple programs in Adobe Creative Suite to complete this project, and I think know those prior helped me create a better, more detailed wireframe.

What did you learn while completing this Project?

I learned that wireframes are all about adaptation. Your wireframe maybe a starting point that helps other ideas flow from this initial site layout. I found it a very useful tool in organizing my thoughts and design ideas, and then I converted those into a visual representation of my thoughts. It is a great tool for finding a starting point for a project with multiple parts.

WANT TO BE A PART OF SOMETHING CREATIVE?

GET MORE INFO.