Challenge Overview
Welcome to the SunShot Livable Analytics Micro Website UI Prototype Challenge.
This website will be used for marketing the Livable Analytics research tools and products.
For this challenge, the goal is to build a microsite with six pages. PSD Photoshop and JPEG files are provided for each of the six pages.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need a clear explanation of the code to help us figure all the HTML/CSS/JS code functions and make it easier for future developers and the client to understand what you have built. You are allowed to use Bootstrap and jQuery for this challenge.
Final Submission Guidelines
Downloadable Files:
Storyboard.zip - Storyboard Design
Important!
- For this UI Prototype submission we need your submission support responsive solution from Desktop only.
- Suggest best practice Responsive Web Design Breakpoints Sizes
- Provided storyboard for Desktop version using widescreen display (1440px width).
- You need make sure your prototype responsive start from 992px width and upper
- Please use your best judgement adjust any element in page. Let us know for any clarification!
- Use Google font Open Sans family: normal 400 (for most text), bold 700 (for bold text), and semi-bold 600 (for semi-bold text).
- Scrollbar will use native/default browser scrollbar.
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- Required Technologies are: HTML5/CSS/Bootstrap and jQuery.
UI Prototype Page Requirements
General
- You need make sure your prototype responsive start from 992px width and upper
- Please use your best judgement adjust any element in page. Let us know for any clarification!
- Follow required file naming in your prototype submission
Main Navigation
- This area is located on the top of each page.
- Header no need use fixed placement
- Logo in upper left corner. Make a placeholder, logo asset will be added later.
- Use gray text as the default color.
- Teal text when page is active state
Footer
- Match column footer layout
- Footer text standard on all pages
- Links to all other pages, CBE website (www.cbe.berkeley.edu), and survey email (cbesurvey@berkeley.edu).
1). Landing Page
screenshot: 01-index.jpg
filename: index.html
- Carousel with three screens (text and image).
- Background image need covered the whole screen
- Use Fade transitions.
- Autoplay, 7 seconds per screen, 1-second fade.
- User can click the dotted pagination
- Use placeholders for icons on page, assets will be added later.
- Testimonial place below the main content area
- Match typography
2). Assessment Page
screenshot: 02-assessment.jpg
filename: assessment.html
- Below the main navigation, we just need show plain background with centered title
- Use placeholder graphics for nine icons.
- Use images for scorecard screens.
- Match all text information
- There’s blue bar below the main content area
3). How it Works
screenshot: 03-process.jpg
filename: process.html
- Below the main navigation, we just need show plain background with centered title
- Use placeholder graphics for the icons.
- Follow column layout for the icon and description
- Testimonial place below the main content area
- Match all text information
4). About
screenshot: 04-about.jpg
filename: about.html
- Below the main navigation, we just need show image background with centered title
- History information placed below the main background
- User thumbnail need use rounded corner from CSS stylesheet
- User information needs to be centered
- Show Center for the Built Environment in the bottom
5). Get Started
screenshot: 05-getstarted.jpg
filename: getstarted.html
- Below the main navigation, we just need show plain background with centered title
- Match text information
- There’s photo placed on the left side
- Sign up button, provide hover state
- Sign Up buttons need take user to this site: https://www.regonline.com/ieqsurvey
- Testimonial place below the main content area
6). Contact
screenshot: 06-contact.jpg
filename: contact.html
- Below the main navigation, we just need show plain background with centered title
- Display Contact information on the left side and photo on the right side
- Add button for Submit below the form, re-use from Get Started page
- When the user completes the form, an email is sent to cbesurvey@berkeley.edu with the subject line “Inquiry from {Name}”.
- The form includes the following fields (all of this information should be included in automatically generated email): Name, Email, Text box.
- Testimonial place below the main content area
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Responsive Web Design solution!
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed on the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS