The Web Portfolio Process

THE WEB PORTFOLIO PROCESS

FROM 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 Purpose

Goal: 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 PROCESS

E= 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 ect

Purpose: 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 goal

EXAMPLE OF WEBSITE PURPOSE ::

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 PROCESS

Dir 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 ::

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 & Theme

Mood: 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 PROCESS

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 ect l > l > M M M AC AC AC R R R OB OB OB UT UT UT TO TO TO THE WEB PORTFOLIO PROCESS

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 N N N HT HT HT ML ML ML Dir Dir Dir ect ect ect

Design 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 PROCESS

EXAMPLE 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 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 PROCESS

N N HT HT ML ML Dir Dir ect ect

Design Theme Links:

URL: http://www.thebestdesigns.com/design/themes/ URL: http://www.inkthemes.com/wp-themes/

:: Color Scheme

Color 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 PROCESS

You 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 palette

We will create/download your color scheme in a later class, but be prepared to explain your color scheme by Class 2.

:: Information Architecture

Information 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 website

REVIEW: 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 Areas

SKETCH :: 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 It

PSD 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]