Challenge Overview

Welcome to Appirio 50/50 Responsive Landing Page UI Prototype Challenge

The main task of this project is to create 1(one) Dynamic Responsive Landing Page based on the provided PSD Storyboard design and make sure they support responsive solutions on Desktop, Tablet and Mobile layout.

In the end of this challenge we need solid UI prototype result with best practice solutions. Good luck and we’re looking forward to your submissions!



Final Submission Guidelines

Downloadable Files:
Storyboard-Images.7z - Storyboard Images
Storyboard-PSD.7z - Storyboard PSD
Background_Collection.zip - Hi-Res Image Source

Important!
- Suggest best practice Responsive Web Design Breakpoints
- It’s important that the code be well organized and easy to read.  
- Follow fonts like storyboard look, you need use Source Sans Pro font
- Your prototype submission need support these following sizes:

a. Desktop Size
- Provided storyboard using 1550px width
- Set 1025px min-width for all desktop sizes
- Desktop sizes need to be fluid starting from 1025px and upper

b. Tablet Size
- Provided storyboard using Retina (2x) size
- Tablet Size breakpoints is within 768px and 1024px
- We provided how tablet look on Landscape and Portrait View
- Make sure your submission look sharp on Standard and Retina size

c. Mobile Size
- Provided storyboard using iPhone 6 Retina Portrait display (750px).
- Make sure your submission support Standard layout with 320px width  
- Make user graphics look sharp on Retina and Standard version
- All pages need use fluid layout when transform into Landscape or Portrait view.
- You might need adjust some element placement in 320px width screen size. Let’s discus any doubt about adjustments

Responsive Landing UI Prototype Page Requirements
DESKTOP VERSION

screenshot: Desktop/01-Landing-Page.jpg
- This is landing page look before user logged in
- Header bar, need use fluid width. Notice there’s shadow in the bottom of header bar
- Menu navigation placed on the left side.

Header Bar
- Header bar need use fluid width
- Header bar will remain in fixed placement when user scrolling the page
- Topcoder logo need always placed on the left side of browser screen
- Login button need always placed on the right side of browser screen
- Topcoder logo need link to this page
- Click Login button need displayed modal window. More details Explained below

Login Modal Window
screenshot: 03-LogIn-Modal.png
- When login modal Window show up, dark overlay transparent background need covered whole screen
- And make sure user  cannot able to scrolling up and down
- 2(two) login boxes displayed side by side, match the margin.
- There’s background image above the login title
- Put description on top of Login button
- Put dead links of Login button
- Click the overlay background need hide the Login modal window

Important: Section Interactions
- For Desktop screen, we need build dynamic height that covered browser height.
- You can see similar approach like this site: http://www.hugeinc.com/
- This is how section look when viewed on browser (screenshot: Desktop/02-Default-State.png)
- Dots pagination always placed centered with browser height
- Click each dots need take user to correct section
- Scroll to explore button always placed in the center of screen of each section
- Also, you need build the scroll down/up to automatically move down/up from one section to another
- And, click the  down/up arrow via keyboard also need support to move down/up from one section to another
- We need the same animation effect that will overlapping on section transition.
- When move from one section to another, header bar need remain in fixed placement
- When reach the last section which is action button sections, scrolling down need display the footer area
- We also provide you High Resolution images to make sure background image look good on wide screen

Introduction Area
- Background image need covered browser height and width
- All text information and buttons need always placed using left alignment and centered
- Scroll to explore text and button always placed on the bottom of screen
- When page showing this section, Scroll to explore text and button using white text colored style
- Click “I want to deliver” button, need display “Talent is ready” layer (screenshot: Desktop/02-Client-Transition-From-Left.png)
- When this layer show up, you need use slide transition from left side
- When layer show up, user should not able to scroll down/up the page
- Explore more button can be dead link
- Login link need load the modal window
- Click “x” button need hide the layer using slide transition to the left side
- Notice close button using dark color
- And then default section screen show up
- Click “I want to compete” button, need display “Talent is ready” layer (screenshot: Desktop/02-Community-Transition-From-Right.png)
- When this layer show up, you need use slide transition from right side
- When layer show up, user should not able to scroll down/up the page
- Become a member button can be dead link
- Login link need load the modal window
- Click “x” button need hide the layer using slide transition to the right side
- Notice close button using white color
- And then default section screen show up

