Tutorials

Tutorials about HTML, CSS, PHP, Javascript, and Photoshop

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that has been used in the blog.
  • Archives
    Archives Contains a list of blog posts that were created previously.
  • Login
5369

Mobile is no longer on the sidelines. If you’re not already thinking mobile first, you should at least consider it. Let’s go over compelling data that demonstrate the importance of focusing on performance for mobile devices.

Business is Booming on the Mobile Web

Here are some figures showing the rapid growth of business on the mobile web.

55% of all time spent on retail sites takes place on mobile devices

This number comes from research by comScore for Shop.org1, released last fall. 44% of the time people spend on retail sites are on smartphones, and 11% on tablets.

Time spent in online retail stores on mobile devices versus desktop

This finding correlates to a statistic that was shared by UK-based online shoe retailer Schuh.com: Every month, 1% of their desktop traffic converts to mobile traffic2.

Mcommerce (mobile commerce) revenue is growing rapidly

Between 2011 and 2013, mobile revenues in the US more than tripled.

In 2013, mobile generated 16% of total ecommerce sales. By 2017, that number will increase to 26%.3 Think 26% sounds insignificant? It’s not — unless you think $113 billion is a trifling amount of revenue.

Growth of mcommerce sales.

Mobile conversion rates lag behind desktop, but tablets are catching up

At the end of last year, the conversion rate for smartphone users was about a third the rate for desktop users.

Tablets, however, are catching up: at 2.59%, the conversion rate for tablets in the last quarter of 2013 had surpassed first quarter 2013 rate for desktop users.

Conversion rates by device.Source: monetate.com

Most online shoppers "multi-screen" before they buy

More findings from comScore: In their February 2014 market review, they found that 57% of consumers access a company’s site from both their PC and mobile devices before buying.4 This puts a great deal of pressure on ecommerce developers to ensure a consistent user experience across all platforms.

Retail growth in multi-platform usage.Source: comscore.com

Mobile Sites Don’t Meet Users’ Expectations

Looking at all the stats we’ve just covered, there’s a clear disconnect between how much time people spend on retail mobile sites (55%) and how much money they spend during that time (16%)5.

There are a number of factors to explain the disconnect, but a critical one is page speed.

Slow pages are the number one issue that mobile users complain about, ranking even higher than site crashes.

Most mobile users expect pages to load at least as fast as (or faster than) they load on their PC

I need to stop being surprised when I talk to people who assume that mobile users will settle for sluggish load times, because that’s just the way the mobile world spins.

Those individuals couldn’t be more wrong: 85% of mobile users expect pages to load as fast as, or faster than, they load on the desktop.

Two out of three smartphone users say they expect pages to load in 4 seconds or less.6

Percent of people who expect pages to load under 4 seconds on their mobile device.

Slow pages increase user frustration and decrease engagement during online transactions

Mobile users are affected at a neurological level by even small changes in a site’s speed.

In an Electroencephalography (EEG) study we ran last fall, we found that a 500ms delay in connection speed resulted in up to a 26% increase in peak frustration, and up to an 8% decrease in user engagement.7

Top sites aren’t meeting mobile users’ expectations for sub 4-second load times

Most users may expect wait times of 4 seconds or less, but our research8 shows that the majority of sites can’t deliver this kind of speed to mobile devices.

Last fall, we measured the load times of the top 100 ecommerce sites — both the full-site version and the m-dot version — on a variety of smartphones and tablets. We found that even m-dot sites, which are intended to deliver a faster experience, generally failed to meet users’ 4-second wait-time threshold.

4.33 seconds is the median load time of m-dot sites.Source: radware.com

Only 2% of the full-site versions loaded within 4 seconds, with the median load time being almost 8 seconds.

Most responsively designed sites load loaded in over 10 seconds.Source: radware.com

What Poor Mobile Web Performance Means for Business

The disconnect between user expectations and the reality of the current state of mobile web performance has a measurable impact on the bottom line.

Slow performance affects every business metric site owners care about, from shopping cart abandonment to brand perception.

