Responsive/Fluid/Liquid UI for Social Networking Website


Job Description

Responsive/Fluid/Liquid UI for Social Networking Website:

Aim To design and develop a social networking website.

• Sample wireframe and html required before awarding project. Those who cannot provide sample wire-frames and html need not apply.
• No embargo on revision, while designing.
• In Case of more, pages are required, ready to add them while working.
• Changes to the scope of the project, can be made at any time.
• Accept the proposal as is.
Overview: A social networking website, first module out of many to be a micro-blogging site, mainly aiming celebrities, politicians, sports persons and personalities, strictly responsive layout based on twitter-bootstrap. The first module will have:-

• Platform to submit thoughts, feeds updates by text/voice input.
• Thoughts, feeds will be liked/commented/ or shared by the other users of the website.
• These posts can be private, restricted to limited persons or public.
• Based on the likes and comments, thoughts, feeds will be rated as popular per week.
• Based on the number of fan following a utterer will be in top utterers list
• Any user who has logged in can see anybody’s profile and start following the other user, unless other user has put his profile to restricted followers only.

• Profile, Other Member Profiles,
• Member Directory,
• Notification Bar/ Panel, Activity and status messages/ alerts (like the Facebook™ wall),
• Member Directory/others Search,
• Friends, Private Message,
• Friends online, live chat windows, Friends online widget and a chat rooms for members
• Latest utter/top utter/top utterer widget,
• Latest member status posts widget, Unanswered forum posts widget (using a Q&A style forum).
• Integration with other social networking website like facebook, twitter and linkedin. Integration will involve features two things:-
a) New feeds from all the social networking site to which a user is already a member, be displayed at one place.
b) All detail, photos, videos and posts of other social networking to which user has joined, can be accessed.

Design Process
The work Desired
1. Home page - Sign-up, login, forgot password and brief over view about the website
2. About US - introduction to our company and an overview of what we do.
3. Feedback - A simple form to apply for job/feedback or contact may also be included on this page.
4. Terms and condition. - A sample page for terms and condition
5. Weekly Update – having weekly total likes, comments, new followers
6. Search result display
7. Social Networking Integrations - Facebook, Twitter, Google+
8. Inside pages will have following:-
a. Header
• Notification Alert It will have badges like facebook in red colours showing users how many likes/shares/comments he had by who and on which utter.
• Private Message Alert user will get a notification for private inbox message, which can be disable by user, if he doesn’t want any direct message.
• Utter Alert user will get alert if new utter has been posted by the person whom he is following and vice-versa.
• User Search Option
• User setting and logout – a drop down where he has following list
Account settings
Notification Settings
Security and privacy settings
Hide and deactivate account
b. Body
Can be divided into two - Side bar and main body.
In the side bar user’s bigger photograph along with his brief description.
Number of Utters, followers and fans he has.

c. Footer
i. To have link like about us, feedback, apply for job, terms and conditions.

Milestone 1:

• Designing and wireframes –
a. Home page to include login, registration panel, Home, about, feedback, terms pages.
b. Inner pages to include, user profiles and advanced user profile.
c. Utter postings and advanced utter postings (images, videos, etc.),
d. private messages
e. Chat messages and online friends.
f. User comments, likes, shares
g. Search directory to include users profile, utters, images, videos
h. Statistics like weekly update
i. Social Networking Integrations Facebook, Twitter, Google+

Milestone 2:

• Sample HTML for home page and inner pages.
• HTML conversion for the inner pages

Milestone 3:

• Database Design

• Content Pages Design and add Sample Content

• Basic functions like registering with the site, Login Functionality

Milestone 4:

• Writing functions like posting the content, posting the comment, follow, reply, popular posts, recent posts, post and reply count display, search, messages, notifications.'

Milestone 5:

• Testing and Bug fixes (if any)


1. Complete Source Files.
2. Template Source Files.

Technology Used : PHP/JSP, MYSQL, HTML on twitter-bootstrap, CSS, JAVASCRIPT

Time line: 8-10 weeks (flexible)

Skills: design, facebook, twitter