This tends to happen in the prototyping phase. We spend lots of time and creative energy on an idea that looks awesome. Our clients might love it just as much as we do. But only when we actually start to build it do we begin to fully understand the consequences.

A design mockup serves as a compass for our website projects. If we fail to think ahead with regards to what certain elements require, it could mean being stuck in a bad situation. The end result is a site that has to make some serious compromises in order to work on different devices and browsers. That can negatively impact accessibility, performance and adherence to best practices.

Thankfully, some planning will help you avoid a messy build process. Let’s take a look at a few key items to consider before sharing your ideas with a client.

How Elements Adapt to Different Screens

There’s a reason why there’s so much talk of a “mobile first” approach to web design. In essence, this allows us to start with the bare essentials of a website. From there, we can add and enhance as the viewport gets larger.

Still, each of us have our own preferences for building prototypes. For those still using a desktop-based approach, it’s important to think about how all of those fancy design elements will work on a phone.

If you plan on implementing CSS Grid or Flexbox, they’ll help a great deal in terms of making the best use of available screen real estate. But other elements may require more effort to get working.

Large sliders, for example, can become very difficult to use on small screens. Intricate images might not be as impactful and text may overrun boundaries. Performance may also lag.

In this case, you might have to decide if the slider is worth showing on mobile at all. Or perhaps it could be refactored to better adapt to work in all situations.

Accessibility Impacts

Design starts with picking the appropriate fonts and colors. They’re both deeply connected to branding and accessibility.

Fonts should be crisp and sized for legibility. While fancy script and decorative type can look beautiful, it needs to be large enough to read and restricted to usage in headings. If those requirements can’t be reasonably met, it may be best to drop them from your project altogether.

In addition, color contrast should also be a major concern. Background and foreground colors must achieve an acceptable contrast ratio in order to be considered accessible. Plus, it’s just good practice.

If you’re unsure about your palette, use an online tool to determine its suitability. Sometimes, even a slight adjustment is all that’s needed to pass WCAG AA standards.

Beyond those two items, it’s also good to have a plan for how you’ll display elements such as icons. Are they intuitive? Will they be accompanied by text?

Backwards Compatibility

Not every website has to be fully-compatible with, say, Internet Explorer 9. And legacy browsers shouldn’t necessarily deter us from using the latest CSS or JavaScript. But some thought should be put into backwards compatibility.

Of particular concern are design elements that will render a website completely unusable in older software. Even if a particular browser makes up a small percentage of your site’s visitors, that’s still leaving some potential conversions on the table.

It’s worth considering what effect design decisions will have on these users. The available fallbacks for a given technology might be enough to keep things looking decent and usable. Even better is that they can be fairly simple to implement.

It used to be that designers were expected to ensure elements looked and functioned exactly the same across all browsers. That may be too much of an ask these days. As long as a user can navigate and consume content on some of the more ancient software, that just might be enough.

Scenarios That Haven’t Happened Yet

Even the smallest websites will have a need to evolve over time. As new types of content are added, they’ll need to be accounted for in the design. If you’re not prepared, implementing these items could conflict with what’s already there.

Think of adding a series of videos, for example. While the process of adding that content may be easy enough – how will it fit into the look you’ve already established? Will you utilize a default browser UI or craft something to match your branding?

While you can’t always predict the future, you can plan for all sorts of possibilities. This is part of what a design system allows you to accomplish. By setting some default guidelines right from the start, you’ll have an easier time dealing with future additions.

The reality is that what we design today will likely change in the future. Therefore, it pays to be ready for that eventuality.

Building It Right the First Time

Crafting that first mockup is about so much more than just making things look good. It even goes beyond impressing your clients. Indeed, it’s an exercise that forces us to look at our project as a whole.

The aesthetics must be pleasing to the eye. But the design must also be accessible and able to adapt to various screens. Plus, it may have to accommodate different types of content as things evolve.

If that sounds overwhelming – take a deep breath. This is where your experience and expertise can come to the rescue. The right tools can also pitch in.

Think about what has worked (and what hasn’t) in your past projects. Look for ways to implement features that are resilient. Do that and you’ll be on your way to a successful project!

The post Why Thinking Ahead Is Crucial in Web Design appeared first on Speckyboy Design Magazine.