The mobile shopping cart abandonment rate is 39% higher than the abandonment rate for desktop

The abandonment rate for mobile shopping carts is 97%, compared to 70% for desktop carts.9 This tells us that people are using their carts on mobile, which is good, but then they’re ditching them, which is obviously bad.

Slow performance is a critical factor, as is the pain of filling out long order forms.

Cart abandonment rate is much higher on mobile devices.

Even a 1-second delay can hurt conversions

Even seemingly minor performance problems can have a major impact on mobile business metrics.

A while back, we did a split test over the course of 12 weeks, in which we segmented mobile traffic to an ecommerce into four groups: a fully-optimized control group, plus three groups that were subjected to 200ms, 500ms, and 1000ms HTML delays.

We measured the impact of these delays on:

  • bounce rate
  • conversions
  • cart size
  • page views

The 200ms delay yielded negligible results, but the negative impact was much stronger at 500ms and 1000ms.

The 1000ms delay resulted in a 3.5% decrease in conversions, which is huge hit.7

Important site metrics are negatively affected as you increase the page load delay.

Slow pages drive mobile shoppers to your competitors

When their shopping experience goes wrong, not only do mobile consumers abandon their shopping carts, they also head to your competitors.

When faced with a negative mobile shopping experience, up to 33% of mobile shoppers will go to a competitor’s site next.

To make things even worse, up to 30% will never return to your site.10

30% of mobile shoppers will never return to a site if their experience is poor.

Slow pages undermine overall brand health

In the same study I cited earlier, we asked all the participants in our mobile EEG study for their impressions of the sites after the tests were done. We then fed all the descriptors in the interviews into a word cloud generator.

This is the word cloud that was generated by test participants after using Tesco.com at normal speed:

Tag cloud of a fast site.

And this is the word cloud that was generated by participants after experiencing the same site with a 500ms network delay:

Tag cloud of a slow website.

Bear in mind that none of our test subjects were aware that they’d been involved in a study about page speed. They thought they were simply testing each site’s overall functionality.

It’s fascinating to see that the word cloud for the slower site contains almost three times more negative adjectives than the faster site.

While some participants clearly picked up on the slight deterioration in performance ("slow" and "sluggish"), participants also developed negative perceptions of areas that are unrelated to speed.

Slower pages affected people’s perception of three important aspects of the site that are completely unrelated to load time:

  • Content ("boring")
  • Visual design ("tacky" and "confusing")
  • Ease of navigation ("frustrating" and "hard-to-navigate")

Why the Mobile Web is Slow

Aside from the obvious known limitations of mobile devices — smaller CPUs, slower network download speeds — there are two other limiting factors:

  1. page size
  2. latency

While responsively designed pages can be fast, most aren’t (even on the desktop)

Responsive web design is a great way to ensure that your pages have a consistent look across multiple platforms, but it’s not necessarily a great way to ensure that your pages are consistently fast across platforms.

I recently tested the start render and load times of 60 pages that have been included on various "best of RWD" lists. Only 3 of them loaded in 4 seconds or less — on desktop no less — meaning that they’re likely to load even more slowly on mobile devices.

The culprit: massive payloads.

Of the 60 responsively designed pages I looked at, many were 3 or 4 or even 5 MB in size.11

One thing the fastest sites all had in common was the fact that they were all under 1 MB.

Never underestimate the performance-killing power of latency

In performance terms, latency is the amount of time it takes for the host server to receive and process a request for a page object.

The amount of latency depends largely on how far away the user is from the server.

Mobile latency is consistent only in its inconsistency, even when measured at the same location. This is due to a number of variables beyond the amount of data passing through the tower. Factors such as the weather, and even the direction the user is facing, can have a significant impact.

3G LatencySource: igvita.com

3G latency can reach 350ms or more per page resource.  And a typical page can easily contain 100 or more resources, so all this latency adds up fast.

This is why Google performance expert Ilya Grigorik has stated12 that if you’re designing for mobile, it’s safe to assume you’re going to incur 2000ms of 3G latency.

