2 Objectives Understand what people want from interactive experiences Get the big pictureAppreciate web design as a collaborative effortKnow key steps in the website design development processUnderstand design concept and visualization as applied to web designRealize the need for engaging contentGrasp the basics of motionUnderstand visual basics for screen-based media
3 DefinitionsWebsites are a collection of “pages” or files linked together and made available on the World Wide Web and are authored and owned by companies, organizations, and individuals.Content is the body of information that is available to visitors. It is the subject and substance of the text and graphics.Information architecture is the careful organization of website content into hierarchical (or sequential) order.The visual design of information architecture is the navigation system.Motion aesthetics refers to the process and consideration of how form creates impact over time in a design.
5 What Do People Want and Expect? Interactive designers need to take full advantage of specifically what each device can offer.Desktop, tablet, and mobile are not the same devices, and people use them somewhat differently.People now expect to touch, hear, and interact with screens in unconventional ways. Tactile interfaces can be soft, physical, stretchable, flexible, conductive, sonic, and so on.Designing for interactive media is collaborative; it involves a team of experts who develop, design, and execute web design and applications.Interactive designers must work cooperatively with technology professionals. These professionals depend on one another’s expertise and contribution to the development of a functional online design.
6 ScreensInteractive devices’ viewports come in different sizes and pixel densities.The largest screens are large-format interactive walls, projection surfaces or tiled flat screen walls, or eighty-two- inch multitouch screens.For daily personal use, the largest screen is the desktop or laptop computer, then a tablet, and finally, a mobile phone screen.Although mobile screens come in a variety sizes and some have touch capabilities, the most important issue when designing for these screens is to streamline content.Any mobile screen is simply too small for the amount of content that can be handled on a computer or tablet screen.Some designers advocate designing for the mobile screen first because it forces you to streamline both content and design.
7 Screens For all screens: 1. Determine: A. communication goals B. constraintsC. forms of content (text, images, video, games)2. Deal with technical constraints:A. design deliveryB. size of screen and resolutionC. browser and browser’s postureD. margins and paddingE. live area, real estate, viewportF. accommodating standard IAB advertising units
8 Screens General Interactive Axioms Respect the visitor by streamlining the design.Design for what the specific device can do, what people use it for, and how they use it.Pull in information or entertainment seekers.Design for the target audience—age, culture, psychographic, and their respective devices.Design for the kind of content: video or motion, picture files, fixed images, type sizes, lots of text, little text, lists, and so forth.Visual design is about clarity and engagement—make finding information easy, improve usability, and make the experience involving and interesting.Responsiveness—with a variety of screens, create a flexible, adaptive grid or layout.
9 WebsitesA collection of pages or files linked together and made available on the World Wide Web, websites are authored and owned by companies, governments, organizations, and individuals.Purposes of Websites:Websites serve a variety of sectors and functions:Public service nonprofit groupsOrganizationsGovernmentCommercialEducationalEditorialReferenceInstitutional promotionTransactionalSelf-promotionSocial MediaHybrid/experimentalGamingEntertainmentVideo sharingPhoto sharingInterest sharingBlogsCommunitiesProfessional networkingIntranet
11 Website DevelopmentBesides the usual stages of creating proposals and creative briefs, the web design application process requires thorough prototyping, where the site is created and tested for usability.There are ten key steps in this part of the website development process:Project planCreative briefSite structureContent outlineConceptual designVisual design developmentTechnical specsPrototypeTechnologyImplementation
12 Website Development Defining Web-Related Terms Content is the body of information that is available to visitors on a website. It is the subject and substance of the text and images.When providing content, good writing should always be a priority. Rules of writing apply to the web and other new and emerging media just as they apply to any print media.Information architecture is the careful organization of website content into hierarchical order. For a user to easily move through—or navigate—a website, the content must be organized and structured in a logical way from general to specific.The information architecture is the designer’s guide to the overall composition of the website and hierarchy of individual graphic elements.
13 Website Development Defining Web-Related Terms The visual design of information architecture is the navigation system. A consistent visual structure is equally critical to ease of use and a frustration-free user experience. Many websites have several levels of navigation, including:Portal navigation that leads to many other websitesPrimary global or metanavigation within one websiteSecondary or subnavigation (for second-tier information)Single web page navigationThe home page is the primary entrance to a website and contains the central navigation system.All navigation systems consist of visual and digital links that connect one location on a web page to another location, at either the same website or a different one.
16 Conceptual Development and Visualization ImagesWhen selecting or creating images for the screen, think about:Optimizing imagesLoading timeBasic guidelines for formattingPresentation: margins and paddingConsistency of presentationAppropriateness of imagerySize of images in relation to textStyle and media of images in relation to typeface selectionsConsistent visual vocabulary for iconsThe audience and how imagery will communicate to that mass audienceHow different kinds of imagery communicate
17 Conceptual Development and Visualization TypographyThe basic rules about typography apply to screen media.There are many typefaces available for use on screen, available for dynamic download from the cloud.Additionally, when designing with type for the screen, consider:LegibilityReadabilityVoice and Branding (appropriateness for the brand or entity)ContrastGridsWhen designing a grid or grid system, the purpose, marketing goals and objectives, creative brief (strategy), content, target audience, and design concept guide decisions.Always remember that the grid should accommodate the content and not force the content into an unaccommodating grid.
18 Conceptual Development and Visualization GridsA grid for screen serves several functions:UnifiesDetermines Basic Anatomical StructureCreates Visual StyleFacilitates LayoutAllows Easy Changes to ContentEstablishes GeographyA strong grid creates a visual identity and maintains order.A grid is most often used as the central ordering structure for a website.
19 Conceptual Development and Visualization Grid AnatomyThe grid splits the page into columns with defined widths, spacing, and margins to establish positions for the standard elements on the page and alignment of text and images.The visual design of a website grid has a master layout that guides the composition and placement of every element—text, headings, and graphics—from screen to screen.Multicolumn GridAlthough single-column grids work well for simple documents, novel-like narratives, or mobile screens, multicolumn grids provide flexible formats for desktop web or tablet.Modular GridA modular grid has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right.
21 Conceptual Development and Visualization Important Points for Website DesignRespect the user’s time and goals.Pages should load quickly.Engage the visitor.Integrate design of the website with brand identity.Prototype and test, test, test!Ensure a logical information hierarchy.Offer or do something that traditional graphic media can’t.Offer a media-rich experience.Consider how the website is seen and used on different devices and viewports.Provide an intuitive interactive experience.
22 Conceptual Development and Visualization ColorA web designer does have special considerations regarding color.The web is a screen-based RGB color model. You can’t control the color on the monitor of every web user.It’s best to view your design on all types of systems and browsers.Address the Audience Demographic/PsychographicThe style of a website can be as varied as that of any creative form.The style or look and feel of a website must address the demographic (constituency) and psychographic (values, lifestyle, and opinions) of the audience.
23 Engaging ContentA rich user experience means the website actually performs or offers value; it is one where the visitor is not just passively looking through it.As web, tablet, and mobile sites and apps proliferate, tools and features will become ever more important.Television and print advertising are often used to drive people to the desktop or mobile web where they can interact with a brand or group.As technology rapidly evolves, our mobile phones will become one of the most important players in carrying content.Mobile, tablets, wearable computers, and emerging digital platforms have sister solutions or companion solutions related to website content.A designer should understand how to link strategy, core concepts, and visual design across platforms.
25 MotionA motion designer generates a concept and considers function, form, aesthetics, meaning, and ultimately, communication.Whether moving graphics are incorporated into other screen media or stand alone, one must be conversant with the following considerations:Concept generation based on strategy and briefTheories fundamental to motion or animationNarrative forms or storytelling (linear and nonlinear)Planning of actionSequencing of images for maximum impact and communicationIntegrating different media (if relevant)As with creating concepts and visuals for television commercials, screen-based media can involve narrative forms, sequencing of images and events, composition, and visual and motion variables.
26 Motion Motion Aesthetics Motion aesthetics refers to the process and consideration of how form creates impact over time in a design.An individual frame is a single static image, one of many strung together to create motion graphics.Frames are created but connected and used in multiples over time.A temporal relationship exists in screen-based media—the relationship or interplay between two separate events or images; this involves chronology—the order of events.As in all graphic design, one must consider spatial relationships—the distance between the thing seen in relation to the viewer, how far or how close, and the shifts between near and far.Rhythmic relationships in screen-based media can also be created by the duration of each shot and by the interaction of images with contrast and variation.
27 Motion Motion Aesthetics Fundamentals to keep in mind: Tell a visual story based on a single well-defined design conceptUse color for unity, drama, and focal pointsChanges in scale can create the illusion of spatial depth as well as the feeling of near and farContrast creates dynamicsAvoid flatnessSound can help tell a story, create drama, create mood, and punctuateCreate visual beats
28 Visual Basics for Screen-Based Media Apply all principles of composition. When considering the overall screen-based piece, the following are critical to create impact.ProximityGrouping elements should enhance content and communication.All visual elements must seem related, but some visual elements will create groupings due to proximity.The negative space around each visual element and between visual elements reveals how they are related by meaning and function.ContrastWithout contrast, all visual elements would look the same and yield monotony.Contrast creates distinction, visual diversity, and makes a distinction among visual elements, helping set up the hierarchy of information.
29 Visual Basics for Screen-Based Media Repetition and AlignmentRepetition inculcates the audience.Just as a hook in music (that is, a repeated series of notes or phrases) works its way into the subconscious of the listener, so too does visual repetition in the mind of the viewer.Use of Typography and Graphics in Screen-Based MediaDetermine headings and subheadings in terms of color, size, and weight to distinguish the hierarchy of type from one another as well as from visuals.The conceptual interplay between type and visuals in print is much the same as in screen-based applications, except the bonus of motion adds potential for heightened dramatic or comedic effect.How type interfaces with images in screen-based mediacan effectively communicate meaning both literally and symbolically.
31 SummaryDesktop web design can provide a rich experience; it is a primary place to gather information—a place to share and explore. It also provides a critical point of contact for a brand and a place for community brand building.Interactive designers need to take full advantage of specifically what each device can offer.Designing for interactive media is collaborative; it involves a team of experts who develop, design, and execute web design and applications.A collection of pages or files linked together and made available on the World Wide Web, websites are authored and owned by companies, governments, organizations, and individuals.
32 SummaryBesides the usual stages of creating proposals and creative briefs, the web design application process requires thorough prototyping, where the site is created and tested for usability.When judging websites for merit, there are basic criteria such as content, structure and navigation, visual design, functionality, interactivity, and overall experience.Screen-based media can support graphics that move and incorporate sound.To create moving graphics, one must be well acquainted with the necessary technical issues, production techniques, and software.
33 SummaryMotion aesthetics refers to the process and consideration of how form creates impact over time in a design.When designing for screen, one must consider all the formal elements and apply all principles of composition.Audio provides a strong component in screen-based media, leading to audience enthusiasm, engagement, and making the piece memorable.