Social Community Site Map
If you’re at the stage of drafting website application architecture for a social networking website, you should already have a clear understanding of the website objectives (what you want to accomplish), website requirements (what you want the website to do), and user groups (who will use the website).
The objective in drafting social network web application architecture is to align these three components into two deliverables: a site map and wireframe. Let’s begin by drafting a general social networking site map. The site map will help organize the required pages and prioritize order.
Keep in mind there are nine user groups who will use a social networking website: potential members, members, potential employees, employees, potential partners, partners, potential investors, investors, and publishers.
After the site map is complete, use a wireframe to help organize the website application architecture, including how you will present the information. At least create a wireframe for the homepage, registration, dashboard, my profile, and one page that just has text (i.e. our story page, FAQs, etc.).
To help wireframe a social networking site, use the site map and the wireframe guide below to begin drafting a layout.
It’s important to understand that most users have a computer display with 1024×768 pixels or more. According to W3Schools browser statistics, 36% of users have 1024×768 displays and 57% have an even higher screen resolution. To make sure your website looks good (no left, right scroll), this wireframe is 960 pixels wide.
Social Community Wireframe
Header
The header area should be mostly the same throughout the entire website. Include a logo for branding and make sure to link the logo to the homepage. Also, include a positioning statement (unique value position) to let users know what you’re about and why you are different. This will quickly engage their attention and validate their needs. Include a call to action, such as a site tour, so users don’t have to think when they want to learn more. Another suggestion is to add a few quick links to frequently accessed pages like registers, login, my account, etc.
Primary Links
Primary links are your global navigation that will remain the same throughout the entire website. This may change slightly if users are logged in or not logged in. Users will use this navigation to link to the most important areas of your website. Make sure these are text-based links instead of Flash or graphics. It’s important to use text-based links so the search engines can easily read them and crawl through them to your internal website pages. If you decide you want a drop down menu for your top navigation during your web application architecture, avoid using JavaScript. Instead, use lists and style them with CSS. Make these notes on your website application architecture and wireframe so the developer has a clear idea of what you want.
Bread Crumb Trail
Bread crumb trail navigation is a link based navigation that shows the path you traveled to arrive at a particular page. For example, you might start on the homepage, click to community, click to see all members, and then click to see a member’s profile page. As you navigate to the final page, a link trail appears (typically above the main content) that shows the pages previously visited. Each of these links should be clickable so a user can quickly go back.
Content Area
The content area is where your main text, images, and videos will show on the web page. It’s important that users can quickly scan your content and the search engines can identify the important statements. To accomplish this, title each page inside the <h1> </h1> HTML tags, use a sub title in the <h2> </h2> HTML tags, and subheadings in the <h3> </h3>, <h4> </h4>, and <h5> </h5> HTML tags. The search engines will factor the content inside these HTML tags into their algorithm when positioning your site in the search engine results. Let your designer know to use these tags so their color and size help the reader scan through the website text.
Sidebar
The sidebar area can be used for subpage navigation within internal pages. It could also be used for advertising using standard banner sizes, such as the 250×250, multiple 125×125 square buttons, and the popular 160×600 wide skyscraper. Near the top of this area is a great place to add a newsletter sign up form and it doesn’t have to take up a lot of vertical space. Other options to consider during web application architecture include featured members, popular blogs, popular videos, and upcoming events.
Footer
The footer area should remain the same throughout the entire website application architecture. You can use the footer for copyright statements, site map links, and legal info (privacy policy, terms of use). You can also use it for adding links to other social networks or sites you are exchanging links with. It can also be a nice area to organize company information, advertising information, and help resources.
In closing, this article’s goal was to give you an example of a social network site map that you could customize to fit your own needs. With this site map and the wireframe guide, you can draft a wireframe that will be user friendly, search engine friendly, and aligned with business objectives.