What can you do to give your mobile audience the user experience they demand?

There are a number of techniques for optimizing mobile performance.

Some of these techniques — such as compressing and consolidating resources — can help with both mobile and desktop issues.

Others — such as leveraging localStorage as a workaround for smaller mobile browser caches — are specifically focused on improving the mobile experience.

If you’re interested in taking a deeper dive into these techniques, check out this post I wrote for ACMQueue.

Note from the Editor (Jacob Gube)
If you’re curious to learn more about Tammy Evert’s theories on web performance and mobile, be sure to attend her sessions at O’Reilly’s Velocity Conferences this year.

Velocity is, in my opinion, one of the conferences all developers should go to. A lot of data, best practices, and techniques related to web performance are born at this conference.

Use code SIXREVISIONS20 when getting your ticket to save 20%.

Tammy will be in Santa Clara on June 24-26 and New York on September 15-17. These are her topics and additional information about the sessions:

References

  1. comScore and Shop.org Mobile Retail Boot Camp (summit13.shop.org)
  2. Conversion Conference – Schuh’s journey to RWD (slideshare.net)
  3. Mobile Devices to Boost US Holiday Ecommerce Sales Growth (emarketer.com)
  4. UK Digital Market Overview February 2014 (comscore.com)
  5. Keynote 2012 Mobile User Survey (keynote.com)
  6. Mobile stress: Slower web pages lead to increased user frustration and lower engagement (webperformancetoday.com)
  7. REPORT: 2013 State of the Union for Mobile Ecommerce Performance
  8. Google Aims To Simplify Mobile Shopping With ‘Instant Buy’ (webpronews.com)
  9. Case study: The impact of HTML delay on mobile business metrics (webperformancetoday.com)
  10. 88% of Americans Who Shop on Their Smartphones Experience Negative Issues… (marketwatch.com)
  11. 12 websites that prove RWD and performance CAN play well together (webperformancetoday.com)
  12. Latency: The New Web Performance Bottleneck (igvita.com)

Related Content

About the Author

Tammy Everts is a senior researcher, writer and performance evangelist at Radware. She researches the technical, business, and human sides of web/application performance. You can follow her on Twitter and read her articles on the Radware blog and Web Performance Today.

The post 13 Reasons Why You Should Pay Attention to Mobile Web Performance appeared first on Six Revisions.

Continue reading
0
3528

Design is an imprecise term. Especially when used in regular language.

For instance, someone who believes "design" is quantified solely by a product’s visual appeal might be disappointed when they get a set of gray boxes and lines — a wireframe — as a deliverable created by a talented designer.

Design is not principally measured by a product’s visual appeal; its aesthetic qualities.

It’s also measured by how it was planned and articulated, how it was built, how it functions. It’s about the design’s ability to improve upon the current reality.

The commonplace view that a "good design" is anything that is beautiful and visually appealing is wrong. It’s wrong because a good design is more than that. The visual quality of a good design is just a portion of the equation.

Steve Jobs explains this point well, once saying:

"People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works."

Gmail has a good design because it’s able to intelligently discern between contextually-relevant emails versus ones you may not want to see right now, and because it gives you the ability to search thousands of archived emails accurately and quickly.

But you will never find Gmail being featured in any web design gallery, even though these galleries purport to have the goal of inspiring designers toward creating good designs.

Dropbox has a good design because it works flawlessly in the background without any fussing about, and because it ambitiously tackles a huge everyday problem people have.

Airbnb has a good design, not because the site is on all the popular web design galleries, but because of the company’s ability to reliably and conveniently provide a new form of accommodation for travelers.

Design is the creation of a plan for the construction of an object; a plan that represents how the product should be built.

Design lies at the crossroads of art and science, but both roads are equally important, so design is also about how we deal with that challenge.

A product’s visual appeal — its aesthetic attributes — is merely a part of its design.

Related Content

About the Author

Marcin Treder is a UX designer, the CEO of UXPin, and author of several UX design books (such as UX Design for Startups).