This is a big step in the process. To reach a positive outcome, both designers and developers need to be on the same page, so to speak. But that’s easier said than done.

Quite often, certain aspects of a design and layout can get lost in translation. That leads to something that looks different in the browser than it did in your prototyping app. Even subtle differences can hurt the overall usability and aesthetic.

And while it might be easier to blame the situation on a rogue developer, it’s not always that simple. Communication is key, as is providing a clear understanding of the design itself.

Let’s explore some ideas for making the hand-off from designer to developer a productive one.

Provide the Project Details

Overlooking the details is among the most common issues in the mockup-to-build process. Items such as which fonts are utilized, the spacing between elements, and design enhancements (shadows, borders, etc.) can easily be misinterpreted or even missed entirely.

This could be due to a lack of clarity. Without explicit instructions, a developer might have to search within a prototype to determine how these items were implemented. And not everyone will take the time to do so.

We may assume that these aspects of our design will be obvious – they’re not. Therefore, it’s important to document the various elements. This provides a reference point for developers as they work through the build.

Fortunately, many apps offer style guides that will help to avoid any confusion. However, if you’re designing in an app such as Photoshop, you may need to generate this information on your own.

Keep the Mockup and Assets Organized

Speaking of Photoshop, have you ever opened up a PSD file only to see a large number of unnamed layers in a seemingly random order? The ability to determine the contents of each layer can be extremely frustrating.

This not only wastes time, but it’s also another way a developer could miss out on those design details. Beyond that, forcing a developer to navigate an unorganized mess is not a great way to make friends.

The organization of a mockup is key to a smooth hand-off. Take some time to label the various elements within your work and place them in a logical order.

When it comes to additional assets such as images and fonts, place them in folders. It’s also helpful to name images in a way that reflects their content and/or usage.

Don’t Forget about Responsive Styles

When it comes to how your design will look and work on mobile devices, it’s best not to leave things to chance. Responsive styles are just as important as desktop.

Again, this is where the help of a good prototyping app can be priceless. The ability to add responsiveness to a mockup makes things that much easier for a developer to put into action.

Even so, some aspects may still benefit from an extra explanation. For example, how should multi-column layouts respond to tablets as opposed to phones? Will typography change? How about navigation? These are all important things to consider.

Include notes on mobile devices in style guides and documentation. This will ensure a consistent user experience for every screen.

Be a Tour Guide

Interactive mockups and written instructions are great. But there’s still something to be said for having a conversation around the finer points of a project.

With the ease of videoconferencing, a virtual get-together with a developer should be on your to-do list. This allows you to act as a “tour guide” of sorts, explaining all the moving parts of your creative work.

In addition, it’s also an opportunity to receive valuable feedback. There may be instances when a developer spots an issue that could negatively impact users. It’s better to find this out now, rather than in the middle of the build.

Participants can also ask each other questions and clear up any potential misunderstandings. The goal is for everyone to be in sync with what’s going on. Spending even a few minutes discussing the project will help get you there.

Designers and Developers Working in Harmony

In the end, everyone involved in the design and development of a website has the same goal: a successful outcome. A seamless transfer from designer to developer plays an important role.

For designers, it takes a little extra effort to ensure success. It involves providing a mockup that is well-organized and documented. That includes any specifics regarding how the website is expected to work across various screen sizes.

Finally, an effort to be engaged with colleagues is vital. Spending time together (virtually or in-person) to discuss the details should be a priority.

It takes practice to get things right. And there’s always the possibility of a mistake. But by taking the steps above, you’ll put your projects on the straightest path to success.

The post Tips for Handing off Your Website Mockup to a Developer appeared first on Speckyboy Design Magazine.

Similar functionality has previously been available through the use of page builder plugins. It’s also something that the Customizer has long tried to address. But FSE provides a more cohesive experience.

Now, anyone with a block-enabled theme can perform everything from small style tweaks to massive layout overhauls. Additional plugins and coding skills are optional.

The potential impacts of this feature on the design process could be huge. Let’s take a look at what FSE brings to web design.

Building Prototypes in the Browser

For many designers, the process of building prototypes is completely separate from building the website itself. Tools such as Sketch, Figma, or Photoshop are used to create the look and layout. From there, client revisions are implemented and, once approved, it’s time to start on the theme.

