Portfolio. Shirley Page Digital Design

Size: px

Start display at page:

Download "Portfolio. Shirley Page Digital Design"

Bruno Nicholson
6 years ago
Views:

1 Portfolio Shirley Page Digital Design

2 Contents Contents Personas Content Manager 4 Content Designer 5 Editor-In-Chief 6 Concept Map Hand Drawn 8 Digital 9 Sticky Notes Notes on Wall 11 Site Map Site Map 13 Wireframes Desktop 17 Tablet 18 Mobile 19 Surface Comps Desktop 21 Tablet 22 Mobile 23 Colors & Texture 24 Typeface & Font 24 Sketches Tablet, Mobile, & Desktop 15 2

3 Personas 3

4 Personas Content Manager Chad I trust English majors from UVU before Marketing majors from BYU. Highly Desirable Skills Sought After Age: 26 Location: Provo Education: BA-UVU Job Title: Content Manager Employment: Wallarroo, Inc. Salary: $53,000 Chad is a major executive at a young company in the new and upcoming field of digital marketing. Chad got his start working for the start-up as an intern while finishing his bachelor s degree in Literary Studies at Utah Valley University. He was hired on as the content writer after he graduated from UVU and gained his current standing as the company grew in size. Wallarroo is a digital marketing company that specializes in creating digital materials for businesses and executives. These marketing material include websites, digital adds, and other materials created for digital and print publication. Part of the Chad s job is to track SEO for websites designed and built by Wallarroo. Chad enjoys reading, spending time outdoors, and riding his bike. He also likes the relaxed dress code at Wallarroo where he can wear a t-shirt, jeans, and a ball cap. He is also the current company foose ball champion. Less Desirable Knowledge of Writing Roles and Skills in Company Confidence Web Writing Ad Writing Use of Jargon Web Design Ad Design SEO Content Writer Public Relations Account Rep Situational Awareness Decision Making Goals Looking for skilled writers as interns and employees Build good writing team for SEO tracking Continue to bring in new clients and build the company Create a fun and relaxed environment for free flowing ideas Would like to move into more design aspect of company Questions What kink of a writer are you? Do you know HTML and CSS? What other design skills do you have? Can you work independently? Frustrations Marketing majors are not writers Digital Marketing is a fresh field with many competitors Still filling too many roles in company 4

5 Personas Content Designer Malinda I am always looking for bright young people with great writing and design skills. Highly Desirable Skills Sought After Age: 32 Location: Lehi Education: BFA-U of U Job Title: Content Designer Employment: Boostability, Inc. Salary: $56,000 Malinda graduated in Graphic Design from the University of Utah in 2004 and started working as a freelance web designer. She started working at Boostability at the Content Designer in 2013 after building an impressive portfolio. She ended up taking some community writing courses to improve her writing skills and knows the value of have good writers on her design team. Boostability is a company that is leading in SEO development for the web. While this company started small like Wallaroo, Inc., It had grown so large that they have several offices throughout Utah Valley and they are still growing. Malinda enjoys going to museums and art galleries when time and money permit. Otherwise, she spends her free time reading or taking pictures out in nature. Less Desirable Knowledge of Writing Roles and Skills in Company Confidence Web Writing Ad Writing Use of Jargon Web Design Ad Design SEO Content Writer Public Relations Account Rep Situational Awareness Decision Making Goals Looking for skilled writers with design eyes as interns and employees Build design team for SEO and web design Bring fresh ideas and new designs to the company Create a fun and relaxed environment for free flowing ideas Questions What kink of a writer are you? Do you know HTML and CSS? What other design skills do you have? Can you work independently? Frustrations Digital Media majors are good designers, but not good writers Digital Marketing is a fresh field with many competitors Having trouble building a team with strong writing and design skills. 5

Personas Editor-In-Chief Connie Age: 51 Location: Salt Lake City Education: MA-U of U Job Title: Editor-In-Chief Employment: Deseret Book Salary: $63,000 I always love seeing young new editors learn