The post What Design Really Means appeared first on Six Revisions.

Continue reading
0
7138

Starting with just a simple line of code 11 years ago, WordPress has evolved to become the platform of more than 74 million websites.

Even with a vast array of competitors offering similar functionality, WordPress still dominates the CMS market with a 21.9% market share.

I have had a more detailed look at WordPress than most.

I have contributed to 6 releases of WordPress, including work in the XML-RPC API (in 3.4) and WP_Image_Editor class (in 3.5). I have also been involved in an upcoming release (3.9).

As we look toward the future of WordPress, it is important to evaluate current practices and trends within the WordPress user base, as well as the industry as a whole.

Comparison of WordPress.org home page

In this article, I will discuss my predictions and opinions regarding the future of WordPress.

Moving with Demands

Recently, the demand for advanced features has been increasing as more and more developers are using WordPress to build mobile apps and complex e-commerce websites.

While WordPress already delivers many solutions for advanced use-cases, changes in consumer behavior will consistently affect the demand for unique plugins and ongoing enhancements.

WordPress as a Mobile App Backend

The uptake of mobile technologies is on the rise. 58% of adults in the U.S. currently have smartphones according to the Pew Research Internet Project.

Emerging solutions such as the AppPresser plugin — a finalist in the 6 About to Break competition at MacWorld 2014 — are allowing users to create mobile apps using WordPress.

This current consumer trend towards mobile presents an opportunity for WordPress to capitalize on the shift toward mobile development.

By incorporating a RESTful application programming interface (API), current WordPress apps could be supported, as well as mobile apps that use WordPress as a backend.

WordPress as a Development Framework

WordPress has been placing a large focus on providing the best user experience possible. And, in my opinion, it has succeeded in this goal.

Moving forward, I see the concentration shifting toward evolving WordPress into a full CMS and application framework.

Right now, WordPress does a splendid job as a content publishing platform, as evidenced by its use by the major online magazines, journals, and blogs. Time magazine, CNN, Forbes.com, Wired, and TechCrunch are just a few examples of web properties that rely on WordPress.

However, more complicated use-cases like online stores, mobile app development, and web app development require plugins, heavy customization, and development.

The next step is to evolve the platform to make it a more robust CMS/app framework that can make more complicated use-cases easier to produce for developers.

Dealing with Legacy Code

While the system currently offers users a wide range of features and possibilities, WordPress will update its legacy code and deliver new APIs to ideally fit the needs of web developers.

If an emphasis is placed on this area, the biggest challenge will be streamlining the codebase while building a solution that ensures backwards compatibility.

Considering the first version was released over 10 years ago, achieving this objective is likely to be quite a huge undertaking.

Where WordPress Doesn’t Need to Change

The past few years of success have truly proven the knowledge, experience and passion found within the WordPress community.

We have worked together to accomplish great milestones and made the impressive strides that have advanced WordPress to become the most popular Web platform across the globe.

The WordPress community will play a large role in the continual development of the platform to best suit its users’ needs.

Related Content

About the Author


Marko Heijnen is a 1&1 WordPress specialist and a contributor to the WordPress community. He’s had a hand in developing 6 releases (3.0, 3.4, 3.5, 3.6, 3.7, and 3.8) and the upcoming 3.9. Some notable contributions include working on XML-RPC API and WP_Image_Editor. He’s also the main core developer for GlotPress and is currently creating a better open source tool for translations. As a 1&1 WordPress specialist, Marko is committed to improving the platform by contributing back to the community. Visit his site markoheijnen.com and follow him on Twitter: @m arkoheijnen.

The post The Future of WordPress appeared first on Six Revisions.

Continue reading
0
5763

With more and more technology companies adopting remote working environments, having team members in different parts of the world is not uncommon any more.

Remote working comes with many benefits, but also unique challenges.

The biggest perk of working remotely is you are able to give all members the option to live and work where they are most productive. It’s often easier to stay focused without the day-to-day distractions of commuting to work and normal office interruptions.

