Wireframes - Revision history

Wim at 11:04, 29 September 2014

2014-09-29T11:04:56Z

Wim at 10:57, 29 September 2014

2014-09-29T10:57:31Z

Wim at 10:47, 29 September 2014

2014-09-29T10:47:25Z

Wim at 10:28, 29 September 2014

2014-09-29T10:28:30Z

Wim at 17:51, 23 September 2014

2014-09-23T17:51:08Z

Wim at 17:50, 23 September 2014

2014-09-23T17:50:04Z

Wim at 17:19, 23 September 2014

2014-09-23T17:19:15Z

Wim at 17:18, 23 September 2014

2014-09-23T17:18:20Z

Wim at 14:57, 23 September 2014

2014-09-23T14:57:12Z

Wim at 23:13, 7 September 2014

2014-09-07T23:13:43Z

@@ 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 (see the [http://www.w3schools.com/css/css_boxmodel.asp box model]) and it helps to create order in the development chaos by facilitating a visual approach.  See also [http://en.wikipedia.org/wiki/Website_wireframe Wikipedia], review a [http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 beginners guide] or view some general [http://www.gliffy.com/uses/wireframe-software/ examples]
 A basic one looks like this:[[File:Wireframe_0.png|thumb|Basic: header, body, footer]]
-[[File:wframe_0.png|left]]
+[[File:wframe_0.png|none]]
 Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present. we have the option to replace rectangles, OR , add rectangles inside them and keep the surrounding rectangle for clarity.
 First thing is to drill down the BODY rectangle. [[File:Wireframe_1.png|thumb|Extended: header, body:(menu, application), footer]]
@@ Line 10: / Line 17: @@
 [[File:wframe_1.png|center]]
-----
+== Advanced ==
 [[File:Wireframe_2.png|thumb|Advanced: header:(branding, secure, globalNav), body:(secondaryNav, content:(title, support), application), footer]]
 Now add some functionality. As an example the HEADER is designed in detail, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.
@@ Line 18: / Line 26: @@
 [[File:wframe_2a.png|center]]
-----
+== GeekLog ==
 [[File:wframe_3b.png|right]]

@@ Line 11: / Line 11: @@
 ----
-[[File:Wireframe_2.png|thumb|Advanced: header:(branding, secure, globalNav), body:(secondaryNav, title, support), footer]]
+[[File:Wireframe_2.png|thumb|Advanced: header:(branding, secure, globalNav), body:(secondaryNav, content:(title, support), application), footer]]
 Now add some functionality. As an example the HEADER is designed in detail, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.

@@ 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 (see the [http://www.w3schools.com/css/css_boxmodel.asp box model]) and it helps to create order in the development chaos by facilitating a visual approach.  See also [http://en.wikipedia.org/wiki/Website_wireframe Wikipedia], review a [http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 beginners guide] or view some general [http://www.gliffy.com/uses/wireframe-software/ examples]
-A basic one looks like this:[[File:Wireframe_0.png|thumb]]
+A basic one looks like this:[[File:Wireframe_0.png|thumb|Basic: header, body, footer]]
 [[File:wframe_0.png|left]]
 Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present. we have the option to replace rectangles, OR , add rectangles inside them and keep the surrounding rectangle for clarity.
-First thing is to drill down the BODY rectangle. [[File:Wireframe_1.png|thumb]]
+First thing is to drill down the BODY rectangle. [[File:Wireframe_1.png|thumb|Extended: header, body:(menu, application), footer]]
 Below is still a simple layout, but note that now the position of the rectangles is inherently defined, though is relative to each other.
@@ Line 11: / Line 11: @@
 ----
-[[File:Wireframe_2.png|thumb]]
+[[File:Wireframe_2.png|thumb|Advanced: header:(branding, secure, globalNav), body:(secondaryNav, title, support), footer]]
 Now add some functionality. As an example the HEADER is designed in detail, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.

@@ 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 (see the [http://www.w3schools.com/css/css_boxmodel.asp box model]) and it helps to create order in the development chaos by facilitating a visual approach.  See also [http://en.wikipedia.org/wiki/Website_wireframe Wikipedia], review a [http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 beginners guide] or view some general [http://www.gliffy.com/uses/wireframe-software/ examples]
-A basic one looks like this:
+A basic one looks like this:[[File:Wireframe_0.png|thumb]]
 [[File:wframe_0.png|left]]
 Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present. we have the option to replace rectangles, OR , add rectangles inside them and keep the surrounding rectangle for clarity.
-First thing is to drill down the BODY rectangle.
+First thing is to drill down the BODY rectangle. [[File:Wireframe_1.png|thumb]]
 Below is still a simple layout, but note that now the position of the rectangles is inherently defined, though is relative to each other.
-[[File:wframe_1.png|none]]
+[[File:wframe_1.png|center]]
 Now add some functionality. As an example the HEADER is designed in detail, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.
 [[File:wframe_2b.png|left]]
-The example at the right is stripped from the major rectangles and shows no dependencies.
+The example below is stripped from the major rectangles and shows no dependencies.
-[[File:wframe_2a.png|none]]
+[[File:wframe_2a.png|center]]
 ----
@@ Line 22: / Line 22: @@
 [[File:wframe_3b.png|right]]
 [[File:wframe_3a.png|left]]
 The layouts that geekLog is using can be wireframes also, as is shown to the left and the right. With a clear and implicit layout from top to bottom and from right to left, or just some boxes glued together.

@@ Line 12: / Line 12: @@
 [[File:wframe_1.png|none]]
-Now add some functionality. As an example the HEADER, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.
+Now add some functionality. As an example the HEADER is designed in detail, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.
 [[File:wframe_2b.png|left]]

@@ Line 7: / Line 7: @@
 Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present. we have the option to replace rectangles, OR , add rectangles inside them and keep the surrounding rectangle for clarity.
 First thing is to drill down the BODY rectangle.
-[[File:wframe_1.png|right]]
+Below is still a simple layout, but note that now the position of the rectangles is inherently defined, though is relative to each other.
-This is still a simple layout, and note that now the position of the rectangles is inherently defined, though relative to each other.
+Now add some functionality. As an example the HEADER, we forget about BODY and replace it by a MENU and some CONTENT is added with embedded rectangles for a STORY and a SEARCH box.
-Now add some functionality and assign their positions:
+[[File:wframe_2b.png|left]]
-[[File:wframe_2b.png|right]]
+----
-[[File:wframe_2a.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.
 All these rectangles can be given a proper name or ID and these names must be used in the communications in the development team.
@@ Line 29: / Line 35: @@
 Without such a '''wireframe''', without such visual representation, any comment on the content outlined, any hint etc. will loose its meaning.
-[[File:wframe_4.png]]
+[[File:wframe_4.png|center]]

@@ Line 3: / Line 3: @@
 A basic one looks like this:
-[[File:wireframe_0.png]]
+[[File:wframe_0.png]]
 Most geekLog pages do have this look-and-feel and the graphic is obvious and simple. Next steps are to refine the rectangles into more detail that reflects the content and functions we want to present.
@@ Line 9: / Line 9: @@
 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:wframe_1.png]]
 This is still a simple layout, and note that now the position of the rectangles is inherently defined, though relative to each other.
@@ Line 15: / Line 15: @@
 Now add some functionality and assign their positions:
-[[File:wireframe_2.png]]
+[[File:wframe_2b.png|right]]
 At this very moment the need for a clean design is seen. And some rectangles need specifications for width and height.
@@ Line 21: / Line 22: @@
 Window size is something to think about too.
-[[File:wireframe_3.png]]
+[[File:wframe_3b.png|right]]
 All these rectangles can be given a proper name or ID and these names must be used in the communications in the development team.
@@ Line 27: / Line 29: @@
 Without such a '''wireframe''', without such visual representation, any comment on the content outlined, any hint etc. will loose its meaning.
-[[File:wireframe_4.png]]
+[[File:wframe_4.png]]