6 Personas Editor-In-Chief Connie Age: 51 Location: Salt Lake City Education: MA-U of U Job Title: Editor-In-Chief Employment: Deseret Book Salary: $63,000 I always love seeing young new editors learn the ropes of publication and become something great. Connie has worked as an editor for Deseret Book for ten years. Before that, she worked for Walden Books in New York City. She has been an editor for 30 years and did everything from proof reading and typesetting to content editing and book design. Deseret Book has been a leading company in producing and distributing literature for the Latter Day Saint community around the world. They have a high standard and have employed many successful people over the years. The company seeks young people to train in greatness. Connie enjoys reading and spending time with her four children and two grandchildren in her spare time. Family comes first and her career comes second. Highly Desirable Less Desirable Skills Sought After Knowledge of Editing Roles and Skills in Company Confidence Use of Symbols Proof Reading Typesetting People Skills Team Work Proof Reader Good Communication Public Relations Typesetter Situational Awareness Decision Making Goals Seeking skilled writers and editors as interns for the production team. Train interns to develop excellent skill for finding full time work. Continue to grow the company and publish works in more languages to get materials into more countries. Questions What editing classes have you taken? Have you ever typeset a book? What editing experience do you have? Can you work on a team? Frustrations Lack of communication in editing teams Not enough editors are interested in typesetting Not enough time to spend with grandchildren 6

7 Concept Map 7

8 Concept Map Hand Drawn A concept map is similar to a brainstorm, yet very different. It is similar in that it shows how different items and ideas link to each other. It is different in that a concept map is designed to form complete sentences; to explore the needs of participants, customers, or contributers; and to conceptualize the content. A concept map is best created by pencil and paper. This concept map shows all the different things that might show up on a portfolio for an English major. It also shows the different fields of work that potential employers may be in and the different types of jobs in each field. A hand drawn concept map can get rather messy (this one is just that). The green indicates the potential hierarchy and the links to those that will view those links. 8

9 Concept Map SEO Ad Design Editing Copy Writing Includes Includes Laid Back Digital Marketing Publishing Book Design Is Web Design Is Work in Clean Cut Looked at by Portfolio Technical Writing Viewed by Is Potential Employers Write about Concise Consider Showcases Substantive Typesetting Technology Science Posters Web Designs Journal Best Work Includes Blog Writing Samples Editing Samples Proof Reading Published Technical Academic Using Symbols Digital Creating a digital concept map is a great way to clean up and make sense of the hand drawn version and add more bubbles. This version is very similar to the hand drawn version, but with redundant lines removed. It also shows what types of items viewers want to see and what views might be like. The larger bubbles show the most important information and the smallest bubbles are farthest branches of this information. Includes Determined by Resume Grades Use 9

10 Sticky Notes 10

11 Sticky Notes Notes on Wall Post-It notes are a great way to organize information in a way that makes sense. Post- Its are easy to move around, change, and toss without making a mess of the finished product. The purple tulips represent the main items or topics that most likely will be included in a portfolio for a typical English major. The pink daisies represent the types of items that would be included in each topic. They are arranged in a logical order for an English major looking for a typical job in digital marketing but will also work for publishing and other writing or editing jobs. Notice how there are two items that show up in two different topics, Essais and Web. Essais is an on campus journal that I designed, typeset, and proofed for proper punctuation, spacing, and other technical editing; thus it falls into Editing and Design. The links to my web designs also include my own original writing and will make good writing samples. 11

12 Site Map 12

13 Site Map Site Map Landing Page Secondary Navigation About While creating the personas and the concept map, I learned that different types of employers want to see different types of items in a portfolio, even while they all want some of the same items, like writing samples. Because of these different needs, I decided that having different pages to the site would work best so employers can choose what they want to view without asking them to scroll through items they don t need. Design Samples Design Writing Editing The site map shows the landing page of the website, or portfolio, contains documents or links to documents of design, including links to two live web designs, that also serve as the main navigation. It also shows that there is a secondary navigation that links to similar pages with writing and editing samples respectively. Website 1 Website 2 Writing Samples Editing Samples The solid lines indicate direct links to information or separate pages. The dashed show that the related nodes are on the landing page and are already visible. The dotted lines indicate that some of the documents will appear on more than one page. The staked nodes only represent an unknown number of documents that will appear on each page. 13

