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