Difference between revisions of "Wireframes"

From GeeklogWiki
Jump to: navigation, search
(Created page with "''''Wireframes'''' is the name for a simple technique to streamline the development. The technique basically assumes that your webpages are built from rectangles and it helps...")
 
Line 1: Line 1:
''''Wireframes''''  is the name for a simple technique to streamline the development. The technique basically assumes that your webpages are built from rectangles and it helps to create order in the development chaos. A basic one looks like this:
+
''''Wireframes''''  is the name for a simple technique to streamline the development. The technique basically assumes that your webpages are built from rectangles and it helps to create order in the development chaos.
 +
A basic one looks like this:
  
 
[[File:wireframe_0.png]]
 
[[File:wireframe_0.png]]
  
Most geekLog pages do have this look-and-feel and the graphic is obvious and simple.  
+
Most geekLog pages do have this look-and-feel and the graphic is obvious and simple.
 
First thing is to drill down the BODY rectangle, which comes with a more precise naming of HEADER and FOOTER:
 
First thing is to drill down the BODY rectangle, which comes with a more precise naming of HEADER and FOOTER:
  
 
[[File:wireframe_1.png]]
 
[[File:wireframe_1.png]]
  
This is still a simple layout, but note that the position of the rectangles are already defined, though relative to each other.  
+
This is still a simple layout, but note that the position of the rectangles are already defined, though relative to each other.
 
Now add some functionality and fix their positions:
 
Now add some functionality and fix their positions:
  
 
[[File:wireframe_2.png]]
 
[[File:wireframe_2.png]]
  
At this very moment the need for a clean design is seen. And some rectangles need specifications for width and height.  
+
At this very moment the need for a clean design is seen. And some rectangles need specifications for width and height.
 
Window size is something to think about too.
 
Window size is something to think about too.
  
 
[[File:wireframe_3.png]]
 
[[File:wireframe_3.png]]
  
All these rectangles can be given a proper name and used in communication in the development team.  
+
All these rectangles can be given a proper name and used in communication in the development team.
 
Without such a '''wireframe''' comment on the content, hints etc. will loose its meaning.
 
Without such a '''wireframe''' comment on the content, hints etc. will loose its meaning.
  
 
[[File:wireframe_4.png]]
 
[[File:wireframe_4.png]]

Revision as of 23:03, 31 August 2014

'Wireframes' is the name for a simple technique to streamline the development. The technique basically assumes that your webpages are built from rectangles and it helps to create order in the development chaos. A basic one looks like this:

Wireframe 0.png

Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. First thing is to drill down the BODY rectangle, which comes with a more precise naming of HEADER and FOOTER:

Wireframe 1.png

This is still a simple layout, but note that the position of the rectangles are already defined, though relative to each other. Now add some functionality and fix their positions:

Wireframe 2.png

At this very moment the need for a clean design is seen. And some rectangles need specifications for width and height. Window size is something to think about too.

Wireframe 3.png

All these rectangles can be given a proper name and used in communication in the development team. Without such a wireframe comment on the content, hints etc. will loose its meaning.

Wireframe 4.png