14 Sketches 14

Sketches Tablet, Mobile, & Desktop Sketches are a good way to develop what a website might look like. Different versions reveal different ways of designing a site and different ideas.

Sketching is also a way to explore the look and feel of a responsive site.

15 Sketches Tablet, Mobile, & Desktop Sketches are a good way to develop what a website might look like. Different versions reveal different ways of designing a site and different ideas. The different versions also reveal different problems with the design. For instance, the desktop sketch here shows how the grid lines do not work well for centering the three text areas. Sketching is also a way to explore the look and feel of a responsive site. These sketches were drawn on paper with 12 grid lines for the desktop and tablet versions and four grid lines for the mobile version using a plain #2 pencil. I only used a stencil to create the circles for the images of each item of the Portfolio. The lines show where text will go and how it will align with the images. It also shows the most possible items and the least possible items that will show up on a page. The only thing that is not shown is the About page. The link to this page is indicated by the arrow. The intention is for the page to slide over the top of the current landing page. I designed it this way because the About page will be different based on the attached landing page. 15

16 Wireframes 16

Wireframes Desktop Wireframes are used to set up the exact placement of the items and text of the website for different platforms like desktop computers, tablets, and mobile phones.

They are also set up on grid lines so that all the items and text on the site line up and are visually pleasing.

17 Wireframes Desktop Wireframes are used to set up the exact placement of the items and text of the website for different platforms like desktop computers, tablets, and mobile phones. They are done on a gray scale to show the different warmths of the intended colors for the website without distracting the design with a lot of color. They are also set up on grid lines so that all the items and text on the site line up and are visually pleasing. The Wireframe for the desktop is designed to be 2000 pixels wide on a twenty-two column grid with the columns seventy pixels wide with a twenty pixel gutter. All of the links are the same dark color including the textual links in the body of the text. The Facebook and LinkedIn buttons in the footer are the same color as the form and the background on the body because they are the same as standard buttons and it can be assumed they are links. 17

18 Wireframes Tablet The wireframe for the tablet is very similar to the desktop version in set up and colors. This wireframe is designed at 1000 pixels wide on a sixteen column grid with the columns forty pixels wide and a twenty pixel gutter. Notice that the items in the header and footer now line up with the body and the links are bigger so they are easier to touch with fingers. Also notice that the main heading is shorter and the Facebook and LinkedIn buttons are placed differently to accommodate the smaller space. 18

Because mobile phones are so much smaller than even tablets, it became necessary for the body items and text to become buttons for easier touchability.

19 Wireframes Mobile The wireframe for the mobile is necessarily different from both the tablet and desktop versions. It is 600 pixels wide on a ten column grid with the columns forty pixels wide and a twenty pixel gutter. Because mobile phones are so much smaller than even tablets, it became necessary for the body items and text to become buttons for easier touchability. The 600 pixel width will work well for mini tablets in a portrait position as well as a phone held in landscape position. The header and footer also look much different because of the small space. The main heading is gone, but the logo and page title are still present in the header. The text in the footer is centered with the Facebook and LinkedIn buttons at the top. The form is also much smaller but still large enough to touch with a finger. Notice that the other wireframes show six items in the body while this one only shows three items. If you look back at the sketches, you will notice that those also show the difference between six or three items on each sketch. This is because by this point in designing the website, we should already know what information will be on each page. 19

20 Surface Comps 20

It can also show changes the site will make when a mouse hovers over an item and show items that will show upon clicking without leaving the page.