Crowdsourcing is Exceptional For:
- Section title placed centered
- There’s 3 columns layout contains icon, title and description
- On dynamic browser height, content need always centered vertically and horizontally
- Learn More buttons can be dead links
- Scroll to explore text and button need placed on the bottom of screen of this section
- When page showing this section, Scroll to explore text and button, also the dots pagination need turn into grey colored style.
- Scroll actions need works to scroll up/down

Meet Our Community
- Match Meet Our Community section content like storyboard look
- Use correct color for 3 columns information
- On dynamic browser height, content need always centered vertically and horizontally
- Scroll to explore text and button need placed on the bottom of screen of this section
- When page showing this section, Scroll to explore text and button need turn into white colored style
- Scroll actions need works to scroll up/down

Crowdsource Challenge
- For this section, you need build Slideshow function contains 4 boxes at a time
- On dynamic browser height, content need always centered vertically and horizontally
- Each boxes contains of Challenge Type Icon, Challenge Type Name, Challenge Title, Deadline, Prize, Winner  thumbnails
- Notice there’s differences of box color based on challenge type
- Put dead links for View Challenge link and View Challenge button
- Build auto side and looping function for around 10 seconds per slide
- There’s dot pagination on the bottom of slideshow
- Match active and inactive current slide dot
- Click to another dot need change 4 boxes at a time
- You also need build function that allow user to change the slide by press left and right arrow from keyboard navigation
- When page showing this section, Scroll to explore text and button, also the dots pagination need turn into grey colored style.
- Scroll actions need works to scroll up/down

Quote Slideshow
- Match Quote section content like storyboard look
- On dynamic browser height, content need always centered vertically and horizontally
- Build auto side and looping function for around 10 seconds per slide
- Dots pagination use different color for this section
- Click to another dot need change 1 slide at a time
- On dynamic browser height, content need always centered vertically and horizontally
- When page showing this section, Scroll to explore text and button need turn into white colored style
- You also need build function that allow user to change the slide by press left and right arrow from keyboard navigation
- Scroll actions need works to scroll up/down
- Scrolling down the page need show up Action Buttons and Footer bar at the same time

Action Buttons
- Action buttons divided by 2 columns layout
- On dynamic browser height, content need always centered vertically and horizontally
- Put dead links for both Learn More buttons
- Scroll to explore text and button need placed on the bottom of screen of this section
- When page showing this section, Scroll to explore text and button, also the dots pagination need turn into grey colored style.

Footer Bar
- Footer bar need use fluid width
- Topcoder logo need always placed on the left side of browser screen
- Social buttons need always placed on the right side of browser screen
- Topcoder logo need link to this page
- Social buttons can be dead links

TABLET VERSION
Important!

- Scroll to explore text and button need to be hidden
- Swipe up and down need navigate to next or previous section
- But dots pagination need remain show up on the right side
- User still need able to click dots pagination to slide to correct section

A. Landscape Version
Login

screenshot: landscape/06-login-tablet.jpg
- When click Login button, background images divided equally
- Background images need covered whole screen
- Text and button placed centered and use white colored text
- Make sure scrollbar not show up

Introduction Area
screenshot: landscape/07-tablet1.jpg
- For tablet version, height need covered tablet screen, while text and buttons placed centered vertically
- Click “I want to deliver” button, need show up “Talent is ready” layer  (screenshot: landscape/13-tablet7.jpg  )
- Click “I want to compete” button, need show up “Ready to compete” layer  (screenshot: landscape/14-tablet8.jpg)
- Use consistent animation effect like desktop version
- Click x button need show up default introduction area

Crowdsourcing is Exceptional For:
screenshot: landscape/08-tablet2.jpg
- For tablet version, we need make the columns remain use 3 columns format
- You might need make the title and description automatically adjust the column width. While icons and buttons remain same
- Make sure content placed centered vertically

Meet Our Community
screenshot: landscape/09-tablet3.jpg
- For tablet landscape, make sure content placed centered vertically

