Carbine Design. Carbine Design. Validation and Design Guide

Transcription

1 Carbine Design Validation and Design Guide

2 Persona JDAssistant Manager, Web Design Company JD is a 9-year-old assistant manager for a web design company, who has been assigned with hiring their new developers. He has been at the current company for eight months, and works hard to impress his superiors. As Assistant Manger, he is also in charge of the rest of the workforce, so he doesn t have a lot of time on his hands to go through résumé after résumé, so he wants whoever he hires to really wow him with their work, and is looking to make his superiors proud with the new hire he picks to join the team. JD graduated from the University of Utah with a BA in Communications, and got married the same year. His wife just had a baby last month, so he wants to spend as much time as he can with them, while still devoting all the time necessary to his position. While an excellent Assistant Manager, JD does not know very much about web development. However, he does have an excellent eye for design. He stays up-to-date on all the latest design trends in order to be able to confirm the quality of his employee s work. When looking for new hires, he tends to look more on the design side of things, opting to go into further detail regarding development skills in the interview, when he can have a developer sit in with him. He doesn t care much about someone s work experience - he cares about the examples of their work that they have in thie portfolio. He doesn t do much more than skim briefly the résumés when they come into his office before checking their portfolio. Time Design Importance Development Portfolio Experience Persona Alex Hines Professor, Utah Valley University Alex is a 8-year-old professor in the DGM department of Utah Valley University. He is a new professor, with limited experience in the field. He is still getting the hang of being a professor, but does a good job of informing his students and making sure they acheive the high standards he sets for them. He is one of the professors that will be reviewing portfolios and advancing students into their DGM track, so all students will have to pass through him before being accepted into their track. Alex graduated from NYU in 00 with a Bachellors in Digital Media, and later obtained a Masters from Utah State University after moving to Utah in 00 with his wife and five kids. He began for a local company called Business Promotion from 00 to 0, when he was offered a position at Utah Valley Unvierstiy as a professor. Often times he is overworked and tired from taking care of his kids and he does t have as much time to go over assignments or portfolios as he would like, so things have to be organized and easy to understand. Alex is very particular with how things look, and focuses on the details. He wants all projects to be up to industry standards. It is important to check your spelling, your layout and everything before giving him anything, because he will make sure you are aware of all defects in his pursuit of perfection from his students. Time Design Importance Development Portfolio Experience JD s use of carbinedesign.com: Alex s use of carbinedesign.com: Looking over Jeff s portfolio Browsing the site to obtain vital information regarding Jeff s abilities as a web designer and developer Verify Jeff s design capabilities against current design standards Inspecting the elements on Jeff s site to verify that it is built correctly, running the site past a developer before inviting him to an interview. Testing the site in various devices: desktop, tablet & mobile Testing the site on multiple browsers to make sure it runs correctly on all main browsers Verify all the work presented on the site is original and everything used is licensed or original. Accepting Jeff s portfolio into UVU s Internet Technology track. Vieiwng carbinedesign.com as a part of the portfolio, verifying that it works on all platforms and is built to modern web design standards. Referring Jeff as a candidate for internships to companies and organizations.

3 Persona Estefania Alazar Potential Client Java- Script Print CSS HTML PHP web graphics Qualities Education Work Exp. Abilities Phone Concept Model Digital audio portfolio résumé about contact Estefania is a General Dentist in Draper, Utah. She is a Doctor of Medical Dentistry and received her Doctorates from Oregon State University. She married her boyfriend of five years after receiving her Doctorates and moved back to Utah where she was raised. She opened her practice one year ago, and is finding that her practice is seeing less patients than other dentists in her area, and wants to boost her practice s business. When Googling her practice s name, as well as General Dentistry in her area she discovered that her practice doesn t even show up. She is looking for someone to build her a website and market her website for her. She wants to get her practice on the first page of Google and is willing to pay what is needed to get that result. Time Design Importance Development Portfolio Experience Producing Editing video features want to see want to see want to see need to be impressed by want to know will want to will want to potential clients Estefania doesn t care too much about the design of her site, as long as it looks professional. She wants someone experienced, and she has the time to track that person down. The most important thing for her is that visitors to her site feel that she is a professional General Dentist and that they will recieve the best service at her practice. She has put a lot of time and money into her career and her practice, and will not be happy if her site does not perform to the level that she expects it to. Estafania s use of jeffcarbine.com: jeffcarbine.com website goals target audience will help me to potential employers uvu dgm department Viewing carbinedesign.com as an example of the kind of site that Carbine Design can build. Viewing other websites and logos in Carbine Design s portfolio to see if it will be a good match for her needs. Reading reviews of Carbine Design on Facebook and other third-party sites before making her decision. Reviewing Carbine Design s résumé to see all the experience Jeff has building and marketing websites. Contacting Carbine Design to contract a website. graduate make large sums of money will help me to

