Dr. Loy has a Ph.D. in Resource Economics; master's degrees in economics, human resources, and safety; and has taught masters and doctorate level courses in statistics, research methods, economics, and management.
What Is A Wireframe?
Do you doodle? Well, if you doodle in meetings you might just be an expert at designing wireframes. Wireframes are rudimentary sketches that show an illustration of an electronic interface. This interface is what controls how the user interacts with a software program or electronic system, like a website.
If you are designing a webpage, database, or information system, the interface is how users interact with software. In the case of a webpage, the interface is what a user sees. Wireframes are basic sketches or designs that skip colors, fonts, sizing, and graphics to focus on functionality, space, content, and interplay.
Say we are designing a website and we start with an idea of how we want it to work. This would be considered a prototype. It's a sketch for the designers and programmers to work from in finding ways for the website to work. These sketches can be done simply on a napkin with a pencil or by using online design tools. Most online tools contain libraries of symbols and mockups to help a designer visualize what a wireframe should and could look like. To continue the discussion, let's develop a wireframe.
Developing A Wireframe
You can use wireframes to design different types of systems, such as an information system, databases, work teams, or marketing plans. There are variations in symbols. To be sure the sketch is understandable, it should have items that represent placeholders for logos, images, text, navigation and menu bars, buttons, and headers. When designing wireframes, we go through iterations, where we repeat the design of a wireframe until the result is our desired outcome.
Let's say we are designing a website for a nonprofit. You might start with a wireframe that's as simple as a blueprint with a header, body, and footer.
Next, it's good to make sure you have all of your contact information front and center. This would include things like telephone, fax, TTY, email, and chat. Adding your logo with a link to your homepage is helpful here, too.
Then, you could add some interaction elements such as navigational and dropdown menus.
We might move on to provide some detail on how we want the body content to look. This would include adding a searcher and breadcrumbs to the header. Footers, on the other hand, often provide standard links detailing accessibility, copyright, and a disclaimer. Here is where it's time to add in those extra components that we feel are essential. Examples of these are share buttons and social networks.
Although you might sketch out what you want your website to look like, most wireframes are designed by a team. Once we have our wireframe, it's time to work with other project teams to complete the project. For a comprehensive project, we will have to look at budget, hardware, security, and marketing to make sure our project is feasible.
A wireframe is usually used to begin the design of an interface for a webpage, piece of software, or information system. A wireframe is a simple design that focuses on how a system interacts with a user. In this lesson, we looked at how to create a wireframe for a website.
Regardless of the end result, a wireframe is very visual in its design. Things like colors and fonts are removed and will be added later. The schematic goes through a process that adds various navigational and interactive elements. These are iterations that show designers where to put things that make your design work effectively.
To unlock this lesson you must be a Study.com Member.
Create your account
Register to view this lesson
Unlock Your Education
See for yourself why 30 million people use Study.com
Become a Study.com member and start learning now.Become a Member
Already a member? Log InBack