But as we mentioned, many challenges persist.

Communication can be difficult.

Team-building can be very tough.

And working with time zones can throw you a curveball.

This can all be very tricky for design teams because we need to communicate regularly and extensively, share and pass files, brainstorm, and much more.

Any type of team needs to be on the same page, but this is especially true for design teams.

At Formstack, we’ve been a remote company for over a year now. We have team members from all departments working remotely across the country, and we also have a member of our development team in Poland.

As a company, we’ve learned quite a lot about remote working, and we want to share our insights with you.

Communication

Communicating is central to any design team.

When you work in the same office as your teammates, you can take a short walk or simply look across the room to talk with someone. It’s easy to bounce ideas around or steal 5 minutes of time to brainstorm.

As great as all the communication technologies are these days, you can’t beat face-to-face communication.

In a remote team scenario, impromptu discussions don’t happen as easily. You have to make an extra effort for these kinds of discussions.

Dealing with Facial Expressions and Tone of Voice

Text-based communication like instant messaging (IM) and email does a very poor job of conveying tone of voice, facial expressions, and body language. Yet, all of these things are essential components of good communication.

We know, for example, that a significant amount of communication is done through nonverbal cues.

We help solve this communication barrier quite simply by using video chats and gathering the team together from time to time.

Particularly, we use Google Hangouts for regular meetings and the new video feature on HipChat for quick chats.

We’ve seen designs can often come out underdeveloped when you remove face-to-face communication, but an open door policy with video communication software like Google Hangouts, or even just voice calls, is a good solution for this.

The Importance of Planning

Planning is already a critical process in a traditional design team whose members are in a single geographical location.

But then add the remote/distributed team factor into the mix, and planning becomes even more crucial and demanding.

As a development-design team, we’re always working both ahead and behind the rest of the development team.

What that means is we lay the groundwork for how designs will both look and function within the Formstack app. But once the rest of the development team hooks up all their functionality and does testing, it’s once again our turn to put the finishing touches on design.

It’s important for us to plan and understand timelines of not only our own team, but the entire development unit of our company.

We have to constantly communicate not only about the projects we’re working on that will go into development later, but also revisiting design work that has come back through the development cycle for us to finish.

Workflow

We have a couple of suggestions regarding workflow.

Utilize Time Zone Differences to Your Advantage

We mentioned earlier that Formstack has a developer residing in Poland.

Instead of this distance being a pain point for us, we actually benefit from this geographical difference because he gets to have a 6-hour head start every single workday.

Thus, we are able to jump right in and do design work on features that he has already completed while we were still sleeping.

The time zone difference is still tough, though — our Polish teammate does have to flex his hours a bit so he can have a window of time to work and communicate with the rest of our team.

Create a Style Library

Another workflow tip that’s helped our design team is the creation of a style library. We’ve built documentation around the uniform styles we want to remain consistent within our app. It has been an extremely useful tool as a remote team.

Our style library contains the snippets of code we need for easy implementation of common elements such as buttons, menus, utility classes, etc.

The library helps us design and build quicker without added communication around these standard elements.

You can build your own style library, whether you’re working as an in-app developer, front-end developer, or web/graphic designer. If you’re working mainly with graphics, your library might be as simple as a document containing consistent colors, icons, backgrounds, etc.

The goal of the style library is to maintain consistency within the product and to cut down any communication barriers.

Essential Tools

There are also a number of useful tools our design team uses that allow us to make remote working possible.

We’ve mentioned a couple already, but here are some other apps we love using:

Project Management: Basecamp

Project Management: Basecamp

Basecamp is the project management software we use to share wireframes, mockups, and completed files. We also use it heavily for leaving comments and communicating.

Prototyping: InVision

Prototyping: InVision

InVision is a web and mobile prototyping tool that we use to show the UX and user flow of designs.

Version Control/Code Repo: GitHub

Version control/Code repo: GitHub

For our code repository and versioning software, we use GitHub. We also use the commenting system in GitHub.

Task-tracking: DailyStat.us

