The product already has multiple images of an iphone over grids so you can draw lines easier.  Personally I didn’t use them in my first attmept but after I did, it made the drawings a lot better.

The Cover

Cover

The Inner Page: For the absent minded person you can list all your info.  Hopefully someone will return it once their done looking over your brilliant idea.

Inside Cover

Blank Page: The page is 5.5 inches tall by 3.5 inches wide.

Blank Page

After My Beautiful Sketches: All the pages have a blank page to the right for writing notes.

Awe Inspiring

Profits & Revenues: A nice feature at the end allows you to estimate your revenue and profits based on how much your charge for your app.

Profits & Revenues

Overall the product was compact and really straight forward.  I would recommend this to any creative mind that needs to jot ideas down quickly for the iPhone.

WHERE TO BUY:  http://www.PocketSketches.com

FOLLOW THEM ON TWITTER: @PocketSketches

I received one or more of the products mentioned above for free using Tomoson.com. Regardless, I only recommend products or services I use personally and believe will be good for my readers. I am disclosing this in accordance with the Federal Trade Commissions 16 CFR, Part 255 Guides Concerning the Use of Endorsements and Testimonials in Advertising. Tomoson Product review & giveaway Disclosure.

Tired of dragging the h1, h2, h3 and paragraph text Axure widgets separately onto each wireframe?

Download | Demo

I was. I finally decided to create three widget style guides that I could drag and drop to each page. These three widths (560px, 600px and 640px) fit most of the content areas of my 960px grid layouts. Each style guide widget includes:

• H1 heading
• H2 heading
• H3 heading
• Paragraph text
• Ordered list
• Unordered list
• Blockquote

These style guides really speed up my prototyping. Even if the three widths don’t fit your exact content area, they are simple to scale in width. These are great filler for pages or can even be used to add real content. Most of the time, I drag the widget onto my prototype and then make a master of everything except the H1 heading. I then of course name the H1 heading the title of the page. I then revisit the page later and flatten the master (if needed) to add in any unique structure to that page using my style guide. Example, I might use the unordered list as the navigation for jump links on a FAQ’s page. I use the blockquotes to structure a testimonial page. Please let me know if you are finding this useful and if there is any other element you might want me to add to this Axure style guides widget. I’d also like to see if you’d like me to create any other size, or if it’s easy enough to scale the sizes I included in this Axure library file.

Why I Retired the Advertising Y!DSK Library File (Advertising_Y!DSK.rplib)?

Download | Demo

Naming conventions are important when rapid prototyping. I have hundreds of widgets in my Axure widgets library and don’t like to hunt for elements. That is why I decided to reorganize and renamed the old Advertising Axure Library File.

For example I prefer the name Full Banner instead of just Banner for the 468 x 60 full banner ad unit. I prefer the name skyscraper for the 120 x 600 ad unit as opposed to just sky. I prefer the name wide skyscraper as opposed to wide sky for the 160 x 600 ad unit. I prefer the name vertical rectangle as opposed to just vrec for the 240 x 400 ad unit. I prefer the name Large Rectangle instead of LREC 336 x 280 ad unit. I prefer the name rectangle for as opposed to rec for the 180 x 150 ad unit. I prefer the “3:1 Rectangle” as opposed to “3:1 Rec” for the 300 x 100 ad unit.

This was a simple change of course, but I kept putting it off and procrastinating. Oh yeah, I couldn’t stand the capital letters and also the Bolded 12 pixel font size that labeled the old banners as well. Finally I decided to do something to ease the frustration a little bit.  Call me picky, but they banners aren’t as LOUD now and their easy for me to find J. You might be asking, “Can I still search the word “sky” since I renamed it skyscraper?” YUP!

What’s the big idea?

A potential client, Tim Jones contacted us to help build a social community. Tim is a highly intelligent consultant, providing expertise to the Department of Defense in support of operations and new innovative technologies. Big ideas is what Tim Does. This time, he brought his creativity to the social community space.

His idea is to build a social community around something he’s crazy about. Sports. The social community will allow sports fans to talk trash and join forces with other fans. Tim has a clear vision for the project. He has already outlined the website navigation in Microsoft Word and built preliminary wireframes or skeletons for many of the main website pages.

After digging into Tim’s big idea, I began drafting a Website Blueprint.

Objectives

What will the website accomplish?

Create an online social community that compels sports fans to defend their team, rival opposing teams and share information with their fellow sports fans.

User Groups

Who will use the website?

The primary users of the website will be sports fans. More specifically, the fans will be:

