Key to Successful Websites

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]
:: 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 ::
Top of Form
1.  TMLDirect / Sell Products/Works/Tickets / TMLDirect / Gain Participants/ Take Action (target number)
TMLDirect / Buy Products/Works/Tickets / TMLDirect / Gain membership/ viewers/ subscribers/ fans > $ $ $
TMLDirect / Raise target $currency for… / TMLDirect / Get Hired
Bottom of Form
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 ::
Top of Form
2.  TMLDirect / Promote Products, Services, and/or Works
TMLDirect / Provide Transactions (Billing / Delivery of Goods)
TMLDirect / Advertise Events
TMLDirect / Knowledge Sharing
TMLDirect / Entertain Site Visitors
TMLDirect / Provide Digital Storage/ Hosting
TMLDirect / FUTURE???
:: 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 ::
Top of Form
3.  TMLDirect / Art Buyers, Based in New York, Ages 18+
TMLDirect / Middle Aged, Alaskan Native, Annual Income (45K+)
TMLDirect / Single, Females, Ages 13 - 35, Snowboarder
:: 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 ::
Top of Form
4.  TMLDirect / Relaxed/ Serene / 5.  TMLDirect / Excited/ Adventurous / 6.  TMLDirect / Explosive
TMLDirect / Content / TMLDirect / Satisfied/ Accomplished / TMLDirect / Self-Actualized/ Strengthened
TMLDirect / Uneasy/ Scared / TMLDirect / Comfortable / TMLDirect / Secure
TMLDirect / Poor/ Wanting / TMLDirect / Normal / TMLDirect / Luxurious
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 ]
EXAMPLE OF WEBSITE THEMES ::
Top of Form
7.  TMLDirect / Basic/ Logical / 8.  TMLDirect / Techie / 9.  TMLDirect / Sci-Fy
TMLDirect / Humble/ Welcoming / TMLDirect / Smooth/ Slick/
Clean/ Modern / TMLDirect / Cutting Edge/ Daring
Gaudy/ Baroque
TMLDirect / Environmental/ Health Conscious / TMLDirect / Industrial/ Steam Punk / TMLDirect / Hipster
TMLDirect / Classical/ World /Folk / TMLDirect / Jazz/ R&B/ Hip-Hop / TMLDirect / Heavy Metal/ Grunge/ Punk
Design Theme Links:
URL: http://www.thebestdesigns.com/design/themes/
URL: https://colorlib.com/wp/flat-design-wordpress-theme/
:: Color Scheme
Color Scheme: What is your websites color scheme?
A color scheme is a combination of colors used to complete a design.
REVIEW: Color Psychology in Marketing
URL: https://coschedule.com/blog/color-psychology-marketing/
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.
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
In this class, you will create a color scheme in Photoshop

1. Pick a scheme, 2. Click TABLES/EXPORT… /
3. Click Color swatches

4. Export palette as a Photoshop color swatch (ACO)

5. Save .aco inside of Photoshop’s Color Swatches Folder
If the paletton .aco fails to launch inside of Photoshop automatically, you may export a .png palette, or manually add colors to your swatch panel in Photoshop.
:: 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 ::

:: Layout & Content Areas
SKETCH :: Use A sketch pad to flesh out your design layout and image use

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)

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…]
:: HTML Structure

:: CSS [Layout, Style, Lite Animation]
:: jQuery [Lite & Heavy Animation, Image Gallery Functions, User Interaction, Form Validatiion]

:: 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 HaveBy: Lorra Brown | Date: 03.21.2013SOURCE: Ragan’s PR DailyURL: 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…