Task-tracking: DailyStat.us

This app helps us keep tabs on our teammates’ tasks. This allows us to show each other what we finished yesterday, what we’re working on today, and what we need help with.

Other Things to Keep in Mind

Again, we can’t stress enough how important frequent communication really is to the success of a distributed team.

Also, we want to say that, just like riding a bike, remote working takes practice and a bit of getting used to. Don’t get discouraged if after a couple of months things don’t seem to be working out.

After a while, for example, planning and communicating just became second nature to us.

We like to set scheduled meeting times throughout the week where we’re communicating over video for brainstorming.

We also like to do quick daily video chats sometimes just to say "Hi, how’s it going?"

The way we see it, we also have to maintain personal work relationships — that non-distributed design teams have traditionally benefited from — as well.

Are you part of a remote team? What helps you stay connected and battle the communication gap? Give your advice in the comments below.

Related Content

About the Authors

Noah Coffey is a UX Developer at Formstack – an app that helps you design and build powerful online forms with no coding knowledge – where he creates and brings focus to the user experience of the application. Outside of work, Noah loves his time as a father, watching the Colts, and working with local charities and nonprofits. Connect with Noah on Twitter.

Aaron White is a UX Developer at Formstack where he works on streamlining the form-building process for users. Aaron is a proud father and veteran of the U.S. Army. He’s one of the company’s remote employees: Aaron works out of Bloomington, Indiana at a coworking space he founded called Cowork Btown. Connect with Aaron on Twitter.

The post How to Make Distributed Design Teams Work appeared first on Six Revisions.

Continue reading
0
3662

A wireframe is not the same as a prototype but even seasoned design professionals can sometimes get the two terms mixed up.

It’s time to set things straight once and for all, since (semantics aside) the difference between a wireframe and a prototype is actually quite substantial.

Editor’s note: This is an article by Marcin Treder, CEO of UXPin.

Wireframe

A wireframe is a low-fidelity representation of a product’s design.

It has three simple objectives; the clear presentation of:

  1. Main groups of information
  2. Layout/structure of information
  3. Core visualization and descriptions of user interface interactions

Wireframes, if properly created, serve as the backbone of the product.

It’s just like an architectural blueprint of a house: It states plainly and clearly what should go where.

Visual Characteristics of a Wireframe

The visual characteristics of a wireframe are very limited. Usually designers just use boxes, lines, and a grayscale color palette (to represent different levels of visual hierarchy in the design).

A simple vector wireframe

The majority of the final content — images, videos, text, etc. — is left out for later stages of the process. Often, these omitted parts of the interface are represented by placeholders. Images tend to be represented by crossed boxes and text with Lorem ipsum.

Benefits of Wireframing

Since wireframes are quick and cheap to produce — especially when you use dedicated wireframing software such as UXPin, Balsamiq, or Axure — they should be used right at the beginning of the design process.

There’s nothing better for gathering feedback early on than a solid wireframe.

Why?

Because people can focus more on function, information architecture, UX, user flow, usability, user interactions, and so on, rather than having these foundational aspects of a design being overshadowed by its aesthetics.

In addition, any required changes can be done quickly without too many tedious code and graphics-editor adjustments.

This video that my startup put together shows how easy wireframing can be.

Interactive Wireframe (or Clickable Wireframe)

Sometimes designers like to increase the fidelity of their work a bit to stress the importance of certain parts of the UI, as well as to present and quickly test the soundness of interactions between elements. A very popular way of doing that quickly is the creation of an interactive wireframe, also known as a clickable wireframe.

A more sophisticated wireframe designed using UXPin, a specialized wirefaming/prototyping tool

Interactive wireframes might be very helpful on the first presentation of a design to a stakeholder or client. If you’ve ever heard the classic question "What happens if I click this button?" you will have the answer right on your interactive wireframe. It’s impressive and engaging.

Being Careful with the Presentation of Wireframes

To a layman, e.g. our project clients or non-technical managers/employers, looking at a wireframe might be perplexing because wireframes might not have any resemblance to the final design at all.