• College Basketball Fans
• College Football Fans
• NBA Fans
• NASCAR Fans
• NFL Fans
• MLB Fans
• Soccer Fans

Interactions

What will the website do?

• Sports fans start rivals
• Sports fans join forces with other fans via their team’s page
• Rival teams compete in turf battles
• Rivals compete through chat, discussions, comments, videos and photos
• Biggest rival teams are recognized for their animosity
• Ultimate fans are rewarded for their rivalry rage and team honor

To join the rage and see the site’s progress, connect with Rivalry Rage on twitter.

Prototyping is a vital component of the website design process for social networking websites. If you are designing a brochure website, it is possible to envision the website coherently in your mind. Social networks, however, tend to involve multi-dimensional hierarchies and other IA models that have more inherent sophistication.

Information Architecture Models

When deciding upon the architecture of your social networking website, you should check out the following information about information architecture and social networks.

Advantages of Prototyping

• Achieve easier coordination between developers, designers and other staff involved in the deployment.

• Identify logic and usability flaws earlier in the process.

• When you’re coding, you may be tempted to take usability and information architecture shortcuts that you are less likely to make during the prototyping phase.

• Get approval from clients or managers early on in the process and get them to sign off on the prototype. This will save you valuable time later on, where changes are more time consuming to implement.

Social networks tend to have particularly complex hierarchies and interrelationships between properties. Changes will be laborious to complete if they are not implemented dynamically. Therefore, using a custom-built prototyping software tool will work best.

Prototyping Tools

• Pencil (free) – This is a basic Firefox plugin that allows you to build wireframes and prototypes.  With only the most basic functions, this is not an ideal prototyping tool.  However, it is worth the price!

• Balsamiq – This comes with a free trial and is more appropriate for the more discerning user.

Picture credit: Jack Dorsey

Research The Market

It is critical that you develop an understanding of any similar social networks. Perhaps they exist in a different vertical but provide a similar service. Through developing a keen understanding of the market, you will be able to identify features you could adopt. Innovation is vital to success, but it’s not always necessary to reinvent the wheel.

Information Architecture & Prototyping

Decide on the right architecture for your social network. When designing the information architecture (IA) of a social network, there are certain unique aspects to consider. Read this article on social network information architecture to find out more.  Read this article to find out more about prototyping your social network.

Set Business Goals

Establish goals for your social network. Do you want to acquire a certain number of users in year one? How long do you have to reach profitability? What is your anticipated revenue per user? Find out more about deciding on business goals for your social network in this article. Once you have decided upon goals, you will know your metrics for success.

It is almost always dangerous to consider one business goal in a silo. Increasing revenue might look promising, but what if you have had to treble your sales staff to achieve this result? And, what if that additional cost now means that your business is running at a loss? Focusing on a variety of metrics, and understanding their interrelationship, is vital.

Cost Per Acquisition (CPA)

This is the cost of acquiring a new user for your service. If you spend $100,000 on public relations and you achieve 100,000 new users as a result, your cost per acquisition is $1. If you achieve an average return of $2 per user, this means you have identified an appropriate cost per acquisition channel. In identifying return on investment from a particular channel, remember to look beyond merely cost per user acquisition. Always be careful to ensure “user decay rate”, “revenue per user” and ultimately “return per user” allow you to correctly calculate return on investment.

Users

This is the number of accounts that you have on your social network. This number does not take account of the activity from each user and how much money you can expect to make from each user. You do not know whether the users are active on your website. You should keep in mind that a percentage of this number may be spammers.

Active Users

Different social networks define active user differently. And, the best approach can vary from site to site. For example, a user who generates N page views per month or N unique visits. On a music website, possibly you could make this assessment based on the number of songs uploaded or listened to. Find a model that works for you.

User Decay Rate

The user decay rate takes account of how many users continue to use your service month-after-month. If two percent of users cancel their account at the end of each month, you have a 2% monthly decay rate. Some websites choose to calculate this number based on the number of users who remain “active users” rather than merely users who have an account that they have not cancelled.

Revenue Per User

Take your total revenue number and divide it by the number of users. This is an interesting figure to watch to understand the interrelationship between users and revenue.

Paying Members

Users who pay for access to your service are deemed to be paying members.

Percentage of Paying Members

This is calculated through the following calculation: paying members / users * 100 = Percentage of paying members. Where you charge for membership, this number can be critical to costing business decisions and understanding the DNA of your user base.

User Interaction Metrics

