Before starting work on the eZ Webin template code, we need to create a wireframe in order to decide on the layout structure. We will use this structure to override the standard layout files.
A wireframe is a basic visual guide that is used in web design to suggest the structure of a website and the relationships between its pages.
Note
Wireframe editors
There are a lot of commercial and free wireframe editors. To create our site's wireframes, we will use the Firefox plugin called Pencil (http://www.evolus.vn/Pencil/).
We have chosen Pencil because it is open source and works on every platform that runs the Firefox browser.
If you need something more complete, you should take a look at Balsamiq (http://www.evolus.vn/Pencil/) or at OmniGraffle (http://www.omnigroup.com/applications/OmniGraffle/) if you have an Apple computer.
Our site will have at least six different page layouts:
- The homepage
- The issue page, where we will display the cover and the articles list
- The issue archive page, by month and by years
- The staff profile page, where we will display the latest articles that the editor has written, along with his profile
- The article and the forum pages, with the default layout based on the eZ Webin design
Now we will illustrate the first four layouts because we will work on them, overriding their standard eZ Webin layout. In Chapter 8, we will work on the forum and customize it to fulfill our future needs.
Starting from the homepage, we can see that the site will have, in the top-left corner, a logo for the magazine and a place-holder for a banner. Under these, we will have the main navigation menu and the main content area.
We have chosen a three-column layout in order to easily manage the content that we want to show.
In the homepage, the first column will show the latest news and the middle column will show the information and cover of the latest issue.
The last column will have two boxes—one with the most important article from the latest issue and the other with the forum thread.
The issue page will show some information of a specific magazine issue.
In this page, the middle box of the homepage will shift towards the left, and in the right column there will be the highlighted article for the issue. At the bottom of the page, we will find all of the other articles.
We have to remember that our magazine is released monthly, so we need an archive page where we can collect all of the past issues.
The issue archive page, which can be reached by clicking on the main navigation menu, will again show some information from the latest issue. (We need to sell our articles!)
The rightmost column of the template will show all of the covers for the current or selected year.
At the bottom of the page, we will create a box with links to the past issues grouped by years and months.
The staff profile page will display information from a staff profile, such as his avatar, biography, and the latest articles that he has written.
The staff profile page will have three columns. The first column will show information regarding the editor's profile, the middle column will show all of the articles the editor has written (paged five by five) and the third will be used for banners or other images.