➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
Web as a Medium: Aesthetics & Design
1. The Web as a Medium: aesthetics & design Cynthia Gregory, MLSLibrarian III / Head of Electronic Resources College of Mount St. Joseph
2. Overview Intro Web Design History Last 10-15 yrs Web as a Medium Design Guidelines Visual Design Information/Navigation Design Webpagesthatsuck.com & Comm. Arts Mobile Web Design Your Homework
3. Web Design (10 yrs in a nutshell) 1990s, emphasis on coding HTML, CSS, JavaScript Had to be a programmer 1st gen web sites: Static HTML Text-based Brochure-like design Center aligned
5. Why the shift…text-based to visual? Reading from screen, 25% slower Technology—easy to create, access, distribute Information overload—scanning & filtering
22. Two Design Challenges Visual Designgraphic style, how it looks Information/Navigation Designorganizational style, how content is structured
23. Visual Design Covered by R. Williams textbook Contrast—focal points, readability, Size, color Repetition—most important, consistency, aids navigation. Alignment—strong placement or arbitrary? Proximity—layout, grouped items, unity See also checklists on handout
25. Information/Navigation Design JakobNeilsen—web design/usability guru User-centered design: create for the audience Usability=easy to use & learn Usability testing: task analysis Human Computer Interaction (HCI), info/library/computer sci, psychology
26. Neilsen Emphasizes 3 points (abridged) 1) Information Architecture Organization? Main sections? Sub-sections? Why are people coming to your site?
27. Neilsen Emphasizes (abridged) 2) Consistency Labels/titles of sections & links Placement of links 3) Navigation signage clues, where am I? where can I go? links should be obvious, especially if graphical, Flash navigation standards
29. Webpagesthatsuck.com Vincent Flanders—evaluating bad design 10+ yrs Learn good design by looking at bad design(his site included) Commercial, non-profit sites Educational but entertaining commentary“This site is a festering pus sore on the soul of web design” Checklists, “daily sucker,” Yearly Top 10
30. Apply Guidelines to these… http://yvettesbridalformal.com/Obvious visual elements http://www.wherever.com/flash/MEDIUM/interface.htmNavigation &visual design issues http://www.bow-wowbooks.com/Mystery meat link/navigation
31. Zune Player http://www.zunejourney.net Vincent Flanders (webpagesthatsuck.com): Flashy Flash, designers on drugs, contrast—menu text #3 Worst Navigation of 2007 Communication Arts (http://www.commarts.com)Gave site a “WOW” and made it pick of the day. Spectacular use of Flash…but Text contrast in menu Do graphics match the topics/concepts?
32. Communication Arts Trade journal ”for graphic designers, art directors, design firms, corporate design departments, advertising agencies, interactive designers, illustrators and photographers—everyone involved in visual communication.” Available in print (Library) Webpicks: http://www.commarts.com/webpicks
33. Future Web Design…in your pocket. Mobile Web Apps & web pages (WML, XML/CSS) Page design like it’s the 1990s:simplicity, centered Example:NCSU Librarieshttp://www.lib.ncsu.edu/m/home/?browse=iphone
35. Closing Thoughts Easy to be a critic No site is ever “perfect” Keep design guidelines in mind Know your audience & Test!
Notes de l'éditeur
SmartArt custom animation effects: radial list(Intermediate)To reproduce the SmartArt effects on this slide, do the following:On the Home tab, in the Slides group, click Layout, and then clickBlank. On the Insert tab, in the Illustrations group, click SmartArt. In the Choose a SmartArt Graphic dialog box, in the left pane, click Relationship. In the Relationship pane, click Radial List (fifth row, fourth option from the left), and then click OK to insert the graphic into the slide.To enter text, select the graphic, and then click one of the arrows on the left border. In the Type your text here dialog box, in the top level bullets, enter the text for the three, smaller circle shapes in the graphic. In the second-level bullets, type the text for the bullets to the right of the three, smaller circle shapes.On the slide, select the SmartArt, and then on the Design tab, in the Themes group, click Colors, and under Built-In, select Technic.Press and hold CTRL, and on the slide, select the large circle and all three small circles.On the Home tab, in the Drawing group, click the arrow to the right of ShapeEffects, point to Preset, and then under Presets select Preset2 (first row, second option from the left).On the slide, click the picture placeholder in the center of the large circle. In the Insert Picture dialog box, select a picture, and then click Insert. (Notes: (1) If the picture in the large circle is distorted, tile the picture as a texture by selecting the large, picture-filled circle, and then on the Home tab, in the bottom right corner of the Drawing group, click the FormatShape dialog box launcher. In the FormatShape dialog box, click Fill in the left pane, and in the Fill pane check Tilepicture as texture.(2) If necessary, change the tile position of the picture within the shape. To do this, in the FormatShape dialog box, in the Fill pane, under Tiling options, enter values into the OffsetX and OffsetY boxes to reposition the focal point of the picture. To resize the picture, in the FormatShape dialog box, in the Fill pane, under Tiling options, enter values into the Scale X and Scale Y boxes.)Select the top, small circle in the SmartArt graphic. On the Home tab, in the bottom right corner of the Drawing group, click the FormatShape dialog box launcher. In the FormatShape dialog box, click Fill in the left pane, and in the Fill pane click Solidfill, and then in the Color list, select Gray-25%, Background 2, Darker 75% (fifth row, third option from the left).Select the middle small circle in the SmartArt graphic.On the Home tab, in the bottom right corner of the Drawing group, click the FormatShape dialog box launcher. In the FormatShape dialog box, click Fill in the left pane, click Solidfill in the Fill pane, and then in the Color list select Gold, Accent 2 (first row, sixth option from the left).Select the bottom small circle in the SmartArt graphic. On the Home tab, in the bottom right corner of the Drawing group, click the FormatShape dialog box launcher. In the FormatShape dialog box, click Fill in the left pane, click Solidfill in the Fill pane, and then in the Color list select Lavender, Accent 3 (first row, seventh option from the left).Press and hold CTRL, and select all three lines connecting the large circle to the three smaller circles. On the Home tab, in the bottom right corner of the Drawing group, click the FormatShape dialog box launcher. In the FormatShape dialog box, do the following:Click LineColor in the left pane, and in the LineColor pane click Solidline.Also in the LineColor pane, in the Color list select White, Background 1, Darker 25% (fourth row, first option from the left).Also in the Format Shape dialog box, click LineStyle in the left pane, and in the LineStyle pane, do the following: In the Width box, enter 2.5 pt.In the Dashtype list, select RoundDot (second option from the top).Press and hold CTRL, and select all three text boxes in the SmartArt graphic. On the Home tab, in the Font group, in the FontSize box, enter 22.To reproduce the animation effects on this slide, do the following:On the Animations tab, in the Animations group, click CustomAnimation. Select the SmartArt graphic on the slide, and then in the CustomAnimation task pane, do the following:Click AddEffect, point to Entrance, and select MoreEffects. In the AddEntranceEffect dialog box, under Subtle, select Fade.Click the arrow to the right of the fade entrance effect and select EffectOptions. In the Fade dialog box, do the following:On the Timing tab, in the Start list, select WithPrevious.On the Timing tab, in the Speed list, select 1 seconds (Fast). On the SmartArtAnimation tab, in the Groupgraphic list, select One by one. Click the double arrow under the animation effect to expand the list of effects.Select the first effect in the list (fade entrance effect), and then click Change, point to Entrance, and select MoreEffects. In the ChangeEntranceEffect dialog box, under Moderate, select Grow & Turn.Select the second effect in the list (fade entrance effect), and then click Change, point to Entrance and select MoreEffects. In the ChangeEntranceEffect dialog box, under Basic, select Wipe.Select the second effect in the list again (wipe entrance effect). Under Modify: Wipe,do the following:In theStart list, select AfterPrevious.In the Direction list, select FromLeft.In the Speed list, select VeryFast.Select the third effect in the list (fade entrance effect), and then click Change, point to Entrance, and select MoreEffects. In the ChangeEntranceEffect dialog box, under Subtle, select FadedZoom.Select the third effect in the list again (faded zoom entrance effect). Under Modify: Faded Zoom, do the following:In the Start list, select WithPrevious.In the Speed list, select Fast.Select the fourth effect in the list (fade entrance effect), and under Modify: Fade, in the Start list select WithPrevious.Press and hold CTRL, and select the fifth and eighth effects in the list (fade entrance effects), and then click Change, point to Entrance, and select MoreEffects. In the ChangeEntranceEffect dialog box, under Basic select Wipe, and then click OK.With the fifth and eighth effects in the list still selected (wipe entrance effects), under Modify: Wipe,do the following:In the Direction list, select FromLeft.In the Speed list, select VeryFast.Press and hold CTRL, and select the sixth and ninth effects in the list (fade entrance effects). Click Change, point to Entrance, and select MoreEffects. In the ChangeEntranceEffect dialog box, under Subtle, select FadedZoom.With the sixth and ninth effects in the list still selected (faded zoom entrance effects), under Modify: Faded Zoom,do the following:In the Start list, select WithPrevious.In the Speed list, select VeryFast.Press and hold CTRL, and select the seventh and 10th animation effects in the list (fade entrance effects), and then under Modify: Fade, in the Start list, select AfterPrevious.To reproduce the background effects on this slide, do the following:Right-click the slide background area, and then click Format Background. In the Format Background dialog box, click Fill in the left pane, select Gradient fill in the Fill pane, and then do the following:In the Type list, select Radial.Click the button next to Direction, and then click From Center (third option from the left). Under Gradient stops, click Add or Remove until two stops appear in the drop-down list.Also under Gradient stops, customize the gradient stops that you added as follows:Select Stop 1 from the list, and then do the following:In the Stop position box, enter 0%.Click the button next to Color, and then under ThemeColors select White, Background 1 (first row, first option from the left). Select Stop 2 from the list, and then do the following: In the Stop position box, enter 100%.Click the button next to Color, and then under ThemeColors select White, Background 1, Darker 35% (fifth row, first option from the left).