User interaction metrics can vary from site to site, but can be critical in evaluating trends within your website and establishing targets. Twitter, for example, may be interested to know how many “tweets” the average user sends out each month. Facebook might want to know the average number of pictures a user uploads each month. Decide which user interaction metrics add meaning to evaluating your site.

Page Views

The total number of pages viewed on your website over a given time span.

Page Views Per Visit

This is the average number of page views that are generated from each visit to your website.

Revenue Per Thousand Impressions (RPM)

Revenue per thousand impressions is a means of calculating how much money you make for every one thousand impressions on your website. This is an interesting way of tracking revenue relative to website traffic. If your page views increase, but your RPM declines, possibly you need to address monetization issues.

Unique Visitors

The number of visitors that come to your website over a given time span.

Growth

Growth can be applied to a number of statistics. Such as, for example, growth in user numbers, growth in page views or growth in revenue. Where the growth rate is a negative number, the information can be useful to spot the rate of decline. To calculate the growth rate percentage of any statistic, perform the following calculation: (Current Number – Past Number) / (Past Number * 100).

Revenue

Revenue is the total value of sales within a certain period of time.

Profitability

Unlike revenue, profitability takes account of the costs incurred in generating sales.

Flat

The flat IA model is where you have more than one page, and each page is granted equal importance. You can go from one page to another page in a single click. This method can also be called monocline grouping. See below.

This type of hierarchy is too rudimentary for a social networking website. If you have a simple social network where each user is given their own profile page, your website could have millions of links on each and every page. While a flat structure may be suitable for a simple brochure website, it is not suitable for a social network.

Index

The index structure is the web equivalent of a directory. The homepage acts as the index, navigating you to the right page within the directory. See below.

This model could work well for a social network with a small number of users. However, information architects must consider scalability. A pure index hierarchy is not built to scale. For a phone directory with a few hundred entries, this could work. For a social network with 10,000 users, it would be a disaster.

Strict Hierarchy

The strict hierarchy looks like an organizational chart in most large companies. People report to their boss, and their boss reports to their boss. Management links to lower level employees via their managers. In the web architecture example, you access a lower level page via its parent. See below.

This structure is more suitable for social networks than the previously discussed models. To consider its application, let’s imagine a social network that facilitates communication among a golf club’s members. There could be a separate parent category for male and female golfers. You could drill down from home > male golfers > Name Surname to find the person you are looking for.

What happens if you want to expand the categories beyond male and female golfers and add another category for “competition winners”? In that case, competition winners would need to be a member of a gender category and a member of the “competition winners” category. This would not be possible with a strict hierarchy, since each file has only one parent. For this reason, a strict hierarchy will usually lead to usability problems on more complex social networks.

Multi-dimensional Hierarchy

Most social networks, other than the most primitive, must opt for a multi-dimensional hierarchy to achieve their usability and navigation goals. See below.

The multi-dimensional hierarchy embraces the nuance that a strict hierarchy ignores. In the golf club example, golf members have relationships with one another. A golfer can be a “male” and a “competition winner” and have friends who are “male and “female”. You can move from one golfer’s profile to another directly, if they are friends. Profiles possess multiple properties and can be filed in more than one place. This adds flexibility to navigation and allows users to follow more than one path to achieve the same objective.

Search

Search has become fundamental to understanding the architecture of many of today’s leading websites. Google, clearly, would be unusable without search functionality. Twitter does not rely on search to be functional, but it adds a whole new dimension to their social network. Without search, users would exist in pockets of followers connected only by disparate connections.  Search adds a discovery mechanism to content and people.

On some social networks, search acts as a means of short-circuiting the hierarchical structure. In others, search makes hierarchical structures superfluous.

Search usually works in one of two ways in a social network. It allows you to search within a particular parent or it allows you to search across parent to find profiles. And, sometimes you can do both.

There is no right or wrong navigation model for a social networking website. Social networks usually combine more than one method in their website architecture, providing a choice for website users.  Too much choice can risk causing confusion and cluttering your design. In this article, we shall guide you to choosing an intuitive and attractive website navigation model for your social network.

From their experiences elsewhere on the web, website users have engrained views on how your website navigation should work. Consider this when formulating your navigation model and reduce the friction involved in navigation.

Breadcrumb Trail

Breadcrumb trail navigation lets you know where you are in the hierarchy of a website. In the example below, you know you are inside News > World news > United States.  This allows your website users to know where they are in a website, and provides a navigational shortcut to skip back.

• Know where you are at all times.
• Move back steps with minimal interruption.

Great for social networks when:

