The Web Portfolio Process

THE WEB PORTFOLIO PROCESSFROM BRAINSTORMING - TO DESIGN------YOUR BRAIN------See Good Things… View examples of websites and portfolios in your industry: :: Key to successful art websites :: Awwward Portfolio Tour :: Etc.Think Happy Thoughts… Consider the following for your site: :: Goal and Purpose :: Target Audience :: Mood & Theme------PHOTOSHOP LESSONS------Get your drawing hand and mouse ready… :: Color Scheme :: Information Architecture [ Simply sketch out webpages, and how the user will find the pages(navigation) ] :: Layout & Content Areas [ Sketch, Photoshop(PSD) Wireframe, & PSD Web Mock-Ups ]------DREAMWEAVER LESSONS------:: HTML Structure :: CSS [Layout, Style, Lite Animation] THE WEB PORTFOLIO PROCESS:: Key to successful websites o Keep it Simple o Focus on the works o Add Cool Stuff to Enhance (Not To Overload) o Lead your visitor’s eye around the site o Motivate the visitor to make choices o Smart Navigation------FOR PUBLIC RELATIONS (INDIVIDUAL): Title: 10 Things Every PR Portfolio Must Have By: Lorra Brown | Date: 03.21.2013 SOURCE: Ragan’s PR Daily URL: http://www.prdaily.com/Main/Articles/10_things_every_PR_portfolio_must_have_14103.aspx FOR PUBLIC RELATIONS (WEBSITES FOR CLIENTS): URL: http://www.webaward.org/winners.asp - .VCG_Rud3fs8 [CHOOSE PUBLIC RELATIONS FROM CATEGORY DROP-DOWN LIST]------FOR ARTISTS/DESIGNERS (ADVICE FOR WEB DESIGN): Title: Successful Art and Artist Websites : Do’s and Don’ts – How to Build a Website that Works By: Alan Bamberger SOURCE: Art Business.com URL: http://www.artbusiness.com/weberrors.html ------AWWWARD PORTFOLIO TOUR: Title: Awards for Websites [Based on Categories] SOURCE: Awwwards.com URL: http://www.awwwards.com WEBBY AWARD PORTFOLIO TOUR: Title: Webby Awards Self-Promotion/Portfolio Winners & Nominees SOURCE: Webby Awards.com URL: http://www.webbyawards.com/winners/search?keywords=self-promotion NOTE: Write down the websites you like and why you like them… THE WEB PORTFOLIO PROCESS:: Goal and PurposeGoal: What goal do you plan to achieve with your website? ( WHO, WHAT, WHEN, WHERE, HOW ) A goal is measurable (time, quantity, distribution of tangibles). A person or group completes a goal, typically based on a schedule (deadlines/ timelines) A goal is supported by purpose, vision, and/or a set of ideals.EXAMPLE OF WEBSITE GOALS ::1. l > M M AC AC R R OB OB UT UT TO TO N N HT HT ML ML Dir Dir ect ect $ $ $ NP NP UT UT TY TY PE PE =\ =\ CH CH EC EC KB KB OX OX NA NA M M THE WEB PORTFOLIO PROCESSE= E= Sel Sel l > l > M M AC AC R R OB OB UT UT TO TO N N HT HT ML ML Dir Dir ect ect l > M M AC AC R R OB OB UT UT TO TO N N HT HT ML ML Dir Dir ect ectPurpose: What is the purpose of your site? (WHY, WHO, WHAT, & MANY TIMES WHERE…)A purpose is not measurable. A person or group works with a purpose in mind (typically based on an ideal/vision) A purpose supports a goalEXAMPLE OF WEBSITE PURPOSE ::2. NP UT TY PE =\ CH EC KB OX NA M E= Sel l > M AC R OB UT TO N HT ML Dir ect M AC R OB UT TO N HT ML Dir ect THE WEB PORTFOLIO PROCESS M AC R OB UT TO N HT ML Dir ect M AC R OB UT TO N HT ML Dir THE WEB PORTFOLIO PROCESS ect M AC R OB UT TO N HT ML Dir ect M AC R OB UT TO N HT ML THE WEB PORTFOLIO PROCESSDir ect M AC R OB UT TO N HT ML Dir ect:: Target Audience: Who is the target audience for your website? ( WHO, WHERE ) Target Audience: The target audience may include individuals/groups of a specific gender, age, income, location, ethnicity, marital status, culture/subculture, and profession/industry/interest.EXAMPLE OF WEBSITE TARGET AUDIENCE ::3. Sel l > M AC R OB UT TO N HT ML Dir ect M AC R OB UT TO N HT ML Dir ect E= Sel l > M AC R OB UT TO N HT ML Dir ect:: Mood & ThemeMood: What is your site’s mood? How do you want your site visitors to feel? How do you want your site to be perceived?EXAMPLE OF WEBSITE MOODS ::4. l > l > M M M AC AC AC R R R OB OB OB UT UT UT TO TO TO N N N THE WEB PORTFOLIO PROCESSHT HT HT ML ML ML Dir Dir Dir ect ect ect l > l > M M M AC AC AC R R R OB OB OB UT UT UT TO TO TO N N N HT HT HT ML ML ML Dir Dir Dir ect ect ect l > l > M M M AC AC AC R R R OB OB OB UT UT UT TO TO TO THE WEB PORTFOLIO PROCESSN N N HT HT HT ML ML ML Dir Dir Dir ect ect ect l > l > M M M AC AC AC R R R OB OB OB UT UT UT TO TO TO N N N HT HT HT ML ML ML Dir Dir Dir ect ect ectDesign Mood Links:TITLE: COMMUNICATION, MOOD, AND MEANING: LINES IN WEB DESIGN AUTHOR: PATRICK COX WEBSITE: TYMPANUS.NET URL: http://tympanus.net/codrops/2011/11/17/lines-in-web-design/TITLE: HOW TO CREATE MOOD BOARDS: 24 PRO TIPS AUTHOR: PAUL WYATT, TOM MAY WEBSITE: CREATIVEBLOQ.COM URL: http://www.creativebloq.com/graphic-design/mood-boards-812470 Theme: What is your site’s theme? A theme is a set of design elements: translated into an environment & used to convey a mood. Layout, color, fonts, flow, navigation, images, plus treatments of those elements create a theme. One theme may encompass multiple themes. Themes are numerous, may be customized, and named/renamed by their respective designer. [ SEE Long Definition of A Website Theme ] THE WEB PORTFOLIO PROCESSEXAMPLE OF WEBSITE THEMES ::7. l > l > M M M AC AC AC R R R OB OB OB UT UT UT TO TO TO N N N HT HT HT ML ML ML Dir Dir Dir ect ect ect <I Humble/ Welcoming l > l > M M M AC AC AC R R R OB OB OB UT UT UT TO TO TO N N N THE WEB PORTFOLIO PROCESS l > l > M M M AC AC AC R R R OB OB OB UT UT UT TO TO TO N N N HT HT HT ML ML ML Dir Dir Dir ect ect ect l > l > M M M AC AC AC R R R OB OB OB UT UT UT TO TO TO THE WEB PORTFOLIO PROCESSN N HT HT ML ML Dir Dir ect ectDesign Theme Links:URL: http://www.thebestdesigns.com/design/themes/ URL: http://www.inkthemes.com/wp-themes/ :: Color SchemeColor Scheme: What is your websites color scheme?A color scheme is a combination of colors used to complete a design.REVIEW: What Your Brand Colors Say About Your Business URL: http://blog.marketo.com/2012/06/true-colors-what-your-brand-colors-say-about-your-business.html EXAMPLE OF A WEBSITE COLOR SCHEME ::FIGURE 1: Color Scheme NOTE: The #NUMBER-LETTER code is called Hexadecimal Code. This code is used to color the text and background color of specific web elements. THE WEB PORTFOLIO PROCESSYou may experiment with Color Schemes at Paletton.Com: URL: http://paletton.com/ OPTION: You may choose from monochromatic, 2-color, 3-color, and 4-color. OPTION: You may also customize your paletteWe will create/download your color scheme in a later class, but be prepared to explain your color scheme by Class 2.:: Information ArchitectureInformation Architecture: What is your websites information architecture?Information Architecture is organizing, structuring, and labeling content. Good information architecture will lead to the best navigation experience for the user. Site visitors will be able to easily find your content. Confusion in site navigation, may cause the user to leave the site, thus negating the purpose and goal of the websiteREVIEW: Usability.gov URL: http://www.usability.gov/what-and-why/information-architecture.html EXAMPLE OF A WEBSITE’S INFORMATION ARCHITECTURE :: THE WEB PORTFOLIO PROCESS:: Layout & Content AreasSKETCH :: Use A sketch pad to flesh out your design layout and image use THE WEB PORTFOLIO PROCESS o 3 rough sketches of your site o Pick Your Best Sketch o Go With ItPSD WIREFRAME :: Left: Homepage Photoshop Wireframe Right: Works Page Photoshop Wireframe o Use shapes and Texts to layout your content and navigation o Use “X boxes” to depict images o Organize layers (in order of appearance) + (in group layers based on future web function) PSD WEB MOCK UP :: Use Photoshop to digitize your design concept (Document sizes and hexadecimal colors) THE WEB PORTFOLIO PROCESS o Save Your Wireframe as index.psd o Create Background Fill and Pattern (if desired) o Place Images (Logos, Header Image, Artwork, Video Posters*, Thumbnails, & Icons) o Choose Font, Font-size, Font-Color o Type and Stylize Headings, Narratives, and Menu Text for Your Website o Ensure All Layers are Named and Organized*A video poster is an image serving as a placeholder if videos are slow to load or not supported in certain browsers and devices.[ Future Dreamweaver Lessons…] THE WEB PORTFOLIO PROCESS:: HTML Structure :: CSS [Layout, Style, Lite Animation] :: jQuery [Lite & Heavy Animation, Image Gallery Functions, User Interaction, Form Validatiion]

The Web Portfolio Process

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support