MULTIMEDIA WEB DESIGN

MULTI

MEDIA

WEB  DESIGN

2016

“THE” AGENDA

THE WELCOME

:: DGIM 759 Website Review

THE WEB DESIGN PROCESS

:: Goal and Purpose :: Target Audience :: Mood & Theme :: Color Scheme

:: Information Architecture :: Layout & Content Areas :: Sketch & Mock-Up :: HTML Structure

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

THE SHOWCASE SHOWDOWN

:: GIF Animation Examples

:: Sprite Animation Examples

:: HTML5 Background Videos

:: jQuery Galleries

:: Good vs. Bad Logos

THE TOOL SHED

:: Comm Arts Server/DGIM 759 Folder :: Site/Folder Structure

:: Photoshop for Web Quick View* * time permitting

MULTI

MEDIA

WEB  DESIGN

THE WELCOME

::

Class Introductions

2. Hometown

3. Fine Arts Specialization / Reason for Choosing 4. Skills (Adobe CS, Microsoft Office, Managing, etc.) 5. What People Best Know You For

6. Current job 7. Ideal Future Job

8. Ideal Future Living Location 9. Favorite Addiction or Hobby

::

Syllabus Review

::

DGIM 759 Website Review

1. Website: http://iris.nyit.edu/~dmyrick/dgim759 2. Course Info

3. Calendar: Class Overview, Class Notes, Assignment 4. Assignments

5. Tech Lounge: Video Tutorials, Web Stuff, Industry Stuff, Student Work 6. Contact

MULTI

MEDIA

WEB  DESIGN

THE WEB DESIGN 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. Sell Products/Works/Tickets Gain Participants/ Take Action (target number) Buy Products/Works/Tickets Gain membership/ viewers/ subscribers/ fans > $ $ $ Raise target $currency for… FUTURE???

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:: 2. Promote Products & Services

Provide Transactions (Billing / Delivery of Goods) Advertise Events

Knowledge Sharing Entertain Site Visitors

Provide Digital Storage/ Hosting

FUTURE???

::

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.

MULTI

MEDIA

WEB  DESIGN

EXAMPLE OF WEBSITE TARGET AUDIENCE:: 3. Art Buyers, Based in New York, Ages 18+

Middle Aged, Alaskan Native, Annual Income (45K+) 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::

4. Relaxed/ Serene 5. Excited/ Adventurous 6. Explosive

Content Satisfied/ Accomplished Self-Actualized/ Strengthened Uneasy/ Scared Comfortable Secure

Poor/ Wanting Normal 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 ]

MULTI

MEDIA

WEB  DESIGN

EXAMPLE OF WEBSITE THEMES::

7. Basic/ Logical 8. Techie 9. Sci-Fy

Humble/ Welcoming Smooth/ Slick/ _{Clean/ Modern} Cutting Edge/ Daring _{Gaudy/ Baroque} Environmental/ Health _Conscious Industrial/ Steam Punk Hipster

Classical/ World / Folk Jazz/ R&B/ Hip-Hop Heavy Metal/ Grunge/ Punk

Design Theme Links:

URL:https://www.thebestdesigns.com/designs 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 Color Choices May Convey –Marketing Industry

URL: http://outsourcemymarketing.net/color-choices-for-new-marketing/

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

MULTI

MEDIA

WEB  DESIGN

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

MULTI

MEDIA

WEB  DESIGN

In this class, you will create a color scheme in Photoshop 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.

If you successfully import the .aco file, all color will be available to you

in the color swatch panel

MULTI

MEDIA

WEB  DESIGN

::

Information Architecture

Color Scheme: 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/user-interface-design.html

MULTI

MEDIA

WEB  DESIGN

MULTI

MEDIA

WEB  DESIGN

::

Sketch & Mock-Up:

Use a sketch pad to flesh out your design layout and image use

MULTI

MEDIA

WEB  DESIGN

::

HTML Structure

DEMO

::

CSS [Layout, Style, Lite Animation]

DEMO

::

jQuery

DEMO

Lite & Heavy Animation

Image Gallery Functions

User Interaction

Form Validation

THE SHOWCASE SHOWDOWN

::

GIF Animation Examples

::

Sprite Animation Examples

::

HTML5 Background Videos

::

jQuery Galleries

MULTI

MEDIA

WEB  DESIGN

THE TOOL SHED

::

DGIM 759 Server : Write Down Name Here >

::

Site/Folder Structure : Use folder/file structure below for this course

MULTI

MEDIA

WEB  DESIGN

Homework

HW-1

DUE :: 02.05

REVIEW ::

1. THE WEB DESIGN PROCESS

2. Photoshop CC: 10 Things Beginners Want to Know How To Do

DO ::

1. Answer the questions located in THE WEB DESIGN PROCESS [pp. 3 - 7]

2. Export Color Scheme from http://www.palleton.com

3. Sketch of 3 Projects [GIF Animation][Sprite Sheet][HTML5 – Write Down Pitch]+ Logo SEE ASSIGNMENTS PAGE FOR COMPLETE DETAILS

BRING ::

HW-1

1

5-10 examples of your best work (On USB)

2 Completed Questionnaire _{(Web Design Process)} 3 Sketches of 3 Projects & Logo

4 URL (website you like)

5 Sketchbook