4 Post-It Notes Sitemap Main Navigation Carbine Design Main Page Freelance Portfolio Resume Contact About Me Services Web My Resume Contact Info Pricing Graphics Video By jotting down concepts and ideas for my website and grouping them, I was able to get a better idea of what I needed to do in order to built my site. The color groups (orange for design, purple for functionality, green for my portfolio and blue for my résumé) I was able to identify that I (obviously) thought more about the design and development of my site than I did about the actual content that will go in it. I had to stretch a bit in order to get the information out for my portfolio and my résumé, which will both be the main focuses of my website. This grouping exercise helped me to get out in the open all of the things that I plan on doing, so I can set up a concise plan for building my site while not overlooking any important aspects or features that my site needs. It also allowed me to think more abstractly and creatively, thinking about things that I hadn t thought of before - for example, one of the green post-its says Display code live? - an idea that I should display the source code alongside my scripts so that they can see exactly how they work without having to inspect element. With my ideas fleshed out in this way, I am more prepared to get into the planning stages for my site. Audio Animation My plan for the website is to keep it simple. I want to try to keep my users from being required to navigate multiple pages in order to access my content. For both the Freelance and the Portfolio section, each of the options will be present in the menu, but once navigating the page, users will be able to access each section without reloading the page. I believe that by keeping users from having to load additional pages I will reduce frustration and confusion on the site, and I will promote my ability as an intelligent and capable web developer.

5 Site Sketch Wireframes These wireframes show the simplistic, flat design that I want to implement on my website. This design, in it s simplicity, will help to make my website adjust seamlessly to both tablet and mobile devices. There are several important sections that will adjust responsively, and they are labeled as follows:. Logo - the same logo will be used for the desktop and tablet design, but will change over to a slightly different logo when on mobile.. Navigation - the navigation will reduce to a hamburger button when on tablet and mobile, so that it is more accessible for touch-based devices.. Social - the social media icons will adjust to the most appopriate location - when on mobile, it will sit fixed at the bottom of the screen, and will move when scrolled.. Slideshow/Text - on desktop, the slideshow images and text will be separated, but on tablet and mobile, the text will be superimposed over the image.. Content - the content section will sit below the slideshow image and will adjust to keep the H title in the middle of the screen.. Footer - the footer will adjust slightly from desktop to tablet, and on mobile the dividing line will disappear as well as the second logo. I wish to make my site easily accessible, easy to navigate, and clean no matter what device it is being viewed on. These wireframes help illustrate that concept. It is important that I am able to make an impression on the person visiting my site, regardless of what they are using to view it. The sketch of the site fleshes out the ideas that I have for the website. As you can see, it is based on a very rectengular, flat layout with a very minimalistic feel. This will help me to easily transition this site between desktop computers, tablets and moible phones. It will be built on a -grid system, which will make it easy for me to transfer this sketch to a wireframe, the wireframe to a mockup and the mockup to a live website.

6 Surface Comps In finalizing my design, I decided on a few core design elements: flat UI, hard corners, and minamilistic color choices. This led me to the choices of white, dark grey, light grey, black, and green. I also finalized my font choice, settling on the Roboto font family, namely Roboto Thin. With these elements placed together, my site has the flow and appearance that I want - it is clean, easy to understand, responsive and reflects my sense of design, which is important being my website. There are several key points that are reflected across all three displays of my site:. Logo - from the wireframes to the surface comps, I decided to stick to one layout for the logo, with Carbine Design to the right of the image instead of below it. This is reflected on all devices.. Navigation - The navigation is a simple white text on grey background, which makes it stand out, but not distract. It is my intention to have the navigation fixed with the screen scrolling below it.. Social - the social media icons are black on grey, but will highlight their specific color when on mouse over or touch.. Slideshow/Text - the green box containing the slideshow text will become transparent and sit overlapping the slideshow image on the tablet and phone view. The breadcrumbs will disappear on mobile as well.. Content - Content is black on off-white, to make it stand out, while being very minimalistic and easy to read.. Footer - the footer shares the same green color as the slideshow box, this differentiates it from the header and the body, and gives the site additional color and pop. With my site designed in this fashion, visitors will be able to find what they want quickly, it will be easy for even the most unfamiliarized of visitors, and will meet all of the site s goals. It is efficient, elegant and practical.

7

8 Color Guide Font Guide Roboto Light Roboto Regular Roboto Light Italic

9 Photoshop Layers Conclusion The organization of my Photoshop Layers was divided into the four main sections of my site: Header, Slideshow, Body, and Footer. Each of the assets for the different sections were divided into their respective folders, making it easy for me to move assets around and entire sections around when copying the.psd file for the tablet and mobile surface comps. This Validation & Design Guide that I completed for my website, Carbine Design, has helped me incredibly to focus my website on it s purpose. Now, with all the work that I have done this last semester, my website will be more effective, more specific and will look all-around more professional. I am very content with the way the Surface Comps turned out, and even more content knowing that my website is going to work just the way I have planned it. When I stopped designing and developing my the seat of my pants and started planning like I have done with this guide, I began understanding the different nuances of web design and why certain websites look and run the way they do. I have grown and developed as a web designer and developer as a result of this guide and my abilities to design and develop have have become stronger and more effective.