With FSE, there’s an opportunity to move to a browser-based approach. Instead of having to translate a mockup into HTML, CSS, and JavaScript, the code is generated for us as we build. The mockup is a working website, rather than an abstract facsimile.

One can imagine the use of a block-based starter theme, which provides access to the basics of a typical website. The theme.json file can be used to configure default styles, which can then be tweaked within the Global Styles screen. Meanwhile, assets such as custom scripts and functionality are already in place – leaving a designer to focus more on crafting the perfect look.

This could lead to a more efficient workflow. In addition, stakeholders would get an accurate, real-time view of how a website works across multiple devices. And using the block editor eschews the need to dig into code to make design-related changes.

Like every other tool at our disposal, it’s in how we choose to use it. For some, browser-based prototyping could disrupt their creative flow. Others may see it as a major boost in productivity.

Faster Design = Less Creativity?

This approach isn’t without risk. It may lead to cutting corners and a certain sameness when it comes to design.

We’ve already seen this with some commercial theme frameworks. The same features and layouts are used ad nauseam. At worst, this might lead to designing based on convenience rather than need.

Access to theme templates via the block editor could, for example, disincentivize writing custom CSS. Instead of making an effort to create a unique look, the styles that are already available may be deemed as “good enough”.

There’s also the possibility of relying too much on the default styles that come bundled with various plugins or blocks. While some will blend into your existing theme, others require custom work to fit in.

The bottom line is that, just because Full Site Editing makes design faster, we still have to pay attention to the details.

Adding Style Variations Through Child Themes or Other Means

Child themes have been a part of WordPress for years. They offer a means of customizing the desired parts of a theme without the risk of losing them after an update. Update the parent theme, and the child stays intact.

FSE adds another layer, which could be useful in the design process. That is the ability to create style variations through child themes.

It involves making relevant changes to the child theme’s theme.json file. Justin Tadlock has a great write-up on the technique over at WP Tavern. There are plenty of possibilities here for web designers.

As it relates to our subject, this would allow designers to create multiple versions of a site’s design for stakeholders to consider. Switching designs is as simple as changing which child theme is active within WordPress.

However, there are other proposals that would eschew child themes altogether. They don’t rely on separate themes, but on the presence of separate files within a theme to produce style variations.

Those variations could include any combination of custom color, typography, and layout. It’s great for projects where a client isn’t sure of what they want. In addition, websites that need a variety of design choices can make changes seamlessly.

These are all items that can be implemented alongside the initial design. And making such revisions in WordPress might be easier than trying to maintain multiple mockup files (which then have to be ported over to your theme).

A New Way to Design for WordPress

While other content management systems offer some form of visual theme design, it’s only recently (as of version 5.9) come to WordPress. Thus, it’s a new workflow for designers who specialize in it.

Full Site Editing, like the Gutenberg block editor itself, has its quirks. It’s also in a constant state of change. New features are always right around the corner.

But even its early iterations point to changes in the web design process. For some, that could mean doing the bulk of their design work directly within a web browser. There’s great potential in terms of efficiency.

Yet, it’s also worth pointing out that FSE isn’t a requirement. The newly-termed “classic” WordPress themes still work just fine, as does the process for designing with them.

But if you’re ready for a change, FSE could be the tool you’ve been waiting for.

The post How WordPress Full Site Editing Could Impact the Design Process appeared first on Speckyboy Design Magazine.

Our daily grind was complicated by shutdowns, kids invading the home office, and clients who needed our help in rapidly changing their business models. Even though many of us were stuck in the house, there was rarely a dull moment.

All of that aside, the year saw many developments that had nothing to do with pandemics or other chaos. New tools were brought to market, our favorite software saw important updates and the community was as creative and helpful as ever. In other words: 2020 had plenty of positives for designers and developers to celebrate.

Let’s take a look back at some important and interesting developments that impacted web designers this past year.

Modern CSS Thrives

While there were no revolutionary changes to CSS in 2020, that doesn’t mean it didn’t have a great year. Quite the contrary.

The language benefitted from the continued steady evolution of web browsers. As modern versions of Chrome, Edge, Firefox and Safari are released, support for newer CSS standards and specs grow.

