[ZWeb] Design mockups

Heimo Laukkanen huima@fountainpark.org
Thu, 25 Jul 2002 07:45:00 +0300


I asked before about the status of the nzo-sking, which now seems to 
be in the sandbox. It is nice progress so cheers on that. On the other 
hand it looks still a bit geeky and plain. Plain in a sense that it 
could be a site made by / for 14 years old Quake gamers or 
grandparents bridge society. The frontpage also suffers from the same 
desease as many portal designs: it is trying to be everything to 

It does not say that:

     - Zope rocks and Zope is real and here now
     - Zope is ready for business
     - With Zope you can also look good

Ok have to admit that zope.com does not say that either, but we have 
to remember that this zope.org is the front of whole zope community to 
the public. So atleast for me there are a couple of things that could 
be improved.

While thinking about the site I thougth about the different audiences 
and their needs. In my mind I had the following different types:

     - Manager / Boss-type / Customer
     - Web developer / Designer
     - Programmer

The first type migth not be so interested about the tech. stuff, but 
would like to know in general what the Zope is all about. Perhaps 
someone has offered solution based on top of Zope and they would just 
like to see that they can trust on it.

For a web developer or designer I believe the site would have to be 
good looking and easy to use. Think about Adobe or Macromedia. Those 
sites are just simply working and to some extent inspirational. They 
show what can be easily done and emphasise the trust on their product.

For a programmer there must be easy access to the info that they are 
interested in: documentation, community, downloading products or 
participating the Zope development.

For me in general the design priorities should be following ( Design 
in my vocabulary means the information architecture and graphic design ):

     - Makes information accessible and easy to use
     - Looks professional, not in geeky way but in business way
     - Is easy to update and maintain

Thinking these thougths I have started to work on my Photoshop and 
spent ane nigth sitting in front of my computer and thinking about 
new.zope.org. Here are some of my thougths and results.


Before or the same time you look at those, read these thougths about them.

Mock up one: http://www.zope.org/projects/nzo/DesignMockupOne

On this mockup I thougth about how to make the whole site easy to 
access. On the top bar are main parts of the site with possibly the 
most important things lifted up as a quick links. This top bar should 
be static througout the whole site.

On bottom of the top bar is 'navigation aid' which has help, sitemap 
and search tools. And on the left corner of the top bar is the Zope logo.

Below the top bar is the content area which can change on each page. 
This means that also the navigation on the left corner of the content 
area could change - and include links relevant to that section. Also 
CMF's actions etc. would be visible after login on this navigation 
bar. Navigation bar is ripped from java.sun.com since it just looks good.

The main content area can have anything. Here on this mockup I thougth 
that the meaning of frontpage would have some lates news for user and 
a feature story that leads to new pages. Then Documentation, Dowload, 
Project and Community would have their own frontpages where would be 
all the information on those subjects clearly visible and easy to access.

The way the bunnygirl image is from Stone. Concept idea and copy is 
free to be used in any Zope advertising if you like Paul ,-)

Design mockup two: http://www.zope.org/projects/nzo/DesignMockupTwo

On this design mockup, which has two pages, I continued with the same 
theme and tested wether it would help or make things more complicated 
if on the top bar would be more information. And what would content 
look on this layout. Third test was to add a new section to the 
structure - the world of zope.

While doing the mockups I thougth about the site structure - what it 
is now and what it could be. i thougth about the world of zope of 
being like the general place to have information about Zope -- 
information for everyone, not just developers. It could also be named 
about zope or similar.

Community would concentrate on the community features. Showing how to 
become member and share info, lifting up featured members, featured or 
most popular products, showing mailinglists and other Zope sites, 
articles about Zope developers by Zope developers. This would be more 
'freely' stuff since it is the community section.

Documentation and download are self explanatory. Development would 
have all the information about Zope development. Here would be info 
abaout the projects, wikis and how to participate in the process. 

The good thing with this second mockup was that I tested it with 
content from a Zwiki page and it looked good. The down side was that 
atleast for me the tabbed top bar and more information on topbar was 
not a good choise: too much information and it just made the page look 
too restless.

So. Please throw me some feedback and ideas. I will spend soon another 
nigth on this subject and would like to get some brainfood from all of 

I will propably continue and try to come up with a different theme 
too, and also continue with the first mockup creating a couple of 
sample pages to see wether it would work in reality.