Quick hand-sketched wireframing of an app’s user flow by Fernando Guillen

That’s why we need to take some time to explain what a wireframe is — and, more importantly, its significance within the design process — before we show it to individuals that are uninitiated to the concept of wireframes.

Prototype

A prototype is a mid- to high-fidelity representation of the final user interface.

The goal of a prototype is straightforward: Simulate the interaction between the user and the interface.

Whenever a button is clicked, the appropriate action must occur, mimicking the experience of a full product.

Visual Characteristics of a Prototype

When it comes to aesthetics, a prototype may closely resemble the final version of the product.

Basically, a prototype looks like the final product, but it just doesn’t have the nuts-and-bolts yet (i.e. HTML, CSS, JS, server-side programming, databases, etc.)

Interactive prototype designed in UXPin

Primary colors should be all set, key content (at least the essential pieces) must be present, IA should be demonstrated, and typography should, to a reasonable extent, represent the final version. Clicking on an interactive object should demonstrate its subsequent response.

Benefits of Prototyping

Why is prototyping important? Because prototypes are typically for testing a product with real users. Early testing of prototypes can save tons of money and time that would have gone toward developing the wrong interface and back-end product architecture. It is a good validation tool for the design and development of the product.

In addition, showing a prototype to users and asking them to go through some basic use-cases is amazingly insightful and inspiring for the entire team.

Instead of spending time coding the prototype, designers today can engage in a rapid and cost-effective prototyping process using software that I’ll talk about in a bit.

Any changes you need to make after user-testing can be implemented more quickly, without wasting the time of your engineers.

Design Workflow

Understanding the very nature of design, and the difference between wireframes and prototypes, is really just the entry point to the world of user experience design.

The magic happens when you’re able to combine the many pieces of the process into a cohesive, effective, and efficient workflow.

When I was managing a UX design department a few of years back, the biggest mistake I saw in our process was this: We treated wireframes as disposable and non-essential. So we would rush the process and we wouldn’t give the wireframing process the time and effort it deserves. They were too sketchy and messy to be used as a blueprint — the foundational backbone — of a solid prototype and the final product.

A Few Tips

  • While wireframing, create reusable elements that can be edited so that when you’re in the prototyping stage, you can simply just refine those elements
  • Make sure that when the wireframe is done, it represents the latest feedback from your teammates and stakeholders
  • Use software to your advantage

Wireframing and Prototyping Software

I’ll end with a list of tools you can use to make wireframing and prototyping easier.

Below you’ll find some of the most popular wireframing and prototyping tools, including the one my company has developed.

Test them (most have some sort of free trial) and choose the weapon that fits you and your team best!

UXPin

We have over 900 UI elements ready to be used on wireframes and prototypes. Please feel free to ask me questions about it in the comments.

UXPin

Proto.io

A very robust prototyping tool that can output HTML/CSS and demonstrate touchscreen interactions. Prototypes can be tested in actual devices.

Proto.io

Balsamiq

A very popular, longstanding, and easy to use wireframing app. Limited to static wireframing only though.

Balsamiq

Moqups

Allows for wireframing in the browser.

Moqups

Mockingbird

A simple wireframing tool. Product development stopped in 2010.

Mockingbird

Axure

A wireframing and prototyping app that’s popular in the enterprise software sector.

Axure

Protoshare

Wireframing and prototyping in the browser.

Protoshare

InvisionApp

Allows you to build functional prototypes using your existing designs. You can’t draw anything, but you can add links between screenshots.

InvisionApp

Related Content

About the Author

Marcin Treder is a UX designer, the CEO of UXPin, and author of several UX design books (such as UX Design for Startups).

The post Wireframes vs. Prototypes: What’s the Difference? appeared first on Six Revisions.

Continue reading
0

Testimonial

Thank you so much! We are very happy with our new website. It is easy to use and all of our customers tell us, they love it.

Contact Us

  • 13245 Atlantic Blvd. #4352
    Jacksonville, FL 32225
  • 904-240-5823