Challenge Summary
Welcome to Brivo - Brand Story - Parallax Scrolling Design Challenge. In this Challenge, we are looking for your creative thoughts to design the pages that have parallax scrolling. For the "About Us" section of the site we want to have a creative method for conveying the Brivo company culture. Parallax site design offers a unique way to tell the Brivo story and we are looking to you to help us design these parallax pages for our "About Us" section.
This is a fun challenge (designing for Parallax) to test your creative limits and work with new ways of story telling and page display.
Round 1
Submit your initial screen for Checkpoint feedback
Feel free to add any other additional screens which are necessary to explain your concept of Parallax scrolling.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required page with all checkpoint feedback implemented.
Feel free to add any other additional screens which are necessary to explain your concept and flow
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Brivo is looking to redesign it's "About Us" section to match the new look and feel of their new website design. (See provided design assets). Their current About Us section can be seen here. Please use this for content reference. We are looking to display this content in a unique and innovative way to reflect the company culture. Parallax design sites have been identified as a style that we would like to explore for our new "About Us" section. Please reference the provided design direction document to get you thinking on your concepts. Please use this as a starting point for your design concepts. Please remember...we don't want to see exact copies of what we have provided for you...we want you to use this as a creative kick starter to get you thinking of how to make this better.
Challenge Downloads:
- Source files from the previous challenge are available on Google Drive.
- Please ask permission to bwalles"at"appirio.com and csystic"at"gmail.com
About Parallax Scrolling and other References:
Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images. To know more about parallax scrolling: http://en.wikipedia.org/wiki/Parallax_scrolling
- For good examples of Parallax sites...see this below references
Reference 1
Reference 2
Reference 3
IMPORTANT!! Design Considerations:
- Design the page of size 1024 px width and height as required.
- Show us how the page would transistion on scrolling down?
- Please incude images that you think would be good/fun for this page.
- Please go through the reference sites for inspiration but please DO NOT COPY from them.
- For this challenge we are providing Design Direction Document for you! DO NOT COPY from the Design Direction document exactly - they are meant to help guide you and let you understand the application we would like to see designed. Think about the the user experience/user interactions and show us your solutions!
Required Page:
We need the below contents for this page in parallax scrolling, we would like to have the a simple navigation that allows user to qucikly scroll to a particular section of the page.
Background Video:
For this Parallax scrolling, we are looking to have a Video as the background and contents will be in the foreground.
Page Navigation:
We would like to have a simple navigation for this parallax page, have the navigation as:
- Brivo Brand Story
- Brivo History
- Company
- Blog
Page Sections:
We are looking forward to see the following section examples in your designs.
Section 1: Brivo Brand Story
This will be shown by default and also page will be scrolled to this section when user clicks on "Brivo Brand Story" in Navigation.
- This page shows the Brivo Brand story.
- This section shows a couple of sub-sections "Powerful Security made Simple" and "Who we work with"
- You can use the contents shown in each of the sub-section
- Each of the sub-section has their own call-to-action button
- Video Thumbnail for company video spot giving a company history and brief introduction as well as company mission and some sort of inspirational message.
Section 2: Brivo History
This will be shown as user scrolls and also page will be scrolled to this section when user clicks on "Brivo History" in Navigation.
- This page will display a timeline for Brivo historical events
- Images, videos, and posts will be displayed on a timeline
- Events and posts will be organized by date and will contain expanded descriptions of events that a user can click on and explore
- Events may also contain links to other areas of the site
Section 3: Company
This will be shown as user scrolls and also page will be scrolled to this section when user clicks on "Company" in Navigation.
- Section Title: "Our Company"
- In this section, we would like to focus on the company details..
- We need to show a few sub-sections in this section "Experts in lorem ipsum", "Values/belifs of" and "Innovation & Technology lorem ipsum" and each of the sub-section shows a few lines of text.
- We are looking forward to ideas to see how each of these sub-sections can be shown considering that we have a background video in place while scrolling.
- Make sure to design the foreground in such a way that they clearly convey the message.
- At the bottom in this section, we would like to show "Our Team"
- Think of a creative way to show members of the Brivo team.
- We would like to see possibly team member vidoes and expanded top level biography of our team members and show a call-to-action: "Work with Brivo"
Section 4: Blog
This will be shown as user scrolls and also page will be scrolled to this section when user clicks on "Blog" in Navigation.
- This page will display the blog posts and allow user to navigative to the topics that interests them.
- We need a way for the user to do a smart search to look for the blog topics and Quote.
- We also a need a way to allow user to filter through the contents posts by selecting options - think on where this can be shown?
- User will also have options to browse through the Archives, how and where can this be show?
- Each of the blog posts show a topic title with few lines of text and a link "Learn More" to that particular content.
Target Audience
- New Users, Existing Customers and Dealers
Judging Criteria
- How well you design the provided design challenge
- Cleanliness of your graphics and design.
- Design and User Experience.
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) this will help review them in order.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors.
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.