Challenge Overview
Welcome to SFDC Communities Blogging UI Prototype Challenge (Desktop) - Part 1. In this challenge, we are looking forward to your UI prototype for SFDC Communities Blogging.
For this challenge, we need you focus to create prototype that will fully work within DESKTOP platform.
In the end of this challenge we need solid UI prototype result with best practice solution, that can be updated easily in the future challenges when improved the codes to support Tablet and Mobile version.
Tips for Success:
Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Final Submission Guidelines
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
PAGE REQUIREMENTS:
Notes:
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- All forms input on every page MUST follow storyboard design look consistent across required browsers.
- Width must be fluid as browser width
- Match all fonts like on storyboard. Use @font-face technique.
- For this Desktop Version, suggest how hover state look for every buttons and links. Make sure the style not far off from our current theme.
- Please save all data in separate data/*.json files, and use JavaScript to load the data. And use well-defined methods for retrieving the data, e.g. getting a list of recent blog posts might use getPosts(), were as getting comments might use getComments(postId) (Or) come up with any other methods that you recommend (Angular JS, etc...)
1) All Posts View: (01_Profile_Blog_View_BlogRoll.jpg)
- This is the default page with “Blogroll (500)” as active link
- In this page, make all the blue color text as dead links (#) and please link certain pages as given below…
* Add Blog Post:
- This should be linked to 02_Profile_Blog_NewPost.jpg
* Sort By drop-down:
- Clicking on this need to show the drop down as shown in 01_Profile_Blog_View_dropdown.jpg
- Default value is “Sort By”, options within the drop-down are “Date Published, Comments, Views and Likes”
* Blogroll (500) - 01_Profile_Blog_View_BlogRoll.jpg:
- These views are all the same just that, when a particular view is selected then it needs to show active state (black color)
- In these views, each of the blog posts will have a below called “Preview”
- Clicking on a blog-post title in this view should take the user to 01_Read_Blog.jpg
* All (123), Published (123), Drafts (123):
- These views are all the same as blogroll, when a particular view is selected then it needs to show active state (black color)
- In these views, each of the blog posts will have a below called “Edit, Trash, Preview, Unpublish”
* Clicking on Post title should take the user to 03_OpenedByAuthor_PublishedBlog.jpg
* Trash (123) - 01_Profile_Blog_View_Trash.jpeg:
- This is similar to other (blog roll, all, published and drafts) view..
- For each post we need these below links “Undelete, Preview and Delete Permanently”
* Pagination:
- Please make sure the pagination starts from page “1”…
- Currently storyboards shows from 5…
2) Create New Blog Post: (02_Profile_Blog_NewPost.jpg)
- When a user selects “Add Blog Post” then we show this screen…
- Please see below for the interactions required in this page
* Go Back:
- This will take the user back to “03_OpenedByAuthor_PublishedBlog.jpg"
* Preview:
- Clicking on this button will show preview in a new page/tab..
- This needs to take the user to a view similar to “03_OpenedByAuthor_PublishedBlog.jpg” but we won’t have all the options…we need to remove everything that is shown below “Like Blog Post, Social Share” buttons – so we only show the blog post for preview…
* Publish Post:
- Clicking on this button will take the user to “03_OpenedByAuthor_PublishedBlog.jpg”
* Main Content:
- For the “main content” below “Perma link” – it comes with rich text tools and a text area…please include those icons as shown and each of them has their own action items – see 02_Profile_Blog_NewPost (Notes).jpg to see the purpose of icons..
- “Insert Link” (6th Icon): Shows 02_Profile_Blog_NewPost_InsertLink.jpg
- “Insert Media” (8th Icon): Shows 02_Profile_Blog_NewPost_InsertPhoto_Chatter-Files.jpg (see below for more details on this screen).
* Insert Media:
- This modal is shown when user clicks on “Insert Media” icon
- This modal has three tab links “Upload, URL and Chatter Files”
- Upload view is shown in 02_Profile_Blog_NewPost_InsertPhoto_Upload.jpg
- Chatter Files view is shown in 02_Profile_Blog_NewPost_InsertPhoto_Chatter-Files.jpg
- URL View is shown in 02_Profile_Blog_NewPost_InsertPhoto_URL.jpg
- In the above 3 views, “Insert Post” or “Close” icon in top right will close the modal window…
* Topics Section:
- In this section, user will have options to add topics related to this blog post
- Default value for the drop-down will be “Choose Topics Here” and then they will choose some topics….assume there are few options in the drop-down...”Marketing, Self-Improvement, Option 3, Option 4, Option 5…”
- Assume a user selects “Marketing” and clicks “Add”, then we need to show “Marketing” in above textbox and allow them to remove it by clicking on the “close” button..
* Bottom Buttons:
- “Move to Trash” button: This is a dead link
- “ Save Draft” button: This takes the user to “01_Profile_Blog_View_BlogRoll.jpg” with “Drafts” tab as active…
- “Preview” button: Clicking on this button will show preview in a new page/tab…This needs to take the user to a view similar to “03_OpenedByAuthor_PublishedBlog.jpg” but we won’t have all the options…we need to remove everything that is shown below “Like Blog Post, Social Share” buttons - so we only show the blog post for preview…
3) Blog Post View (Author View) - 03_OpenedByAuthor_PublishedBlog.jpg:
- Follow the storyboard for this view – note that this view admin capabilities as it was created by the logged in user..
- We need below interactions in this view…
* “Like Blog Post” button
- Clicking on this button need to change the “You Liked This” button (see 01_Read_Blog.jpg)
- Again clicking on “You Like This” will change it to “Like Blog Post” button
* “Social Share” button
- Clicking on this button should show this view “03_Profile_Blog_PostPreview_Share.jpg”
- Within the ”Social Share” modal, clicking on “Share Now” or “Close” icon should close the modal window…
For below interactions, please find corresponding UI elements in 01_Read_Blog.jpg
* Add Comment:
- Click on this button will show a comment box like shown in 01_Read_Blog.jpg, but it needs to be shown just below the “Add Comment” button… current placement of comment box in 01_Read_Blog.jpg is with the assumption user has clicked “Reply for the 2nd comment, so it shown below that – please show what happens on clicking in “reply” as well...
* “Follow:
- Click on this button will change it to “Unfollow” button and clicking again will change it back to “Follow” ..
* Any other links will be a dead link for now…
4) Blog Post View (Reader View) - 01_Read_Blog.jpg:
- Follow the storyboard for this view – note that this view doesn’t have any admin capabilities as the blog post was not created by the logged in user…
- All Posts from the blogroll view that were not created by the currently logged in user will see this view…
- All interactions as mentioned in the “Blog Post View (Author View) is required here except anything that is not a part of this view…
The following pages are required in your submission by using Responsive Design solution
1. All Posts View
2. Create New Blog Post
3. Blog Post View (Author View)
4. Blog Post View (Reader View)
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.
- Documentation of your prototype
CODE REQUIREMENTS:
HTML/CSS Requirements
You're encouraged to use and take advantage of CSS3.
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.
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.
No inline CSS styles- all styles must be placed in an external stylesheet.
Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
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)
Label all CSS, Javascript, or HTML hacks with explanations so others will understand.
Your code must render properly in all browsers listed in the Browser Requirements section.
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
- We’re allowed limited JQuery or JQuery plugins. We want to make sure the overhead of all the JS libraries is very, very small, so please make sure that all JS libraries used are approved in the forum.
Browsers Requirements
- Firefox Latest Version
- Safari Latest Version
- Chrome Latest Version