In practice, this means web designers can adopt new techniques with confidence. CSS Grid layouts, for example, are a much safer bet than they were a few years ago. And while fallbacks are never a bad idea, they may not need to be as drastic.

That’s due to the dwindling number of users for legacy browsers such as Internet Explorer. According to StatCounter Global Stats, usage of IE was down to a measly 1.05% of the market as of October 2020. Compare that with the nearly 2% it captured a year earlier.

Chart courtesy of StatCounter Global Stats

The further IE and other outdated browsers are in the rearview, the easier it will be to bring the latest CSS developments to production websites. This allows the language to better fulfill its vast potential. 2020 was a big step in that direction.

Top CSS Articles for 2020

• Avoiding ‘Wasteful’ CSS in Your Projects
• BEM Methodology In CSS: A Quick Start Guide
• Creating 3D Illustrations with CSS
• How CSS Perspective Works
• How CSS Variables Can Improve Efficiency and Consistency
• LCH colors in CSS: what, why, and how?
• Learn CSS Positioning
• Positioning Text Along a Path with CSS
• Styling Layout Wrappers In CSS
• Visualizing CSS Resets

The Headless CMS Develops Its Niche

The utilization of “headless” or “detached” content management systems has continued to gain momentum. This practice involves employing a CMS (such as WordPress) to feed content to an outside application.

This leads to several interesting possibilities. You might send content out to a mobile application – allowing both your app and website to share the same blog posts. Likewise, you could leverage a static website generator such as GatsbyJS or 11ty to create a super-fast user experience – perfect for heavily-trafficked sites. All while keeping a familiar back end UI for your content creators.

And, although this technology is still relatively young, you can see it starting to take hold. GatsbyJS, for one, has come a long way over the past year. GraphQL, its companion query language, is steadily maturing. It aims to be both efficient and high-performing.

Besides, a number of tools are being built to streamline the process of creating a headless configuration. This is vital, as it is not currently a beginner-friendly task. The easier this all becomes, the more widespread and creative its usage will be.

For now, headless CMS configurations are being deployed more and more. Still, unless you’re an expert, diving in head-first and adopting this technology for client projects may not be wise.

Therefore, it’s probably best to start small and experiment. Once you are on solid ground, going headless could be a great solution.

Top Headless CMS Articles for 2020

• An Honest Review of Gatsby
• Building a Headless WordPress Website with GatsbyJS
• Building Serverless Front-End Applications Using Google Cloud Platform
• Don’t Build a Frankenstein Website!
• Going Jamstack with React, Serverless, and Airtable
• Headless CMS: What and Why
• How to Begin Your Journey Developing Headless WordPress Sites
• How To Create A Headless WordPress Site On The JAMstack
• Powering React Native Applications with ButterCMS Headless Engine
• When Does Using Headless WordPress Make Sense?

Prototyping Tools Improve and Evolve

The way we build website and mobile application prototypes continues to change. Many designers are eschewing traditional tools like Photoshop in favor of niche apps like Adobe XD, Figma, and Sketch.

Each of these tools has been built with web and mobile applications in mind. Therefore, designers don’t have to settle for passing along static mockup images to clients. Rather, they can create something fully-interactive that better represents what the final product will do.

Of course, the tools themselves are not new – they’ve been on the market for several years. But in 2020 the argument for using any of these apps has become more compelling.

For one, each has robust developer communities that release helpful goodies such as plugins and UI kits. They help designers extend functionality and increase efficiency. And the apps themselves have released some exciting features, along with smoothing out rough edges.

However, another feature of prototyping apps also became very important: their built-in collaboration tools. They facilitate remote feedback from both clients and team members. With so many of us working from home this year, anything that makes the review process easier is a massive bonus.

Top Prototyping Tool Articles for 2020

• 10 Tutorials to Help You Master Adobe XD
• 20 Free Adobe XD UI Kits for Web & Mobile App Designers
• 20 Free Mobile UI & Wireframe Kits for Sketch App
• 35 Free Web & Mobile UI Templates for Figma
• Adobe XD Has a New Look
• Design To Engineering Handoff
• Gradient angles in CSS, Figma & Sketch
• How to Turbocharge Your Components with Figma Variants
• Part of your World: Why We’re Proud to Build a Truly Native Mac App (Sketch)
• Sketch vs. Figma vs. Adobe XD: Which Design Tool Is Best for Beginners?

