Presentation on theme: "Objectives Understand what people want from interactive experiences Get the big picture Appreciate web design as a collaborative effort Know key steps."— Presentation transcript:
Objectives Understand what people want from interactive experiences Get the big picture Appreciate web design as a collaborative effort Know key steps in the website design development process Understand design concept and visualization as applied to web design Realize the need for engaging content Grasp the basics of motion Understand visual basics for screen-based media
Definitions Websites 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.
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.
Screens Interactive 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.
Screens For all screens: 1. Determine: A. communication goals B. constraints C. forms of content (text, images, video, games) 2. Deal with technical constraints: A. design delivery B. size of screen and resolution C. browser and browser’s posture D. margins and padding E. live area, real estate, viewport F. accommodating standard IAB advertising units
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.
Websites 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. Purposes of Websites: Websites serve a variety of sectors and functions: Social Media Hybrid/experimental Gaming Entertainment Video sharing Photo sharing Interest sharing Blogs Communities Professional networking Intranet Public service nonprofit groups Organizations Government Commercial Educational Editorial Reference Institutional promotion Transactional Self-promotion
Website Development Besides 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: 1.Project plan 2.Creative brief 3.Site structure 4.Content outline 5.Conceptual design 6.Visual design development 7.Technical specs 8.Prototype 9.Technology 10.Implementation
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.
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 websites Primary global or metanavigation within one website Secondary or subnavigation (for second-tier information) Single web page navigation The 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.
Conceptual Development and Visualization Images When selecting or creating images for the screen, think about: Optimizing images Loading time Basic guidelines for formatting Presentation: margins and padding Consistency of presentation Appropriateness of imagery Size of images in relation to text Style and media of images in relation to typeface selections Consistent visual vocabulary for icons The audience and how imagery will communicate to that mass audience How different kinds of imagery communicate
Conceptual Development and Visualization Typography The 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: Legibility Readability Voice and Branding (appropriateness for the brand or entity) Contrast Grids When 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.
Conceptual Development and Visualization Grids A grid for screen serves several functions: Unifies Determines Basic Anatomical Structure Creates Visual Style Facilitates Layout Allows Easy Changes to Content Establishes Geography A strong grid creates a visual identity and maintains order. A grid is most often used as the central ordering structure for a website.
Conceptual Development and Visualization Grid Anatomy The 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 Grid Although 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 Grid A modular grid has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right.
Conceptual Development and Visualization Important Points for Website Design Respect 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.
Conceptual Development and Visualization Color A 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/Psychographic The 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.
Engaging Content A 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.
Motion A 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 brief Theories fundamental to motion or animation Narrative forms or storytelling (linear and nonlinear) Planning of action Sequencing of images for maximum impact and communication Integrating 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.
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.
Motion Motion Aesthetics Fundamentals to keep in mind: Tell a visual story based on a single well-defined design concept Use color for unity, drama, and focal points Changes in scale can create the illusion of spatial depth as well as the feeling of near and far Contrast creates dynamics Avoid flatness Sound can help tell a story, create drama, create mood, and punctuate Create visual beats
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. Proximity Grouping 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. Contrast Without 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.
Visual Basics for Screen-Based Media Repetition and Alignment Repetition 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 Media Determine 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.
Summary Desktop 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.
Summary Besides 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.
Summary Motion 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.