Challenge Summary
Welcome to Simplify Solar Interactive Page Design Challenge!
We’re happy to bring an interesting and thrilling challenge that involves illustration skills and interactive concepts. Simplify Solar is looking forward to create ONE SINGLE responsive page (mobile and desktop) to show a how-to/learn page for users to easy understand the basics of solar systems.
Jump in now. Best of luck!
1. Simplify Solar Learn Page (Desktop and Mobile views)
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Simplify Solar Learn Page
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to design the look and feel of the Simplify Solar Learn Page. there is an existing page right now but we want to change it and make it more graphic and dynamic. We’re looking forward to see a responsive design for a landing that has for goal to inform users about building solar systems.
Screens Requirements
1. Simplify Solar Learn Page
- Create a design that uses the exact same content from the existing Simplify Solar Learn Page.
- Current navigation and content stays the same; the content NOT the look and feel, you're encouraged to improve it and make it part of your design style.
- There must exist a navigable table of contents to explore all the topics. It could be part of the interactive graphic. For example, user interacts with the graphic and there are links for user to "Learn more" (or any other inner link) and jump to the specific part of the page with the info.
- We envision a very graphic-illustrated design (e.g. infographic) that goes well along with some interactions/animations to help with the transitions among the large quantity of information to be displayed.
- One of the approaches we’d like to explore is using parallax scrolling, a technique that uses background movement to smoothly transition content in a page. See some cool samples here. It’s not mandatory to follow this approach but if you can create an alternate design using this it would be very much appreciated. We DO WANT YOU to explore your own original options that solve the design problem.
- The chat button and area doesn’t need to be redesigned. It’s not mandatory but if you want to propose a skin for it you’re welcome to do it.
- Ignore the subscribe to newsletter button, don’t include it in your design.
- Show hover/active states for buttons, hyperlinks, elements with interaction, etc.
- If you design animations or transitions please try to show them through several screens so they’re easy to understand.
Branding Guidelines
- Design branding should be in line with the Simplify Solar Website.
- Consider the attached design (SimplifySolar_Start.zip) as reference too since it’s a new page being designed by the company and they really like its style.
- You may suggest colors and fonts that are compatible.
- Fonts to be used are open to suggestions. They should look compatible with the current look and feel of the attached reference (SimplifySolar_Start.zip).
- Use the attached logo.
- Keep things consistent. This means all graphic styles should work together.
Reference
Please consider the following advices regarding to some external references. DO NOT COPY anything, use for inspiration only.
1. PowerScout
-Liked the interactive nature of it, it shows how everything is tied together and is visually appealing and works well with the rest of the design language of the site. Some things that can be improved here is to maybe gamify the graphic, show cause-effect better and add links embedded throughout the graphic which takes the user to a specific section on the same parallax page for more detailed information.
2. EnergySage
- Liked how comprehensive the amount of information is, the search function and how it ties in to the rest of the site. Some things that could be improved here is to reduce the number of clicks to get from one section to another and better navigation in mobile.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Use vector shapes to facilitate future modifications and make sure to check your design looks pixel perfect in both views.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge. Make sure to declare all of the used items.
Target User
- USA Homeowners (30-70 years old) but also anyone interested learning more about solar systems.
Judging Criteria
- Interpretation and adherence to the Branding Guidelines.
- Interpretation of the user experience.
- Is the website easy to use?
- Cleanliness of your graphics and design.
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
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Sketch. Layers should be named and well organized.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
We’re happy to bring an interesting and thrilling challenge that involves illustration skills and interactive concepts. Simplify Solar is looking forward to create ONE SINGLE responsive page (mobile and desktop) to show a how-to/learn page for users to easy understand the basics of solar systems.
Jump in now. Best of luck!
Round 1
Submit your design for a checkpoint feedback.1. Simplify Solar Learn Page (Desktop and Mobile views)
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback (ALL VIEWS).1. Simplify Solar Learn Page
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to design the look and feel of the Simplify Solar Learn Page. there is an existing page right now but we want to change it and make it more graphic and dynamic. We’re looking forward to see a responsive design for a landing that has for goal to inform users about building solar systems.
Screens Requirements
1. Simplify Solar Learn Page
- Create a design that uses the exact same content from the existing Simplify Solar Learn Page.
- Current navigation and content stays the same; the content NOT the look and feel, you're encouraged to improve it and make it part of your design style.
- There must exist a navigable table of contents to explore all the topics. It could be part of the interactive graphic. For example, user interacts with the graphic and there are links for user to "Learn more" (or any other inner link) and jump to the specific part of the page with the info.
- We envision a very graphic-illustrated design (e.g. infographic) that goes well along with some interactions/animations to help with the transitions among the large quantity of information to be displayed.
- One of the approaches we’d like to explore is using parallax scrolling, a technique that uses background movement to smoothly transition content in a page. See some cool samples here. It’s not mandatory to follow this approach but if you can create an alternate design using this it would be very much appreciated. We DO WANT YOU to explore your own original options that solve the design problem.
- The chat button and area doesn’t need to be redesigned. It’s not mandatory but if you want to propose a skin for it you’re welcome to do it.
- Ignore the subscribe to newsletter button, don’t include it in your design.
- Show hover/active states for buttons, hyperlinks, elements with interaction, etc.
- If you design animations or transitions please try to show them through several screens so they’re easy to understand.
Branding Guidelines
- Design branding should be in line with the Simplify Solar Website.
- Consider the attached design (SimplifySolar_Start.zip) as reference too since it’s a new page being designed by the company and they really like its style.
- You may suggest colors and fonts that are compatible.
- Fonts to be used are open to suggestions. They should look compatible with the current look and feel of the attached reference (SimplifySolar_Start.zip).
- Use the attached logo.
- Keep things consistent. This means all graphic styles should work together.
Reference
Please consider the following advices regarding to some external references. DO NOT COPY anything, use for inspiration only.
1. PowerScout
-Liked the interactive nature of it, it shows how everything is tied together and is visually appealing and works well with the rest of the design language of the site. Some things that can be improved here is to maybe gamify the graphic, show cause-effect better and add links embedded throughout the graphic which takes the user to a specific section on the same parallax page for more detailed information.
2. EnergySage
- Liked how comprehensive the amount of information is, the search function and how it ties in to the rest of the site. Some things that could be improved here is to reduce the number of clicks to get from one section to another and better navigation in mobile.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Use vector shapes to facilitate future modifications and make sure to check your design looks pixel perfect in both views.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge. Make sure to declare all of the used items.
Target User
- USA Homeowners (30-70 years old) but also anyone interested learning more about solar systems.
Judging Criteria
- Interpretation and adherence to the Branding Guidelines.
- Interpretation of the user experience.
- Is the website easy to use?
- Cleanliness of your graphics and design.
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
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Sketch. Layers should be named and well organized.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.