The WordPress Gutenberg Block Editor Becomes More Polished

December 2020 marked the Gutenberg block editor’s second birthday. But, unlike most 2-year-olds, it seems like the fits and tantrums are (mostly) a thing of the past. Gutenberg is becoming quite mature for its age.

Looking at the editor’s UI, it’s lightyears ahead of where it was back at the beginning. A lot of development time went into making the interface more intuitive. Getting around is much easier, as is finding and selecting individual blocks.

Accessibility was also a big focus. This particular subject is important in all areas of web development but was also a major criticism of earlier versions of Gutenberg. So, improving both the UI and making it more accessible are big wins for 2020.

The year also saw the introduction of custom block patterns, which make it easier to use and reuse a specific layout. The ability to implement a custom layout anywhere it’s needed is no small achievement. This was one of the missing features that made the block editor a difficult sell for some use cases.

And, while not ready for prime time just yet, Gutenberg-powered full site editing (FSE) is in the works. This will enable users with a compatible theme to edit all aspects of their website through the block editor. The first such theme, Q, was made available for download earlier this year.

All told, WordPress now has a default editing experience that can be seriously considered for just about any project. There are still some advantages to page builders – not to mention the old Classic Editor. But blocks are catching on.

Top WordPress Gutenberg Block Editor Articles for 2020

• Block Navigation Plugin Provides Missing Context-Based Outline for the WordPress Editor
• Create a Custom Color Palette for the WordPress Gutenberg Editor
• Getting the WordPress Block Editor to Look Like the Front End Design
• How to Bulk Convert Classic Blocks to Gutenberg in WordPress
• How to Create a Simple Gutenberg Block Pattern in WordPress
• How to Use the WordPress Gutenberg Cover Block
• Matt Mullenweg and Matías Ventura Demo New Image Editing Tools Coming to Gutenberg
• Styling Wide and Full-Width Gutenberg Blocks in WordPress
• Tips for Converting an Existing WordPress Website to Use the Gutenberg Block Editor
• What is Full Site Editing and how is it shaping a new WordPress?

In 2020, the Focus Was on the Bigger Picture

One thing you may notice about the items above is that they all involve evolutionary change. Nothing here appeared to be a watershed moment for web designers. In fact, posing this subject on Twitter didn’t result in any earth-shattering recommendations either.

Maybe that makes for less-than-compelling headlines. Yet it also means that, in a chaotic year, there was a comforting consistency for the web design industry. The tools and technologies we already use just got better. Nothing to complain about there.

When we look back years from now, a lot of historic events will stand out from 2020. But web designers may see it as a time that set the table for bigger things yet to come.

The post 2020 Web Design Year in Review appeared first on Speckyboy Design Magazine.

One of the best tools in a designer’s box in terms of optimizing UX is the prototype. A prototype can be your best friend during the design and planning stages of website creation. It can make or break your final product. The more you know about the site design process, the better you can understand its maintenance and upkeep in the future.

What Is a Prototype?

The prototype is an important step in the development of most websites. A prototype is an interactive simulation of the final site that users can test during a series of exhaustive testing sessions.

A prototype is not the final product. It will not have a high fidelity and will not look like the finished version of the site. Many users get confused about what a prototype is and will harass the designer because the product looks “ugly” or “wrong.”

Prototypes are interactive, responsive, and clickable. They are dynamic, working with the test user in a way that mimics the reactions of the finished product. It takes a website engineer to create a prototype.

The prototype should simulate how users will react with the interface when it goes live. Designers can test UX and UI, discover potential bugs, and fix it before publishing the site. It is the ultimate testing stage before the world sees and experiences the site.

There are low-fidelity and high-fidelity prototypes. A low-fi prototype is when designers transfer pages of wireframes into prototypes. High-fi prototypes come from the transference of mockups into prototypes.

The type of prototype you will need depends on the amount of detail the process requires. The goal is to tell the story of your product or service in a clear, interactive way. Your site designer can help you decide which type of prototype is best for your goals.

Source: Boxesandarrows.com

Prototype vs. Wireframe vs. Mockup

