Challenge Summary
Welcome to the Hestia B2B Graphic Standards Design Contest. The goal of this contest is to review the provided Storyboards and help Hestia create Graphic Standards for their new B2B Web Application. You will need to research Graphic Standards Manuals and how they should be used. The purpose of this contest is to document the User Interface of the Hestia B2B Application.
At the end of this contest the Client is looking to have a clean, intuitive, and easy-to-use Graphic Standards Manual that they can provide in future Studio and Development contests to keep their B2B Application User Interface design consistent.
Read the Contest Details carefully and let Hestia know if you have any questions.
Contest Details Hestia is always looking to give their customers a better user experience by providing new and up-to-date features in their B2B Web Application. Over the last few months the Studio Community has helped Hestia create a new user interface for the B2B Application. We are now at a stage in the process where we need to start documenting and defining the Hestia B2B Graphic Standards to keep the User Interface consistent with all future design and development work. What are Graphic Standards? Consistency is key to successfully conveying the Hestia B2B application User Interface (UI) to their Users. A strong and consistent visual style helps shape the way B2B Users will interact and learn how to use the B2B Web Application. The first step is to review and document the User Interface into a document of "Graphic Standards" This guide will help Hestia to avoid confusion when building new B2B pages, Widgets, Mobile Applications etc. by clearly defining the Hestia B2B User Interface and maintaining consistency in design, color and font usage. Requirements Research Graphic Standards Manuals and how they are used. Apply these ideas to a Graphic Standards Manual defining the Hestia B2B Application UI Hestia B2B Application Graphic Standards Manual - Your Hestia B2B Application Graphic Standards Manual source file must be in Microsoft Word. (Normally we would suggest an InDesign or QuarkXpress file format but Hestia needs the guide in Word format so they have the ability to edit the document.) - Design and Create a Word Template for your Graphic Standards Manual - Keep your Word template simple and take design cues from the Hestia B2B Application - Create Sections/Pages defining the items below (a section detailing font uses, a section detailing color usage etc.) - You can include screen shots within your document to illustrate correct usage. - The overall design and layout of the Standards Manual is up to you but it should read like a quick reference guide. Graphic Standard items to Define Note: Some graphic items are not consistent across screens (buttons, links etc) - we are looking for you to help define what the correct standards should be. - Define Colors, Color usage and correct Hex numbers. - Fonts (Fonts Names etc.) - Define Font sizes (H1, H2, Copy, Link etc) - Font Colors and correct usage - Link Colors, Hover and Active states. - Button Colors, Hover and Active states. - Background Colors and correct usage - Gradients and correct usage - Define the Page Grid, Templates, Modules - Logo dimensions and placement - Define the Navigation/dropdowns and how they should work/hovers/active. - Define the Breadcrumb Navigation - Define Merchandising areas and how a product should be presented. - Content Area pixel dimensions - Define the Left Navigation - placement, fonts, colors. - Define Alert message (How should they look and correct placement) - Define the Modal window look and feel - Define Tooltips. - Define icon usage. - Make sure the blues are consistent across screens - Pages need to load fast - look to remove any unnecessary gradients, curves etc. - Define any Best Practices? This is an initial list of graphic items and ideas that we think the Hestia B2B Graphic Standards Manual should contain. You are welcome to add additional items you feel are necessary/useful. Some if the graphic items listed won't be found/available in the referenced screens. We would like you to create/define any missing items based on your UI analysis and design knowledge/skills. This document will continue to grow beyond this contest as more areas of the Hestia B2B application will need to be documented in the future. Resources & Requirements - We will provide the Hestia B2B graphic design/look and feel - reference the provided PSD files. - Some items like buttons/links may NOT be consistent - make them consistent! - We would like you to create any NEW graphics to fill-in any missing details. Client UI Reference Notes: Here are some items we would like to note as you analyze the UI 01-B2B-Application-Home.psd - We want to keep the bright blue hyperlink color and make this consistent across screens - We prefer the "green +" in the Cart button as a highlight color (where can this be used effectively and consistently) - We prefer the look/shape/color of the "Search" button - Note: Hidden layers in the PSD file have been turned "on" to show the Locations Finder and Navigation Drop-downs 02_B2B-Merchandising-Page.psd - How a Merchandising page could look - 2 column 03_B2B-Merchandising-Page-Full.psd - How a Merchandising or Features page could look - Full page 04-B2B-Search-Results-Grid.psd - Product Search Results Grid view - Note the buttons are not consistent 04-B2B-Search-Results-List.psd - Product Search Results List view - Note the buttons are not consistent 05-B2B-Product-Details.psd - We like the usage of the Green "Add to Cart" button (can this be used as effectively anywhere else?) - Note the Tab design 06-B2B-Shopping-Cart.psd - Note the "Mini-Cart" layer - Note the buttons are not consistent. 07-MyList-Sub-Categories.psd - We like how the buttons look on this page - We like how subtle the green is and how its being used. 07-MyList-Sub-Categories-ERROR.psd - Note the Error Message Target Audience - Designers and Developers of the Hestia B2B Application Judging Criteria - How well you create the Hestia B2B Application Graphic Standards Guide - How thorough you are in your UI analysis - Cleanliness of your graphics and design Contest Deliverables Round One Hestia B2B Graphic Standards Manual.doc - First Draft = Your submitted design solution for a review Design Element(s) - PNG/JPG Files of any New design items you would like the Client to review and comment on. Round Two Hestia B2B Graphic Standards Manual.doc - Final = Final Design Design Element(s) - PSD Files (Final Design) of any New design items you created. Submission & Source Files Preview Image Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screen-shot of your submission within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections. Submission File All Requested Contest Submission Requirements stated above. Source Files All original source files of the submitted design. Files should be created in Microsoft Word and Adobe Photoshop. Adobe Photoshop files should be saved as layered PSD files. Final Fixes As part of the final fixes phase you may be asked to edit or add-on additional items to your Graphic Standards Manual Word file.
Round 1
At the end of Round 1, the Client will choose five (5) Round 1 winners, each will win $50 and a Design Review. These winners and any member who had a passing submission in Round 1 will be eligible to compete in Round 2 for the additional $1500 in prizes.Round 2
Round 2 will start with the announcement of the Five (5) $50 Round 1 winners and their design review from the Client.Contest Details Hestia is always looking to give their customers a better user experience by providing new and up-to-date features in their B2B Web Application. Over the last few months the Studio Community has helped Hestia create a new user interface for the B2B Application. We are now at a stage in the process where we need to start documenting and defining the Hestia B2B Graphic Standards to keep the User Interface consistent with all future design and development work. What are Graphic Standards? Consistency is key to successfully conveying the Hestia B2B application User Interface (UI) to their Users. A strong and consistent visual style helps shape the way B2B Users will interact and learn how to use the B2B Web Application. The first step is to review and document the User Interface into a document of "Graphic Standards" This guide will help Hestia to avoid confusion when building new B2B pages, Widgets, Mobile Applications etc. by clearly defining the Hestia B2B User Interface and maintaining consistency in design, color and font usage. Requirements Research Graphic Standards Manuals and how they are used. Apply these ideas to a Graphic Standards Manual defining the Hestia B2B Application UI Hestia B2B Application Graphic Standards Manual - Your Hestia B2B Application Graphic Standards Manual source file must be in Microsoft Word. (Normally we would suggest an InDesign or QuarkXpress file format but Hestia needs the guide in Word format so they have the ability to edit the document.) - Design and Create a Word Template for your Graphic Standards Manual - Keep your Word template simple and take design cues from the Hestia B2B Application - Create Sections/Pages defining the items below (a section detailing font uses, a section detailing color usage etc.) - You can include screen shots within your document to illustrate correct usage. - The overall design and layout of the Standards Manual is up to you but it should read like a quick reference guide. Graphic Standard items to Define Note: Some graphic items are not consistent across screens (buttons, links etc) - we are looking for you to help define what the correct standards should be. - Define Colors, Color usage and correct Hex numbers. - Fonts (Fonts Names etc.) - Define Font sizes (H1, H2, Copy, Link etc) - Font Colors and correct usage - Link Colors, Hover and Active states. - Button Colors, Hover and Active states. - Background Colors and correct usage - Gradients and correct usage - Define the Page Grid, Templates, Modules - Logo dimensions and placement - Define the Navigation/dropdowns and how they should work/hovers/active. - Define the Breadcrumb Navigation - Define Merchandising areas and how a product should be presented. - Content Area pixel dimensions - Define the Left Navigation - placement, fonts, colors. - Define Alert message (How should they look and correct placement) - Define the Modal window look and feel - Define Tooltips. - Define icon usage. - Make sure the blues are consistent across screens - Pages need to load fast - look to remove any unnecessary gradients, curves etc. - Define any Best Practices? This is an initial list of graphic items and ideas that we think the Hestia B2B Graphic Standards Manual should contain. You are welcome to add additional items you feel are necessary/useful. Some if the graphic items listed won't be found/available in the referenced screens. We would like you to create/define any missing items based on your UI analysis and design knowledge/skills. This document will continue to grow beyond this contest as more areas of the Hestia B2B application will need to be documented in the future. Resources & Requirements - We will provide the Hestia B2B graphic design/look and feel - reference the provided PSD files. - Some items like buttons/links may NOT be consistent - make them consistent! - We would like you to create any NEW graphics to fill-in any missing details. Client UI Reference Notes: Here are some items we would like to note as you analyze the UI 01-B2B-Application-Home.psd - We want to keep the bright blue hyperlink color and make this consistent across screens - We prefer the "green +" in the Cart button as a highlight color (where can this be used effectively and consistently) - We prefer the look/shape/color of the "Search" button - Note: Hidden layers in the PSD file have been turned "on" to show the Locations Finder and Navigation Drop-downs 02_B2B-Merchandising-Page.psd - How a Merchandising page could look - 2 column 03_B2B-Merchandising-Page-Full.psd - How a Merchandising or Features page could look - Full page 04-B2B-Search-Results-Grid.psd - Product Search Results Grid view - Note the buttons are not consistent 04-B2B-Search-Results-List.psd - Product Search Results List view - Note the buttons are not consistent 05-B2B-Product-Details.psd - We like the usage of the Green "Add to Cart" button (can this be used as effectively anywhere else?) - Note the Tab design 06-B2B-Shopping-Cart.psd - Note the "Mini-Cart" layer - Note the buttons are not consistent. 07-MyList-Sub-Categories.psd - We like how the buttons look on this page - We like how subtle the green is and how its being used. 07-MyList-Sub-Categories-ERROR.psd - Note the Error Message Target Audience - Designers and Developers of the Hestia B2B Application Judging Criteria - How well you create the Hestia B2B Application Graphic Standards Guide - How thorough you are in your UI analysis - Cleanliness of your graphics and design Contest Deliverables Round One Hestia B2B Graphic Standards Manual.doc - First Draft = Your submitted design solution for a review Design Element(s) - PNG/JPG Files of any New design items you would like the Client to review and comment on. Round Two Hestia B2B Graphic Standards Manual.doc - Final = Final Design Design Element(s) - PSD Files (Final Design) of any New design items you created. Submission & Source Files Preview Image Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screen-shot of your submission within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections. Submission File All Requested Contest Submission Requirements stated above. Source Files All original source files of the submitted design. Files should be created in Microsoft Word and Adobe Photoshop. Adobe Photoshop files should be saved as layered PSD files. Final Fixes As part of the final fixes phase you may be asked to edit or add-on additional items to your Graphic Standards Manual Word file.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.