Create a Website Design Sketch

Start with your plan

Just like when building a house, you need to create a plan for your website before you start anything. This is especially true when you are just starting out with Plone or any other website tool or system.

Over the years I have found that your plan must have two critical components:

1. A description of the type of users or visitors to your site, with a list of all the features they will need (e.g. calendars, help screens, etc),  functions (e.g. ability to enter comments) you want them to be able to do,  and content (e.g. PDF reports) you want them to see on the site.
2. A design sketch showing the basic design layout, controls, images, and colors you want on the final website.

Example Design Description

Type of User	Features	Functions	Content
Anonymous Visitors	help page news listings	site search sitemap contact us form	PDF business reports about us page
Administrator (on this site acts as webmaster, adding and maintaining all content)	(join feature disabled so only webmaster can log into the site) same	login link ability to edit content way to publish news receive emails form site	same
editors and other logged in users - not on this site	na	na	na

We can see from this table that there is going to be only one main person addng and editing content, the administrator. This is typical for a small one person site or an organization that has a webmaster to go between the staff and the site. If there was a group of staff or even members of the public who were going to be allowed to enter content, then the Plone workflow would be used to create reviewers who could approve the input from the general population of users, who would be editors.

Example Design Sketch

I recommend you do the following things before starting your design sketch:

Look at lots of other websites and make printouts of how they look, and take notes on what features, functions, and content they utilize. If you find similar sites to what you are creating, you may be able to find flaws and greatly improve your own site.

Look at other Plone websites, making notes of what they have implemented. If you like a particular site, email the webmaster and tell them you are doing a site and wanted to know what Plone Product was used to do a particular job on their site.

Take a printout of the default Plone site (click here for a screenshot of this pure site) installed on your PC or hosting service, and draw on top of this the things you wnat to change.

Keep in mind that while many sites keep the same basic design throughout, you can have page templates for special areas like the home page, that are different form the rest of the site. You will also be learning how to change things in this lesson that are actually very easy to change through the site, such as the number of columns, type and content of portlet boxes, etc.

Here a small version a design sketch for our example site (click here to see larger version):

To review the design sketch from the upper-left top lower-right, in this lesson's example we are going to do the following:

• Change the site logo image
• Mover the site action links to the bottom of the page, adding a link to a help page and changing "contact" to "Contact Us"
  
• Shift the search box upward
• Center the navigation tabs, and get rid of "members" and "events" and add an "about" and "reports"
• Get rid of the join link on the personal bar
• Breadcrumbs are ok as is, but change colors for them to match the selected tab, personal bar, and left column.
• In left column (left slots), Navigation is ok as is, add a news portlet, and add a static portlet with a description and link to the reports
• Stretch main center content area to extreme right, getting rid of the right column (right slots), including no calendar for the site at all
  
• Change the footer text and links to our own custom info.
• Colophon is ok as is, leaving Plone button and link to plone.org

Keep lots of notes

It is very confusing, creating a website. You will get halfway through and realize you don't really like the purple color scheme or that you really did want three columns. It is important that you keep careful notes as you work, so that you can learn from the experience and/or make changes later (sometimes much later) in the life of the site.

I have found it useful to keep a document open (like Word, or even a special Plone site just for my documentation) that I can use to cut and paste from. You can keep a sort of running log or diary of what you tried, and you can even add screenshots or text output to record the results of tests.

Record things like the colors (the hex codes we will learn about soon) you are using on a site, names of image files, or anything else you might need to remember later.

Now that we have a basic design in mind, let's begin the process of creating it... in small steps...