Following the announcement of the iPhone 4S release, there has been an overwhelming negative response. Apparently the entire media (tech and mainstream), and most of the population, had convinced themselves that the form-factor of the iPhone was going to change yesterday. And it would seem that looks are all we care about.

To start, the iPhone having a drastically redesigned case only one year after it was initially released is pretty un-Apple. For how many products do you see Apple completely redesigning the form on a yearly basis? Correct: none. That’s not Apple. It may be what some people want from Apple (after all, when they do redesign something—or design something new—it’s almost always awesome), but that’s not how they work. They refine and iterate to a final design internally, then launch to the public and make incremental changes over time. If the initial form wasn’t elegant enough to stand the test of time (which isn’t very long in the cell phone market), it would not have been released.

So yesterday we were introduced to the latest and greatest iPhone: the 4S. Consistent with all of Apple’s products, it iterated on an existing design. Unfortunately, this is as deep as most of the analysis of iPhone 4S has gone. It looks largely the same, so it’s not a big deal. Yeah, maybe there are some little tweaks inside but it LOOKS the same! How will all the people you pass on the street know you have THE COOLEST, LATEST iPhone?!

But what was really announced yesterday was monumental. It’s obvious why Apple needed a slightly longer release cycle to get this iPhone to market. Everyone seems to be overlooking these major points:

World phone

Remember antennagate? Not only has Apple fixed the problem, they leap-frogged the concerns to offer a CDMA-GSM-capable world phone that intelligently switches antennae to optimize transfer performance. And it supports HSPA+, which means effectively 4G speeds (twice iPhone 4).

Camera

Sure 8 mega pixels is nice, but new optics and sensors, a collection of new software for facial recognition, and auto-leveling of 1080P video? I just bought a nice, new point-and-shoot camera a few months ago, but I wouldn’t be the least bit surprised if iPhone 4S out-performs it—particularly with video.

Processor

A5. Twice as fast a processor in a phone that was already universally considered to be the quickest, most responsive smartphone in the world. And if there was any doubt that iPhone was the greatest mobile gaming device available, that can be set aside now.

Battery

Not only is there a more powerful processor, heavier-lifting software and twice-speed data transfer, but battery life actually improved!

Interface

We saw hints of iOS5 over the summer and began to see how a new notifications center and deep Twitter integration could evolve how we use iPhone. Yesterday we saw how Siri could completely change how we interact with a device. This isn’t “read my touchscreen” voice control like Android introduced. This is intelligent, contextual, human language interaction. Remarkably, it was only 4 years ago that Apple redefined human-computer interaction with multi-touch. Now they have introduced the next major revolution in human-computer interaction. Siri alone would have been a monumental announcement. It will have enormous, far-reaching impacts in technology.

Sorry if you didn’t get your tapered case.

Listing “customer personas” instead of features improves CTR by 200%

It’s often the little things that make the biggest impact. No new design. Same functionality. Just a tweak in messaging.

PearWords Startup Resources

Not sure what should be in your privacy policy? What about your NDA? PearWords offers some free templates with language to get you started.

How Paywalls Are Changing News Organizations’ Social Media Strategies

Most interesting just for its brief synopsis of the different pay models various traditional news organizations are trying online.

yiibu

A collection of thinking and proof of concept on the mobile Web.

Top 10 Mobile Internet Trends (2/11)

Lots of great data and trends from Matt Murphy and Mary Meeker.

Design Principles

Jeremy Keith shares his vast collection of assorted design principles.

f8 Conference Badges

A whole-scale re-consideration of what a conference badge is.

Comic Sans Criminal

A concise history and explanation of why you probably shouldn’t be using comic sans for *that*. Sweet presentation, too.

Measure Anything, Measure Everything

A peek behind the curtain of the Church of Graphs.

Wireframes are one of the earliest steps of the design process. At M|B, they fall into the Information Architecture part of our process. Once the architecture for the entire site is defined (in a site map), the next step is to design the architecture for key pages or templates. This is what a wireframe is used for.

A wireframe is kind of like the blueprints for a building. It shows all the elements of the page, suggests how they should be organized and begins to talk about interactions or states of the page. They do not show the “look & feel”–they are just a gray-scale representation of what makes up the page. For example, a wireframe will show primary navigation, but not what that navigation will look like (buttons, tabs, a colored bar, something else?); a wireframe will identify where a hero image will go and the type of message it will communicate, but not show the actual picture or final text.

To relay this information, at M|B we use gray-scale drawings of lines, boxes, shapes and words. We then overlay annotations that further define the meaning of elements and the thinking behind their purpose, location, interactions, content and any other details that will help communicate to designers, developers and writers.

Each template of a site should have at least one wireframe–sometimes more if a page has multiple states. Wireframes can also be used to show the major steps of a flow. These help define what form elements, buttons and actionable items make up each step of the flow.

Wireframes are the building blocks that identify the pieces of content that need to be written, the modules of a page that the CMS will need and the elements of the page that the visual designers must account for.

At M|B, we believe a wireframe:

• stipulates the elements of a page.
• stipulates the types of information on a page.
• creates a baseline for layout of elements on a page.
• creates a baseline for relationships of elements to one another on a page.
• recommends interactions of elements on a page.

A wireframe doesn’t:

• define the color scheme and visual design of the site.
• identify what images will be used.
• require how mark-up will be written.
• define what words will be used.

How is a wireframe different from a prototype?

While a wireframe is a static view of a page or template, a prototype has some interaction–it changes. Wireframes can be used as prototypes in some situations. For example, paper prototypes are often a series of wireframes, presented in a specific order. Generally when we build a prototype, though, we’re looking for more advanced definition of interaction and flow–a “clickable” prototype. In this case, a prototype is electronic (we like to use ProtoShare) and shows interactions as a user clicks (or touches) and navigates about the prototype.

For heavily informational sites, we generally tend towards wireframes. For applications or flow-oriented  sites, prototypes usually communicate better.

How is a wireframe for a mobile site different?

It’s not! While a mobile wireframe will generally have less real estate than a desktop wireframe for communicating ideas or presenting forms, the concepts stay the same. A mobile wireframe communicates all the same things that a normal wireframe does.

We often create mobile and desktop wireframes side-by-side. The desktop wireframe shows the priority of elements and the general organization for a desktop experience while the mobile wireframe shows how things change in the mobile experience. Sometimes the only difference is organization (particularly when working with responsive design). Other times, the entire navigation or purpose of the site might change for a mobile user. Regardless, the concepts of what a wireframe does all remain the same.

What does a wireframe look like?

Generic Wireframe (.pdf, 45kb)