MULTIMEDIA WEB DESIGN

Transcription

1 CLASS :: Hours THE AGENDA THE WELCOME :: Class Introductions :: Syllabus Review :: 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 1

2 THE WELCOME :: Class Introductions 1. Name 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: 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 7. Links 2

3 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: 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. 3

4 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: TITLE: HOW TO CREATE MOOD BOARDS: 24 PRO TIPS AUTHOR: PAUL WYATT, TOM MAY WEBSITE: CREATIVEBLOQ.COM URL: 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 ] 4

5 EXAMPLE OF WEBSITE THEMES :: 7. Basic/ Logical 8. Techie 9. Sci-Fy Smooth/ Slick/ Cutting Edge/ Daring Humble/ Welcoming Clean/ Modern 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: URL: :: 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: You may experiment with Color Schemes at Paletton.Com: URL: OPTION: You may choose from monochromatic, 2-color, 3-color, and 4-color. OPTION: You may also customize your palette 1. Pick a scheme, 2. Click TABLES/EXPORT 3. Click Color swatches 5

6 4. Export palette as a Photoshop color swatch (ACO) 5. Save.aco inside of Photoshop s Color Swatches Folder 6

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

8 :: 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: EXAMPLE OF A WEBSITE S INFORMATION ARCHITECTURE :: 8

9 :: Layout & Content Area Example 9

10 MULTIMEDIA WEB DESIGN CLASS NOTES :: Sketch & Mock-Up: Use a sketch pad to flesh out your design layout and image use Use Photoshop to digitize your design concept (Document sizes and hexadecimal colors) 10

11 :: HTML Structure DEMO :: CSS [Layout, Style, Lite Animation] DEMO :: jquery DEMO Lite & Heavy Animation Image Gallery Functions User Interaction Form Validation :: GIF Animation Examples :: Sprite Animation Examples :: HTML5 Background Videos :: jquery Galleries :: Good vs. Bad Logos THE SHOWCASE SHOWDOWN 11

12 THE TOOL SHED :: DGIM 759 Server : Write Down Name Here > Comm Arts/DGIM759 :: Site/Folder Structure : Use folder/file structure below for this course Sample of Folder & File Structure File names may vary per student :: Photoshop for Web Quick View [POSTPONED FOR PHOTOSHOP LESSON] 12

13 HW-1 Homework DUE :: 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 3. Sketch of 3 Projects [GIF Animation][Sprite Sheet][HTML5 Write Down Pitch]+ Logo SEE ASSIGNMENTS PAGE FOR COMPLETE DETAILS BRING :: HW examples of your best work (On USB) Completed Questionnaire (Web Design Process) 3 Sketches of 3 Projects & Logo 4 URL (website you like) 5 Sketchbook 13