Crowdsource Challenge
screenshot: landscape/10-tablet4.jpg
- For landscape version, need remain display 4 columns format
- Remain display dots pagination in the bottom of slideshow

Quote Slideshow
screenshot: landscape/11-tablet5.jpg
- For landscape version, quote text need adjust the screen width
- all content need placed centered of screen height
- Remain display dots pagination in the bottom of slideshow

Action Buttons & Footer Bar
screenshot: landscape/12-tablet6.jpg
- Action buttons area placed centered of screen height
- Footer bar always placed in the bottom of screen

B. Portrait Version
Login

screenshot: portrait/06-login-tablet.jpg
- For portrait version, you need make both area using stacked layout
- Background images need covered whole screen
- Click x button need hide the login layer
- Make sure scrollbar not show up

Introduction Area
screenshot: portrait/07-tablet1.jpg
- Background image need covered screen height
- Text information and button placed centered
- Click “I want to deliver” button, need show up “Talent is ready” layer  (screenshot: portrait/13-tablet7.jpg)
- Click “I want to compete” button, need show up “Ready to compete” layer  (screenshot: portrait/14-tablet8.jpg)

Crowdsourcing is Exceptional For:
screenshot: portrait/08-tablet2.jpg
- For portrait version, all icons and buttons need use stacked layout
- You need adjust description width

Meet Our Community
screenshot: portrait/09-tablet3.jpg
- Background image need covered screen height
- Section content need vertically centered

Crowdsource Challenge
screenshot: portrait/10-tablet4.jpg
- For portrait version, you need display 3 slides at a time
- Click dots pagination need show another 3 slides
- Slideshow content need vertically centered
- Slideshow need works by swipe left or right
- Make sure pagination adjust correct number of slide after current active slides changed to 3 slides

Quote Slideshow
screenshot: portrait/11-tablet5.jpg
- For portrait version, you need display content vertically
- Slideshow need works by swipe left or right

Action Buttons & Footer Bar
screenshot: portrait/12-tablet6.jpg
- For Portrait version, actions button use stacked layout
- Separator line need convert into horizontal line
- Footer bar placed in the bottom screen
 
MOBILE VERSION

Important!
screenshot: 00-phone-content-v3.jpg
- Scroll to explore text and button need to be hidden
- We need disable auto dynamic height for mobile version, each sections height need set by its content height
- Dots pagination need to be hidden for mobile version
- Please use fluid width on Mobile landscape!
- Remember, you need create consistent mobile look for these following sizes (320px and 375px). Also the Standard and Retina Sizes!
- Let us know if you face some issues while implement Mobile Version.

Login
screenshot: 01-login-phone-login.jpg
- For portrait version, you need make both area using stacked layout
- Background images need covered whole screen
- Click x button need hide the login layer
- Make sure scrollbar not show up

Introduction Area
- Backgroung image need covered this area section
- Click “I want to deliver” button, need show up “Talent is ready” layer  (screenshot: 03-phone1.jpg)
- Click “I want to compete” button, need show up “Ready to compete” layer  (sscreenshot: 04-phone2.jpg)
- Click “x” button need hide the layer

Crowdsourcing is Exceptional For:
- For portrait version, all icons and buttons need use stacked layout
- You need adjust description width

Meet Our Community
- Section content need vertically centered

Crowdsource Challenge
- For mobile version, you need display 1 slide at a time
- Click dots pagination need show another 1 slides
- Slideshow need works by swipe left or right
- Make sure pagination adjust correct number of slide after current active slides changed to 1 slide

Quote Slideshow
- All content need placed centered of screen height
- Remain display dots pagination in the bottom of slideshow
- Use consistent styling like tablet/desktop screen

Action Buttons & Footer Bar
actions button use stacked layout
- Separator line need convert into horizontal line
- Footer bar placed in the bottom screen

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 consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.

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 in 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
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- Chrome, Firefox and Safari  on iPhone 4, 4s, 5, 5s, 6 and 6+ (Landscape & Portrait View)
- Chrome, Firefox and Safari  on iPad (Landscape & Portrait View)
- Android Browser

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30053255