• You present structured data. Your schooling listings might present USA > Illinois > Colleges > Illinois College > Illinois College ’05 > Philip West. Users can easily navigate away from Philip West’s profile back to others who graduated in the same year (Illinois College ’05), or even back to “Colleges” if they wish to find a friend who attended another college.

• You want to increase page views by encouraging visitors to check out similar categorizations.

Horizontal Top Bar

Horizontal top bars are among the most common navigation models used on all websites, including social networking websites. Here is an example of a simple horizontal top bar used on Twitter.

While website users are comfortable browsing vertically, they are less comfortable browsing horizontally. Try to keep this is mind when formulating your navigation – make sure the number of links is known in advance.  Adding friends, applications or switching on options should not add more links to a horizontal top bar unless this has been tested and creates a comfortable browsing experience.

• Users are comfortable using a horizontal top bar due to their widespread adoption.

• Do not include “dynamic” options that could cause the website to expand horizontally in the browser.

Great for social networks when:

• You want to create an easy and simple method of navigating to key tasks that users perform on your network.

Horizontal Top & Vertical Side Bar

A top and side bar method is deployed on most prominent social networks.  Usually the top bar will be used for top-level navigation, while the side bar will allow users to access sub-categories. The side bar will be used for any conditional or dynamic links. It is easier to add additional links vertically, but you must be more careful when adding additional links horizontally. This is the method favored by Facebook.

• Use top bar for top-level navigation

• Use side bar for drilling down sub-categories and expanding navigation options.

Great for social networks when:

• You need to add “dynamic” links and expand navigation options.

• You want to leverage an approach that users will feel comfortable with through their experience on other social networking websites.

Horizontal Top Bar With Revealed Drop Downs

This has become an increasingly popular navigation method, which comes with some variations. Sometimes you click on a menu and a further sub-menu or link is revealed. In other occasions, simply hovering over the menu causes this to be revealed. One advantage of this method is space efficiency.  The menu takes up little room and it can provide an intuitive method of navigating social networks with a deep structure.

While this has become an increasingly popular navigation method, it also has some serious downfalls. Not least, a lack of familiarity with the approach can cause confusion. For those with disabilities or poor IT literacy, it can cause difficulties. Another issue arises from users being unaware of what is below a particular menu option until they hover over it. In the example below, Myspace has deployed this method.

• This can be a great way to optimize space efficiency.

• There are some usability concerns with this approach.

Great for social networks when:

• You prefer an interface focused around a horizontal top bar, but your site is too big to accommodate all links within the main menu.

Paging

This is a method used by social networks where content spans several pages. News websites will sometimes use this method to break up larger articles. Social networks often use this approach to browse through profiles and present search result pages. Look at the example below, on Myspace.

This allows users to skip back and forward between results, and browse from start to finish easily. When your social network displays search results, this can be the most intuitive way to present them to your users.

• Paging is ideal for presenting search results.

• Allows users to skip back and forward easily.

Great for social networks when:

• You wish to structure large amounts of content in a list format, unsuitable to fit on one page.

• Let’s say a user can see a list that is sorted in date format and they want to find the oldest data in the list. They know they can go to the last page to quickly find what they are looking for.

Tabs

Tabs are usually a type of horizontal navigational bar, although they can be used in other settings too. They serve to make it easy for the user to know the section of a network they are on. Tabs have rapidly became a major feature of web browsers, so users are now increasingly comfortable with their use. In the example below, check out how Linkedin uses tabs.

• Tabs clearly distinguish the page or section of a social network a user is currently visiting.

• The popularity of using tabs within website browsers has made users more comfortable with the concept.

Great for social networks when:

• You want to create a clear distinction between different sections of your network. Users know they cannot be active on more than one tab at once.

Creating A Website Prototype

Web site prototyping extends a static wireframe into an interactive color or grayscale design that will eventually become your website. The interactive nature of web prototyping shows how users will interact with and experience the structure, content, and functionality of your website.

During the web site prototyping phase of planning, users can test your website and provide feedback. This allows our web developers to make any number of changes quickly before fully developing and designing your website, ensuring the best user experience possible.

Benefits Of Prototyping

It allows you to test your design before development. Through a web site prototype, you can test the usability of your website to ensure it is simple to use and the flow makes sense.

It offers you a way to make sure your website will satisfy the needs of your target audience. The best way to make your audience happy is by providing a website that meets their needs with categorized and prioritized information.

It saves you time and money. Changes are fast, easy, and inexpensive when made during the web site prototyping phase because it doesn’t involve complex coding.