If a prototype doesn’t come into play during UX development, you may instead see wireframes or visual mockups of the site. These elements, however, are not interactive and do not show the user how the final product will work. A wireframe is a low-fidelity representation of the site.

It is the backbone of a design and will contain the basic structure of information and groups of content on the site. Wireframes may have hand-drawn sketches of the site or static layouts with a medium level of fidelity.

Visual mockups are mid- to high-fidelity static representations of the site. Users will see the structure of information, basic functionalities, and visual design, but they will not be able to interact with the site. Mockups are acceptable for iterating UX ideas, testing them out, and then repeating the process.

If you’re at the stage of development that is still largely exploratory, a mockup may be enough to get the job done. If you need a better idea of the full implications of a user interaction, however, prototypes are the answer.

Wireframes and mockups are appropriate to document the project, gain quick insights, and to get feedback from the user. They are less expensive to make, but they do not offer the same level of interactivity and insight as the prototype.

For in-depth research, real user testing, and a reusable skeleton of the finished interface, you will need a prototype. Although interactive prototyping may not always be appropriate for a design project, when it comes to creating and maintaining a class-A user experience, a solid prototype will go a long way.

When Should You Use a Prototype?

Prototypes are ideal for sites with complex UX and interactions that are best shown rather than simply described. Complex user interactions and workflows in site designs necessitate interactive prototypes prior to publishing the finished product. If your site has animations, many navigational options, complex workflow, or non-standard behaviors, you should use a prototype instead of only a lower-fidelity wireframe or mockup.

With high expectations for UX in 2017 and beyond, in-depth prototyping is becoming more important. A full prototype is the best way to interact with a site, make changes, and optimize the finished product. If you need to dive into the fine details of your website, you need a prototype. The same is true if the teams creating the site design have difficulty imagining the final product based on the mockup.

If this is the case, go with a high-fidelity prototype to help stakeholders and end users in usability studies properly evaluate your site’s design. On the other hand, you may not require a prototype if the teams don’t need to go into detail. Working in the wrong fidelity can negatively impact the final product. If you have the budget and time frame, it is always worth considering an interactive prototype.

How to Use a Prototype to Your Fullest Advantage

Having an interactive simulation of the final website can provide important insight into the finished product. It lets the website owner make changes based on user interactions and discoveries. While creating a prototype takes time and money, it is well worth the effort to achieve an optimized website. Here are a few best practices for utilizing the prototype to its fullest advantage:

1. Pick the right prototype. Prototypes can be static, clickable, testable, interactive, high-fi, low-fi, etc. Work with a design team you can trust to steer you in the right direction in terms of which prototype will suit your unique needs. You don’t want to overspend or waste time on a model that won’t serve your purposes. At the same time, you don’t want to sell your prototype short and fail to get the most out of the process.
2. Test early. Do not look at the prototype as just a final mockup of your site – it is an interactive testing opportunity. The point of a prototype is to allow you to play with the site and interact with it as a real user would. Test your prototype as early in the design process as possible so you can steer the project in the right direction from the beginning. Test subjects should play around with the site early on, answering questions about their experience to give you data that will inform your next move.
3. Test often. For optimized UX, test your prototype again and again until you’ve worked out all the bugs. Use a prototype at every stage of your design – even the first model. This can give you critical insights into how your desired audience will use the website and will provide a guideline for how to proceed. The more you test, the more information you can glean from your site before it goes live.

Prototypes let you test the usability and UX of your design in a low-risk research setting before it’s released to the masses. You don’t want to collect feedback about major issues when they’ve already affected your customers.

Testing a prototype can generate important feedback without negatively impacting the target audience. A prototype gives you the ability to test things and make changes ahead of time, so that when the site hits the web, you’ll have an optimized interface and happy customers.

For Optimal UX, Don’t Skip the Prototype

With a good prototype, you can avoid common disasters such as bad customer experiences, negative reviews, lack of understanding of the product, abandoned shopping carts, and return requests. You will have the opportunity to fix these issues before they impact your brand.

Depending on your deadline, you can take your time retesting your prototype, multiple times if necessary, redesigning until the finished product has zero failures. When it comes to creating the best possible user experience, don’t skip the prototype.

The post A Beginner’s Guide to UX Prototyping appeared first on Speckyboy Design Magazine.

