kalender
April 2018
M T W T F S S
« Nov    
 1
2345678
9101112131415
16171819202122
23242526272829
30  
Wireframe - Scarab Lounge
We create allkind of types wireframes from, low-fidelity to high-fidelity and yes, we do test third party wireframe´s as well. Check our website and drop us a line. Right after the general ¨Idea¨and the ¨Concept¨ a project is ready to be placed in a flow diagram (Architect plan) in all its detail & functionality. All in full working order but, without design. The so called ¨Wireframe¨. Wireframe, a mandatory part Wireframe is a absolute part of the process for creating a website and/or any software product. By making a Wireframe it becomes very clear how the flow of pages will work and if they are going to work. It is a great way to start understanding if all that is toughed of is going to function according plans. It is also cheape way to see and test if your project is viable. When all agree on the wireframe it is also possible to make a exact calculation of all sources needed.
Wireframe, low-fidelity, high-fidelity, Graphic design, Webdesign, SEO, Marketing, what is wireframe, how wireframe, why wireframe
15765
page-template-default,page,page-id-15765,qode-listing-1.0.1,qode-social-login-1.0,qode-news-1.0.2,qode-quick-links-1.0,qode-restaurant-1.0,ajax_fade,page_not_loaded,,side_area_uncovered_from_content,qode-content-sidebar-responsive,columns-3,qode-theme-ver-13.0,qode-theme-bridge,bridge,wpb-js-composer js-comp-ver-5.4.5,vc_responsive
 

Wireframe

Scarab Lounge Wireframe overview example Numbers Project

Wireframe App 24 pages

Scarab Lounge Wireframe overview example Worldcom SIM + Wifi + Viditel

Wireframe 44 pages

Scarab Lounge Wireframe overview example Museum Ootmarsum

Wireframe 57 pages

Scarab Lounge Wireframe overview example Worldcom

Wireframe 73 pages App

Right after the general ¨Idea¨and the ¨Concept¨ a project is ready to be placed in a flow diagram (Architect plan) in all its detail & functionality. All in full working order but, without design.

The so called ¨Wireframe¨.

Wireframe, a mandatory part

Wireframe is a absolute part of the process for creating a website and/or any software product. By making a Wireframe it becomes very clear how the flow of pages will work and if they are going to work. It is a great way to start understanding if all that is toughed of is going to function according plans. It is also cheape way to see and test if your project is viable. When all agree on the wireframe it is also possible to make a exact calculation of all sources needed.

 

What is a wireframe?

A website wireframe is a schematic or blueprint of all the screens needed for a website and or app. It is a visual guide, the ¨Skeleton Framework¨of the project. It is a great way to see after the original idea followed by the concept to see if the project is achievable. The wireframe shows the layout of all the content including the interface components and navigational systems, and shows how these relate to each other and work together. A wireframe focuses on functionality and priority of all different aspects of the content. The focus is not design or underlying software. A wireframe can be a sketch by pencil or placed as in our case in a software program.

 

Who works on a wireframe?

Usually wireframes are created by business analysts, experienced designers, visual designers, developers usability researchers.

 

The focus of a wireframe

  • The range of functions available
  • The relative priorities of the information and functions
  • The rules for displaying certain kinds of information
  • The effect of different scenarios on the display

 

Uses of wireframes

We use wireframes for different disciplines:
Software development, to get an idea concerning the tangibility of the functionalities
Designing, to understand the functionalities in the User Interface (UI).
Business analysts, use it to visually support business rules and interaction requirements.
Stakeholders, review wireframes to make sure all requirements and objectives are met through the design.
All, use the information to understand the navigation paths between the pages.

 

Wireframes differ from site to site

The following elements are to be seen as standard elements on wireframes:

  • Logo
  • Search field
  • Breadcrumb
  • Headers, including page title as the H1 and subheads H2-Hx
  • Navigation systems, including global navigation and local navigation
  • Body content
  • Share buttons
  • Contact information
  • Footer

 

Types of Wireframes

Since wireframes can vary in their production, from paper sketches to computer-drawn images and in the amount of detail they convey.  Roughly we define two types: Low and high-fidelity wireframes for production or functionality.

  • Low-fidelity wireframes help facilitate project team communication and are relatively quick to develop. They tend to be more abstract because they often use simple images to block off space and implement mock content, or Latin (lorem ipsum) text as filler for content and labels.
  • High-fidelity wireframes are better for documentation because of their increased level of detail. These wireframes often include information about each particular item on the page, including dimensions, behavior, and/ or actions related to any interactive element.

 

Wireframes, what can you expect from us

Scarab Lounge is specialist in Wireframes. We create small to very large wireframes from simple to very complex. Some are days’ work others can run into months.
Below an overview of a small wireframe. On the right hand, you see small thumbnails of every individual page. In the centre, you see a page overview of the whole project. In this case 24 pages. The green lines are actions towards pages and the red lines are the lines to be able to return pages. A wireframe holds all items in this case webpages of the total product. If something misses or is thought of wrongly it will show in the wireframe. Here it can changed easily without lots of time consuming fixes and the extra costs according.

Low-fidelity wireframe

Scarab Lounge Wireframe overview example Numbers Project

High-fidelity wireframe

Scarab Lounge Wireframe overview example Worldcom