Challenge Summary
Welcome to the Hestia Responsive Web and Mobile Design Contest. The goal of this contest is to take the existing Catalog Before Login screens and create a design for how the page would interact and change based on a mobile device (phone & tablet). See the example of responsive designs: http://mediaqueri.es/
We want to keep the same branding and style as the provided New Login & Home – 04_1_Homepage, simply just organize the layout to provide a better user experience on a smaller screen. We’re looking for you to provide ideas to make our site easier to navigate on the go.
Round 1
Initial solutions of these following screens:
1. Phone – Responsive Homepage
2. Tablet – Responsive Homepage
Notes.jpg: Any comments about your design for the Client
Round 2
Final Designs:
1. Phone – Responsive Homepage (final)
2. Tablet – Responsive Homepage (final)
3. Menu/dropdown interactions for both
4. Clicking interactions for both (screens showing click interactions)
Hestia always looking to give their customers a better user experience by updating and enhancing the User Experience (UX) of their existing websites and web applications. For this contest we are looking for your help in analyzing and creating responsive design layouts based on the provided site design.
We are looking to create responsive design layouts for our mobile users. Responsive Design is a site that is designed in a way to interact and scale friendly with any size computer, tablet, or phone.
- More Info: http://en.wikipedia.org/wiki/Responsive_Web_Design
- Working Example: http://www.thismanslife.co.uk/projects/lab/responsiveillustration/
At this point the user will NOT be logged in so there are some elements that can be removed.
- Quick Order – not required
- Navigation – Orders, Payments, My Account, Customer Care are not required
Design Requirements
- Download the provided PSD file - we are keeping the design the same as the provided screen.
- For consistency, use iPhone and iPad sizes
- iPhone – 640 x 960 at 326 ppi – (Width x Height)
- iPad – 1536 x 2048 at 264 ppi – (Width x Height)
- Try to keep it clean and open while still using as many sections/elements as possible.
- Focus on ease of use!
- Start with mobile phone first and work your way back up
- Consider individuals with larger fingers and design accordingly
- Use RGB color mode
Submission Requirements
Submission should include at least (1) iPhone layout and (1) iPad layout of the Homepage.
Target User
- Potential Customer
- Current Customer
- Remodeler
- Vendors
- Associates
Judging Criteria
- How well the three match (again, see examples http://mediaqueri.es/)
- Cleanliness of your graphics and design.
- Buttons/link sizes
- Ease of use
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 responsive designs within it.
Submission File
Please submit (1) 640x960 JPG or PNG file at 326 ppi and (1) 1536x2048 JPG or PNG file at 264 ppi, both in RGB color mode
Submit JPG/PNG for your submission file. IMPORTANT - If you are submitting "small updates or changes" with multiple submissions please include in your notes file what is different or changed - this can be confusing to the client sometimes when they can't tell what is different.
Source Files
All original source files of the submitted design.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. As part of final fixes you may be asked to fix or update your screens to meet any missed requirements, forum requirements or milestone requirements.
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.