They look different and are intended for different purposes. Sometimes a project will only need a wireframe, while at other times it will call for a prototype.

Start With a Wireframe

According to Usability.gov “a wireframe is a visual illustration of a web page… to show you where each item should be placed on a page.” It is a basic visual layout of gray boxes representing the main elements and identifies the site’s hierarchy.

Wireframing in a team usually develops quickly since iterations can readily integrate new ideas, input and usability needs. Wireframes do not show much detail, but create a simple design that guides the project and its team members.

• Wireframes visualize the basic elements of a web page
• They are developed and refined quickly
• They are not interactive

Once a wireframe starts becoming interactive, it becomes a prototype.

How is a Prototype Different?

A prototype is an interactive representation of the final product and by definition more detailed than a wireframe (e.g. graphics and text). Clickable prototypes enable users to experience and test their journey through the user interface (UI).

A prototype should be similar to the final product. Well-researched and orchestrated interactions need to closely model the user experience (UX). The interdependence between the front end interface and the back end programming tends to get ignored at this stage to keep costs down and accelerate agile development iterations.

• Prototypes are interactive
• They model the user experience
• They enable extensive user testing

Prototyping allows stakeholders to review a solution and put it to the test with users before spending time or money on coding. Wireframes can naturally evolve into more advanced, complex prototypes as the solution ripens in consecutive team sessions, agile user tests, and iterations.

A mockup is different from both the wireframe and the prototype. It is static like the wireframe, but more visual, conveying the brand without the interactivity of a prototype.

Do We Need a Mockup?

A mockup is a static design representation in which the corporate identity is applied through color, typography and visual style. Mockups can be drafts that turn into the final look of the solution. They show stakeholders a dimension of the product that can be important for customer acceptance packaging being a contributing factor of a product’s market success.

• Mockups apply the corporate identity
• They can be close to the solution’s final look-and-feel
• They are useful for user testing and acceptance

Mockups are particularly useful for obtaining early buy-in from stakeholders since they are more easily understood than abstract wireframes while being quicker to create than prototypes.

Wireframe, Prototype & Mockup Differentiation

• Wireframe
  • Key Aspects: Basic representation of design elements.
  • What to use for: Communication, documentation.
• Prototype
  • Key Aspects: Interactivity.
  • What to use for: Interactive user testing, UI design.
• Mockup
  • Key Aspects: Static visualization, branding.
  • What to use for: Stakeholder design buy-in.

The industry has not helped to keep the terms wireframe, mockup and prototype clearly defined, and readily available content uses the terms interchangeably. These three visualization tools have clearly been shown to be distinct, giving life to particular aspects of web and software development.

If you’re not sure how each fits into your process, just leave a comment so I can help. Tools like Omnigraffle, Sketch.app, or even Adobe Fireworks can help in creating wireframes, mockups or prototypes.

The post Wireframing, Prototyping, Mockuping – What’s the Difference? appeared first on Speckyboy Design Magazine.

“Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work.” Quote from Carolyn Snyder.

In this post we have collected our top 10 videos that not only illustrate how useful paper prototyping can be, they also show you how to cost effectively conduct your own tests and some of the videos have been animated, which are just fantastic to view.

If you would like to know more about Paper Prototyping, you can try these useful resources:

• Paper Prototyping by Shawn Medero (A List Apart)
• Paper Prototyping: Get User Data *Before* Coding
• Paper Prototyping Methods (UsabilityNet)
• Five Paper Prototyping Tips (uie.com)

Paper Prototype Animation

Hanmail Paper Prototype

This video is a paper-based prototype for Daum's web mail service, Hanmail.net made with Ajax.

Usability Testing with a Paper Prototype

The video shows a Usability session with a paper prototype of a leave application.

Paper Mock-Up – Trip Plannin Concept

Lo-fi Web Prototyping

PhotoTron Paper Prototype

Paper Prototype Testing for User Centered Interface Design at Ai Minnesota.

Paper GMail Art

This video is not quite a paper prototype usability test, but it is pretty cool, and it has been built with paper after all. Its a video that Saatchi Moscow created and produced for Google to attract more Russian people on GMail. Enjoy.

The post Effective Video Examples of Paper Prototyping appeared first on Speckyboy Design Magazine.