2.b. Creating a Basic Wireframe with Native Widgets

Adding native wireframe widgets, naming widgets & adding widget notes.

Back to all videos

Video 2 of Part 2: Widgets and Masters – Wireframing Basics

Transcript

Next we’ll add a logo placeholder. The wireframe widget library is loaded by default. Drag out a placeholder widget. Double click it to add text which is a visual cue of what this object is. Let’s also add a name, this is an extremely important habit to get into for when we get into interactivity. It also enables you to communicate with other about aspects of your design – it’s not very often we are designing in a vacuum.

Widget notes

Talking of not designing in a vacuum. Let’s introduce the notes tab. This is where you can make notes about the widget. There are a number of preset fields, but you can customise these for whatever purpose you desire. I often delete a lot of these presets and create a custom field of ‘Changes’ so I can log to-do’s against this object or widget. These notes are included when you generate specification docs, more on working effectively in a team later.

Widget properties and style

OK, we’ll skip interactions for now, on to the Widget properties and style tab. In the event that you realise you are using the wrong shape, or you want to change a shape – you don’t need to delete, and start again. You can quickly change the shape by right clicking, and choosing ‘select shape’, or, for more visual details, you can select a shape from the dialogue in the properties tab.
OK next we’ll drag out a ready made horizontal menu. Let’s put a global guide in to delineate the head of the page, and move the menu into place. Then simply double click to customise the text of each item. Let’s keep it generic for now, matching the names of the default pages.

Our services

Using axure we prototype your ideas for:

  • mobile apps
  • web apps
  • desktop app
  • embedded devices

Prototype your idea

We take your axure prototype and turn it into working software in:

  • .NET
  • PHP
  • Java
  • All other common technologies

Code your prototype

We provide the world’s best axure training, including:

  • Introductory courses
  • Advanced courses
  • Mobile and Responsive courses
  • Master classes

Approved axure training

Just a few of our customers

European Union
VISA
IBM
KPMG
BBC
Rolex

Contact Us