21 Surface Comps Desktop Surface Comps are used to show just exactly what the website will look like in it s finished form. A complete surface comp will have all the text in place, show the actual images to be used and give tiles of textures or gradients used in the backgrounds. It can also show changes the site will make when a mouse hovers over an item and show items that will show upon clicking without leaving the page. The surface comp for the desktop version of the website shows all the colors and textures that will be used throughout the website. The arrow in the header leads to the about page, not shown here. The images as well as the item titles will be click-able. This surface comp is specific to the Designs page of the site. 21

Surface Comps Tablet The surface comp for the tablet version of the website shows

It also shows the continuity in the design process.

22 Surface Comps Tablet The surface comp for the tablet version of the website shows all the same colors and textures. It also shows the continuity in the design process. Upon closer inspection, the texture in the background looks bigger than it does in the desktop version. This is because it is a repeating tile with a predetermined size and the tablet version is smaller, giving the tile a larger ratio. Also notice that this surface comp is designed specifically for the Writings page of the website. 22

Surface Comps Mobile The surface comp for the mobile shows how usable the site is on a phone.

This surface comp is specific to the shortest and final page on the site, Edits.

23 Surface Comps Mobile The surface comp for the mobile shows how usable the site is on a phone. The buttons are clearly large enough to press with any size finger or thumb. This surface comp is specific to the shortest and final page on the site, Edits. If either of the other pages are brought up on a phone, there will be a longer scroll to get to the contact information in the footer. The about page will respond to the size of the device in order to be readable on all platforms. Notice that the texture in the background is absent. This is fore quicker load times. Also notice that each item and text are all part of the same button separated by the line between items. 23

24 Surface Comps Colors & Texture Typeface & Font Text Color for all item descriptions. Background for the Header and Footer. No tile overlay. # RGB: Text Color for all item titles and text of buttons in hover state. Background for links to other pages including About page and Submit button. #741a13 RGB: Text Color in all Headers and Footers. Background for form elements, Facebook & LinkedIn buttons, & mobile body. No tile overlay. #f7ffec RGB: Desktop Avenir Next Medium: 110pt, 85pt, 50pt Avenir Next Regular: 58pt, 40pt, 30pt, 26pt, 16pt Tablet Avenir Next Medium: 72pt, 53pt, 30pt Avenir Next Regular: 26pt, 16pt, 14pt, 10pt Mobile Avenir Next Medium: 100pt, 62pt Avenir Next Regular: 52pt, 40pt, 30pt, 26pt, 10pt Body Background Color for desktop and tablet with tile overlay, 100%. #fff9d8 RGB: Body Background Tile overlay for desktop and tablet, 60% File name: symphony.png Text Color in all buttons and placeholder text in form elements. Hover state of all buttons and links. Button divider in Mobile body. #f7ffec RGB: Reasons for Choices The red and gray colors are bold colors that speak of power, passion, and confidence. The gray is a more subdued color than the red, thus it is the main color. The soft yellow keeps the screen from getting to bright and the texture keeps the screen interesting while the rest if so minimalistic. The tan is a nice accent color adding warmth to the other colors. I chose Avenir Next as my only typeface because it is nice clean typeface that can be designed many different ways much like Helvetica. 24

Surface Comps PhotoShop Layering The layers in PhotoShop are really important to makingthe surface comps work for all members of the production team.

the whole team. Both of images on the left are differerent parts of the layers for the surface comp of the site designed for a desktop.

25 Surface Comps PhotoShop Layering The layers in PhotoShop are really important to makingthe surface comps work for all members of the production team. Having the layers grouped and layered in such a way that the production team can under stand each step of the developement process makes building the actual website easier for the whole team. Both of images on the left are differerent parts of the layers for the surface comp of the site designed for a desktop. Visible in these shots is how each secion is layered and grouped. The layers are in order with the top parts first and the background last in each group and as a whole. This makes each section easy to find and each part of each section easy to find. 25

THE 18 POINT CHECKLIST TO BUILDING THE PERFECT LANDING PAGE

THE 18 POINT CHECKLIST TO BUILDING THE PERFECT LANDING PAGE The 18 point checklist to building the Perfect landing page Landing pages come in all shapes and sizes. They re your metaphorical shop front