Challenge Summary
Welcome to the Hestia B2B Merchandising Graphic Standards Design Contest. The goal of this contest is to review the provided Storyboards and help Hestia create Graphic Standards for the "Merchandising" area of their 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 "Merchandising" section 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 "Merchandising 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 Merchandising pages. By clearly defining the Hestia B2B User Interface and maintaining consistency in design, color and font usage. Hestia ran a previous contest to document the Hestia B2B UI - for this contest we need you to document the "Merchandising" pages of the application. Requirements Research Graphic Standards Manuals and how they are used. Apply these ideas to a Graphic Standards Manual defining the Hestia B2B Merchandising Application UI. Hestia B2B Merchandising 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, we will provide previous Hestia B2B UI Element Style Guides (Hestia-Style-Guide.zip). - 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. We would like something that is consistent/works with with the current Hestia Standards Guide. It can look like its own reference guide. Graphic Standard items to Define Note: 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 Slideshow/Carousel and how they should work/hovers/active. Make sure the "curves" graphic will be used or not used as part of slides in the future changes. - Define the Page Grid, Templates, Modules of Merchandising Generic Profile. - Define the Page Grid, Templates, Modules of Merchandising Plumbing Home Page. - Define the Page Grid, Templates, Modules of Merchandising E-Business Solutions. - Define the Page Grid, Templates, Modules of Merchandising Parts. - Define the Page Grid, Templates, Modules of Merchandising Safety & Tools. - Define the Page Grid, Templates, Modules of Merchandising Plumbing Slideshow. - Define the Page Grid, Templates, Modules of Merchandising Utilities. - Define pixel dimensions of Top Header Banner/Page Title - Define pixel dimensions of 3 Top Area Featured Items - Define pixel dimensions of Product Categories Navigation - Define pixel dimensions of Top Seller Products - 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 "Merchandising" 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 Merchandising application will need to be documented in the future. Resources & Requirements - We will provide the Hestia B2B Merchandising graphic design/look and feel - reference the provided PSD files. - Some items like buttons/links, boxes dimensions 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-Merchandising-Generic-Profile.psd - How a Merchandising Profile could Look - 3 column layout - Note Top Products Banner Height is not consistent - Note Slideshow Height is not consistent 02-Merchandising-Plumbing-Home-Page.psd - How a Merchandising Plumbing Homepage could look - 2 column layout 03-Merchandising-E-Business Solutions.PSD - How a Merchandising E-Business Solutions Landing page could look - Full column layout 04-Merchandising-Parts.psd - How a Merchandising Parts Landing page could look 05-Merchandising-Safety & Tools.PSD - How a Merchandising Safety & Tools Landing page could look 06-Merchandising-Plumbing-Slideshow.PSD - Each slides using in Merchandising Plumbing Carousel/Slideshow 07-Merchandising-Utilities.psd - 3 column layout. - Note: Hidden layers in the PSD file have been turned "on" to show the carousel/slideshow items. Target User - Designers and Developers of the Hestia B2B Application - Hestia Graphic Designers and Ad creators 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 Merchandising 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. Notes.jpg: Any comments about your design for the Client Round Two Hestia B2B Merchandising Graphic Standards Manual.doc - Final = Final Design Design Element(s) - PSD Files (Final Design) of any New design items you created. Notes.jpg: Any comments about your design for the Client Submission & Source Files Preview Image Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it. 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 as Round 1 Milestone Winners. These winners and any member who had a passing submission in round one will be eligible to compete in Round 2 for the additional $650 in prizesRound 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 "Merchandising 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 Merchandising pages. By clearly defining the Hestia B2B User Interface and maintaining consistency in design, color and font usage. Hestia ran a previous contest to document the Hestia B2B UI - for this contest we need you to document the "Merchandising" pages of the application. Requirements Research Graphic Standards Manuals and how they are used. Apply these ideas to a Graphic Standards Manual defining the Hestia B2B Merchandising Application UI. Hestia B2B Merchandising 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, we will provide previous Hestia B2B UI Element Style Guides (Hestia-Style-Guide.zip). - 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. We would like something that is consistent/works with with the current Hestia Standards Guide. It can look like its own reference guide. Graphic Standard items to Define Note: 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 Slideshow/Carousel and how they should work/hovers/active. Make sure the "curves" graphic will be used or not used as part of slides in the future changes. - Define the Page Grid, Templates, Modules of Merchandising Generic Profile. - Define the Page Grid, Templates, Modules of Merchandising Plumbing Home Page. - Define the Page Grid, Templates, Modules of Merchandising E-Business Solutions. - Define the Page Grid, Templates, Modules of Merchandising Parts. - Define the Page Grid, Templates, Modules of Merchandising Safety & Tools. - Define the Page Grid, Templates, Modules of Merchandising Plumbing Slideshow. - Define the Page Grid, Templates, Modules of Merchandising Utilities. - Define pixel dimensions of Top Header Banner/Page Title - Define pixel dimensions of 3 Top Area Featured Items - Define pixel dimensions of Product Categories Navigation - Define pixel dimensions of Top Seller Products - 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 "Merchandising" 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 Merchandising application will need to be documented in the future. Resources & Requirements - We will provide the Hestia B2B Merchandising graphic design/look and feel - reference the provided PSD files. - Some items like buttons/links, boxes dimensions 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-Merchandising-Generic-Profile.psd - How a Merchandising Profile could Look - 3 column layout - Note Top Products Banner Height is not consistent - Note Slideshow Height is not consistent 02-Merchandising-Plumbing-Home-Page.psd - How a Merchandising Plumbing Homepage could look - 2 column layout 03-Merchandising-E-Business Solutions.PSD - How a Merchandising E-Business Solutions Landing page could look - Full column layout 04-Merchandising-Parts.psd - How a Merchandising Parts Landing page could look 05-Merchandising-Safety & Tools.PSD - How a Merchandising Safety & Tools Landing page could look 06-Merchandising-Plumbing-Slideshow.PSD - Each slides using in Merchandising Plumbing Carousel/Slideshow 07-Merchandising-Utilities.psd - 3 column layout. - Note: Hidden layers in the PSD file have been turned "on" to show the carousel/slideshow items. Target User - Designers and Developers of the Hestia B2B Application - Hestia Graphic Designers and Ad creators 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 Merchandising 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. Notes.jpg: Any comments about your design for the Client Round Two Hestia B2B Merchandising Graphic Standards Manual.doc - Final = Final Design Design Element(s) - PSD Files (Final Design) of any New design items you created. Notes.jpg: Any comments about your design for the Client Submission & Source Files Preview Image Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it. 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.