230 likes | 353 Views
Group 3: Art Gallery. Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pi é Usability/ADA Compliance Manager Mirjana Vukovic Design Manager. Team Process. We have been working collaboratively in our team to maximize our time together.
E N D
Group 3: Art Gallery Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pié Usability/ADA Compliance Manager Mirjana Vukovic Design Manager
Team Process • We have been working collaboratively in our team to maximize our time together. • We meet after class on Wednesdays and communicate via Blackboard during the week. • We’ve set a schedule and posted it on Blackboard to make sure that we are staying on target.
Content Goals • Provide amateur artists with an electronic portfolio. • Provide information about the artist – contact information and artist’s statement. • Create a usable, image based site with appropriate content.
Target Audience • Art Aficionados • Mature Audience – contemplative and open to new ideas • Visual Learners – are more interested in images than text • Media Savvy
What’s Left for Content? • We have a long way to go, but have wisely chosen to use these first weeks for planning initiatives. • We need to add the artist’s statements and captions to every picture. • We need to add our ALT tags to images. • We need to create our text-based site.
Web Design – Home Page Logo About Us Contact Us Link to Text Site Artist 1 Photo Artist 2 Photo Artists Names Artist 3 Photo Artist 4 Photo
Web Design – Artist Page Logo Artist Statement Contact the Author Link to Text Site Artists Names Border Color is Unique To Artist Photos Thumbnails of Photos
Graphics and Visual Representation of Content • Content is mostly images. • Using JPEGs because of image quality. • We plan on using ALT tags for images. • Individual artist galleries will be characterized by different background colors. • In order to achieve visual continuity, we will use style sheets for font and other basic visual components.
What’s Left for Design? • Upload all images and improve look and feel of galleries. • Create a graphical logo for the site that will appear on every page. • Make sure that galleries are distinct, yet harmonize well with the entire design of the site.
Web Hosting & Publication • We will be hosting the site on the Drexel web space. • Located at http://www.pages.drexel.edu/~wfe24/termproject/
Programming • Using a combination of frames and tables to create the galleries. • Frames • Title bar • Menus and Thumbnail menu • Tables for general formatting within Content frame
Style Sheets • Style sheets to enable global updates without much difficulty. • Title and menu use one style sheet • Each gallery has its own style sheet allowing for individual customization.
Technical Issues re: Images • Photographs in .jpg format • Allows best color depth • Good compression • Photograph sizing • Some photos much larger than others • Used WIDTH=“100%” or WIDTH=“95%” attribute of IMG tag • Photos fit within the limited size of a frame without having to specify a particular pixel size • By only specifying the width (or height) of an image, it is kept in proportion automatically
What’s Left for Programming? • Update general content • Photograph captions • Photographer information • Background • Contact • Formatting issues • Thumbnails take too long to load • Need all photographs over a certain size (100k) copied to a smaller format for use in thumbnails. • Different browsers display the title bar differently
Usability • Background • Keep background simple; provide contrast with images, text, and link colors. • Text • Consider placement, font size, color. Is text easy to read? • Links • Are links clearly marked? • Include matching text tags for image links. • General design • Is there consistent display in a variety of browsers? • Do pages download quickly? • Does entry/main page fit 640x460 pixels standard browser window?
Usability Issues re: Images • Graphics • Size of file • Ease of loading • ALT tags for most images
Navigation • Navigation • Include standard navigation menu • Clear, simple, easy to use and understand • Avoid scrolling when possible • Provide useful, descriptive page titles • Provide navigation back to main sections • Include index or site map
Universal Design Principles Consider the needs of people • with disabilities • who are unable to use a mouse and rely on the keyboard for internet use • who are older • using older hardware and software • with language barriers
ADA Compliance • Our site is mainly images, and therefore will not be very accessible to the sight-impaired. We plan to add ALT tags to all of the images. • We will consider making an all-text alternative site for people who use speech output systems that read aloud the text on the screen. • Include descriptive captions.
Accessibility Testing • Consult W3C Web Accessibility Initiative (WAI) and W3C Web Content Accessibility Guidelines. • Test site using a number of web browsers. • Consider how site displays with different monitor sizes and screen resolutions. • Can site’s features be accessed with keyboard only?
Accessibility Testing and Validation • Test for usability using software such as Wave 3.0 A-Prompt • Check code using W3C’s HTML validator • Conduct user testing by asking people unfamiliar with the site to use the site and make suggestions. • Add Content Rating
What’s Left for Usability? • Include Contact information and last updated information on the main page. • Consider adding a Search engine. • Printing capability • Provide print version of page if page will not print as shown in browser window.