DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • TURN Time Into Value
  • CES 2020 — Highlights for the More Technically Minded
  • Hybrid Microservices — An Insight
  • Unraveling Lombok's Code Design Pitfalls: Exploring Encapsulation Issues

Trending

  • Memory Management in Java: An Introduction
  • Anomaly Detection: Leveraging Rule Engines to Minimize False Alarms
  • DevSecOps: Integrating Security Into Your DevOps Workflow
  • How To Use ChatGPT API in Python for Your Real-Time Data

What is a wireframe and why are they useful?

Josh Anderson user avatar by
Josh Anderson
·
Sep. 11, 13 · Interview
Like (0)
Save
Tweet
Share
4.84K Views

Join the DZone community and get the full member experience.

Join For Free

a wireframe is a visual guide that portrays how a page or screen of a website or system may look. wireframes can range from very unfinished and "sketchy" in appearance, to very polished looking and reflective of how the system will look at 100 percent completion. using wireframes can help determine:

  • the structure of a page or screen
  • the layout of content
  • the functionality available
  • calls to action
  • blocks of text
  • user interface elements
  • graphic design touches

the beauty, and power, of a wireframe is that almost every single one is different. some are used for broadly outlining the structure of a page, and nothing more. others might consist of a piece of paper with rectangles on it. at the other end of the scale, a very polished wireframe could indicate structure, content, functionality, and even elements of graphic design.

when are they useful?

wireframes are extremely useful in the following situations:

  • to quickly get ideas down on paper for soliciting feedback. this is the real "back of a napkin" use of a wireframe, and can it can be useful in a workshop to document ideas (use a whiteboard or computer screen, and draw up something rough). the very act of creating this image, this basic wireframe, will prompt people in all kinds of useful ways.

this type of wireframe is often referred to as "low-fidelity". it can be a few boxes drawn in felt tip, a pencil approximation of a full page, or a computer drawn illustration. the idea though is it doesn’t look finished, because invariably, it isn’t.

  • to communicate the specification of a system or website. this is the "a picture paints a thousand words" concept. communicating how a proposed system, website, or even simple page of content, should work and look is never as easy as it seems at first. drawing a wireframe, with the various states outline and suitable annotations, can save a lot of time writing complex paragraphs.

this type of wireframe is often referred to as "high-fidelity". it normally looks like a recognizable page and can often be very "designedd, but still sticks to the core of idea of being an approximation.

introducing clients to wireframes

one area to be careful with is when introducing the concept of wireframes to clients. as we have discussed, this is one of the key uses of a wireframe, however, depending on the client, a bit of an introduction might be required first in order to avoid confusion. this is often realized by first explaining what a wireframe isn’t , rather than what it is. overall, a wireframe isn’t:

  • a finished concept
  • a graphic design
  • an indication of content (text, images, etc..)
  • necessarily indicative of final layout

a designer friend often likes to amuse his colleagues with the story of a client who, after being presented with the wireframes for a new website, said:

“it looks great but does it have to be grey?”

it’s a funny tale, but a serious point. wireframes are fantastic, but not everyone understands how and why they can be used. so be sure to introduce the concept, as well as the wireframe itself, so that your client is not left scratching their head.


Concept (generic programming) Design Papers (software) Computer Element Illustration Blocks IT

Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • TURN Time Into Value
  • CES 2020 — Highlights for the More Technically Minded
  • Hybrid Microservices — An Insight
  • Unraveling Lombok's Code Design Pitfalls: Exploring Encapsulation Issues

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: