Responsive Social Networking Website Design (Guaranteed)
Check out timarcher's Web page design contest…
What industry do you think your business is most related to?
Community & Non-Profit
Tell us a bit about who you are and the people you reach
Social networking focused on: (1) collaboration between people with common goals and values, (2) personal growth, and (3) charitable service.
Xethnic’s design objective is a user interface that provides easy reading and navigation across a wide variety of smartphones, tablets, laptops and widescreen monitors. All of the web pages should use responsive web design practices, meaning they should scale nicely for different sized screens. Additionally, all web pages should be designed to be implemented in HTML5, and should be shown using HTML5 compatible controls so that the implementation can achieve the maximum level of portability. The following table defines a few requirements for designing the pages to be responsive and portable. 1. Use a responsive web design. For example, layout controls so that they can automatically resize and float left when the page is resized. Each page should have a mobile and widescreen view. 2. One of the main select criteria will be the ease in which the design can be achieved in HTML5. 3. Prefer to use HTML5 controls. Text controls, including email, passwords, and so forth should use placeholders instead of labels. Note: I realize not all browsers support this right now but I anticipate it will be more widely supported before the services go live. 4. Automatically resize to fit on typical smartphone 5. Support easy navigation and reading on a minimum screen size of 2.2 inches. 6. Support a minimum screen resolution of 320 x 240 pixels without horizontal scrolling 7. Support easy navigation and reading on a maximum screen resolution of 2560 x 1440 pixels 8. Currently have no particular preferences on colors or typography
Page 1 - Home Page The home page is the index page accessed when anyone on the Internet browses to the main URL. I prefer a very clean design with minimal text and clutter. The page should use a responsible web design and contain the following elements: 1. Website name. The “Xethnic” name in simple text or graphic. 2. Login link. An image, button or other link that takes an existing member to the login page. Note: I do not want the user to log in from the home page. I will have a separate page for login so that it is easier to see for mobile users. 3. Branding text (Optional). I have considered not having any text on the home page at all and certainly want to keep it limited. I prefer clean and simple designs. If text is proposed, I would like to keep it limited and focused on three main topics that I would want to share on the main page: (1) Unity (i.e. social connections, unity of purpose and collaboration), (2) Growth (i.e. personal growth), and (3) Service (i.e charitable service). You can just fill in any text with gobblygook or just make up some text for now just so I can see the styles and fill in the information later. I would also be open to designs that use images or icons that represent these three subjects as an alternative to text. 4. SignUp link. An image, button or other link that takes a potential new guest member to the SignUp page. 5. About. An image, button or link to the About page. 6. Contact. An image, button or link to the Contact page. 7. Privacy. An image, button or link to the Privacy Information page. 8. Volunteer. An image, button or link to the Volunteer Information page. 9. Terms. An image, button or link to the Terms & Conditions page. 10. Copyright. A copyright notice as follows: “Xethnic.org 2013”. Page 2 - Messages Page The messages page is the central hub for the Xethnic services. Therefore, it is used as the start page when members first log in. This would be similar to the Facebook or Twitter newsfeed or the Tumblr dashboard. It shows a variety of information, including a member’s personal microblogs, microblog messages from the member’s connections, notifications from Xethnic’s services, and advertisements. The message list should be designed with the assumption that the content can contain multiple headings, pictures and paragraphs in a variety of sequences. The page should use a responsive web design and contain the following elements: 1. Menu. A menu or an image, button or link to a popup menu that will eventually contain about seven items. 2. Microblog link. An image, button or link that opens a Microblog control. The Microblog control does not need to be designed as part of this effort unless you feel it is an innovative part of your proposed design. If you decide to take a shot at it, I really like the basic design used by Tumblr. Please see the attached image with the Microblog Control wireframe. 3. Search. A search control, or alternatively an image, button or link to the Search page. 4. Message List. An area that contains a list of messages, where each message is shown using a message control (or group of elements typical of social networking). The message control groups the following elements together: a. Thumbnail. A thumbnail sized picture of the member who posted the message. b. Picture. If a picture was uploaded it will also be shown at the size it is stored. c. Text. If the message contained text it will be formatted as HTML5. The formatting will use the HTML inline styles or if no inline styles were included the text will be shown using the standard stylesheet. d. URL. If the message contained a URL, it will be shown using any applicable inline styles or the standard stylesheet if no inline styles were included. e. Date/Time. Each microblog message will also show how long ago the message was posted, using the standard approach such as “5 hours ago” or “14 May”. f. Edit. An icon, link or button that allows the member to edit the message. g. Delete. An icon, link or button that deletes the entire message, including all elements. h. Action. An icon, link or button that is only shown if the message requires the member to take some action, such as accept a connection request. Advertisements will interlaced with other messages, so no specific area is needed for advertisements. This is done to meet the responsive web design requirement. I've attached a few messages page wireframes to help show what I am seeking. I think I prefer the one titled "Xethnic Messages Page Wireframe Option 2.png" but I am open to different layouts. I like the darker background color with the buttons set directly on the darker background similar to the styles used by Tumblr. Also, it is important to have each of the blog messages separated as shown in the wireframes because the implementation will support inline HTML styles, so each blog can have different background colors, borders and so forth. Page 3 - Member Profile The member profile page allows a member to add personal information and a profile picture. This page contains the following elements: 1. Menu. A menu or an image, button or link to a popup menu that will eventually contain about seven items. 2. Header. (Optional) Heading text identifying the page. 3. Profile Size limit. Paragraph or caption text telling the member that the profile picture must be less than 1MB. 4. Profile Image. An image showing the profile picture, or if a profile picture is not available a standard silhouette image will be shown in this area. 5. Profile picture upload link. A button or link that the member clicks to select a profile picture. Note: An image control can combine the image and the link into one area. 6. First Name. An HTML5 input control with the input type set to “Text” and placeholder text set to “First Name”. 7. Last Name. An HTML5 input control with the input type set to “Text” and placeholder text set to “Last Name”. Page 4 - Find People The Find People page is shown when a member selects the Find People link from the menu. This page is designed to help members connect with others they know or with whom they have mutual interests. This page contains the following elements: 1. Menu. A menu or an image, button or link to a popup menu that will eventually contain about seven items. 2. Heading. (Optional) Heading as follows: “Connect with people that you know”. 3. Connections Filter. A checkbox or other control that allows the member to select whether the list of people contains all members or only those with whom the member has mutual connections. 4. Thumbnails. A thumbnail image for each person in the list, or a silhouette image for any person that does not have a profile picture. 5. Names. The first and last name for each person in the list. 6. Connections Information. If the member in the list only shares one connection, the following information will be shared: “Connected with X”, where “X” is the name of the mutual connection. If the member in the list shares more than one connection, the text will be “X mutual connections”, where “X” is the total number of shared connections. 7. Request Connection. An image, button or link for each person in the list that sends a connection request to that person. Page 5 - Basic Information There will be a number of standard pages with a similar layout, including “About”, “Contact”, and “Terms”. I would like a general page design that I can use for all of these pages. The content is not important. I am only looking for the style, so feel free to fill the pages with gobblygook text just to show the headings and text styles. This page should be designed to support multiple sections, separated by headings. I would like to see at least three headings styles. I would also like to see the style for showing figures (images) and captions on these pages.
What to avoid
Avoid clutter. I prefer a clean, general layout and design. As mentioned elsewhere, please also avoid any layouts and designs that cannot automatically scale from a smartphone to a widescreen.
US$1,799 Custom package
Every design category has flexible pricing for all budgets. Web page design starts at $799.
Full copyright with production-ready files for digital and/or print.
It all began with a design brief.
A quick, interactive guide helped them understand their design style and captured exactly what they needed in their web page design.
Designers across the globe delivered design magic.
timarcher collaborated with designers to refine their ideas
When design entries come in, you can rate them so designers know what you’re looking for in your logo design.
99designs has great collaboration tools so you can pinpoint and capture your ideas
Along the way, they met lots of talented designers…
We think contests are a super fun way to get design.
Recently completed contests:
The Law of Attraction Journaling program offers step by step guidance to create the life you desire.
Mommys blog about Health, Fitness, Recipes, Childcare, Crafts built in Wordpress. It will target new and older Moms ...
Courage Foundation is a nonprofit benefitting military veterans with post-traumatic stress. Our audience is veterans and