Prev :: Content :: Next

The distinctive feature of ConceptDraw WebWave is a set of remarkable wizards that will prompt us the proper sequence of actions and help us cope with the most complex tasks. In the manual there is description of wizards, where you can learn in detail which wizard is what and what tasks it is intended to solve. Normally, each wizard helps to solve one specific task: analyse a structure of the existing site and present it as a hyperlink map or as a file digram; build a prototype of a new web site on the basis of the old one or from scratch; use Color Generator for the color scheme of the site. But usually tasks before us are quite complex. They require solving many other tasks and using various means. In this series of Lessons we will consider solving some of such complex tasks by means of the only program.

Lesson 2. Projecting a new web site.

How to create a web site? How to analyze, develop and apply in practice some of your ideas? How can all the information that we want to deliver to our users be presented in such a clear and simple way that it could easily be found ? How to allocate work between resources that will be involved in work on the site, and make up a common work plan? How to test the already developed site? All these tasks can be solved with ConceptDraw WebWave.

Common task : develop a web site, find a color solution and assign responsibles.

1. Develop the site idea using the template Conceptual Web Site.
2. Build up the site frame with the help of the wizard Web Site Prototype Builder.
3. Develop the design for the site pages.
3.1. Make design sketches for separate pages by using the template Make Up.
3.2. Find a color solution for the site.
3.3. Generate a CSS file.
4. Create a task list and assign responsibles. Generate To Do List.
5. Do making-up of the site.
6. Test the ready site.
6.1. To check site order and correctness of hyperlinks, generate a user's site map, by using the wizard Web Site Mapper.
6.2. To check whether files and folders have been arranged properly, generate the diagram of the site file structure with the help of the wizard Web Site Structure Scanner.

1. Developing the site idea with the help of the template Conceptual Web Site.

So, we only have some idea of a site that is not quite clear yet, and we also have a new ConceptDraw WebWave. What should we start with? First, let us display our ideas on this "blank sheet". Not to waste time on drawing elements for the future web site, use the template Conceptual Web Site from the section Site Structure of the gallery.

Conceptual Web Site offers a wide range of templates, with the help of which you can choose a conception for the site: the basic set of pages and their location. The templates can be switched through with the help of the buttons on the document:

To switch among buttons, just double-click. If some template meets your requirements as to expression of your idea, it can be taken as the basis to complete the site idea by moving, copying and deleting shapes.

But the site concept can be completed by one's own by taking and joining objects from the library Conceptual Web Site Shapes.

Task: Make a sketch of the site concept as shown on the picture:

2. Building up a site frame with the help of the wizard Web Site Prototype Builder.

Now that the site sketch is ready, we can get down to developing. You can start building the scheme either from scratch or on the basis of the ready example. In any case, the example will guide us on the scheme structure, which is very important, because for the prototype to be built properly, the scheme should be of a fixed structure.

Open the example with the help of the wizard Web Site Prototype Builder Example from the section Site Structure of the gallery.

The scheme should start with the folder root, which is normally followed by pages and other folders with various files. All the elements are joined with the library connector. Now we can remove all unnecessary files from the scheme and add the lacking ones. The scheme of our site is ready.

You can also built the scheme on a blank sheet. The wizard Web Site Prototype Builder will assist us in this, the wizard is located in the section Site Structure of the gallery. The wizard will offer us a set of libraries, with the help of which our scheme will be created.

Task: Build a scheme similar to the one shown on the picture:

Note 1: the folder img contains 26 pictures, the folder imgmenu - 22.

Note 2: connectors, in order not to cross pictures, can be sent to the background with the help of command Display Order / Send to Back in the menu Shape.

When the scheme is entirely ready, we should build a real prototype with the help of the wizard Build Web Site Template. The wizard can be started from the menu Tools / Wizards. A dialog will open to offer you to choose a space on the hard drive for storing your prototype. All the folders on the scheme will turn real catalogs.

Task: Build up a site prototype.

3. Developing design of the site pages.

Now that the structure of our site has been completed, it is time to develop design of the pages. Both page composition and its color solution are crucial here. ConceptDraw WebWave offers a set of tools for solving such tasks. The set can be found in the section Design Mock Up of the gallery. So, to find all templates and wizards, see this very section.

3.1. Making design sketches of separate pages.

First, open the offered template Design Mock Up and see whether it can be taken as the basis for the pages of our site. All the template elements can be modified: copy/paste, delete, move, change size, color, filling, text, and add library shapes.

You can start developing page design from scratch. Open a new document and make a sketch of a page with the help of the library templates. The template Design Mock Up will open several basic libraries that contain various shapes, check-boxes, buttons etc. However, you can also use some additional libraries from the sections Cliparts, Design Mock Up, Geo-Maps, Maps, Miscellaneous. The libraries can be started with the help of on the toolbar Main or with the help of Library / Open in the menu File.

Let us see an example of how to design a page. For our examples we will use only the libraries from the sections Designing Mock-up and Site Structure.

For the start let's use simple drawing instruments - rectangle and the line from the toolbar Drawing Tools, and a shape from the library Web Site Map Shapes to indicate a picture.

Task 1: develop the design of the home-page:

Now let's use the buttons from the library Buttons. To change a button caption apply Custom Properties from the shape's context menu. In the opened dialog, field Button text, the caption is specified. In the same field, from the pop-up list, you can choose another caption.

If there is no required caption in the pop-up list, it can be added with the help of the button Define. In the opened dialog, field Value, enter the required caption.

To apply and save changes, press OK.

Task 2: develop the design of the page Products:

Let's try to make page three less relative and more realistic. For this, fill in the text blocks with text and make the background transparent. To switch to the edit text mode double click on the shape. To make the shape transparent select it and call the color select dialog, and select None.

Task 3: develop the design for the page ConceptDraw:

3.2. Finding a color solution for the site.

Besides the compositional arrangement of the site elements, the color gamma is also very crucial. How to find colors that would perfectly match up, be non-irritating, and, what is most important, correspond the site content?

Depending on the purpose of the site, its color solution can be developed in one of the three color palettes: default, pastel and contrast. But how to pick the colors properly? In ConceptDraw WebWave, setting the basic color and the type of color combination will be just enough, and the program will further pick the colors automatically. Moreover, the program will offer to choose from one of the possible variants.

For solving such tasks, ConceptDraw WebWave offers the whole set of various means - templates and the wizard. We need to learn how to use these useful assistants. First, open the template Web Page Color Gamut Selection. On the right are templates of various pages that can be scrolled through by switching the buttons at the top with a double-click. On the left is the color circle on which the basic color can be assigned. For this, select the circle, take it by the control point and drag it on to the color to be taken for the basis. Now, start the context menu and choose the type of a color combination: Default Palette or Pastel Palette. To both palettes contrast colors can be added. For this, also enable the option Contrast Palette. The name of the color scheme type is displayed under the color circle, and if the type is changed this information is changed as well. Changes are also displayed on the template - its elements take the colors defined by the selected color and are displayed to the right of the color circle. This template helps us define the color solution in general, viewing the result on the offered examples closest to our pages.

Task: Select a color gamma for the entire site - similar to the given example or your own.

3.3. Generating a CSS file.

If you wish to save color settings to a separate file generate a CSS file by pressing Generate CSS-file or applying Wizards / Generate CSS-file in the menu Tools. In the opened dialog, specify the hard-drive space for the file to be saved to. Now, creating web pages you can use the specified information in html code.

We should specifically mark such a useful template as Color Guide. It represents a table of colors with the specification of the color code. From here, you can copy the required color and paste it to the html code of a web page.

Task: select a color combination for our site.

4.Generating To Do List and assigning responsibles.

Now we can generate the To Do List for filling up the site and present it to the responsibles. Let's open the map of our site. Each object can be assigned individual properties by specifying executives, deadlines and other information. This can be done in the dialog Custom Properties, which can be started from the shape's context menu with the help of Custom Properties.

A shape can be assigned such properties as the responsible's name, his e-mail address, task start/end dates, comment and Template. Let's consider the last item in more detail. It can be conveniently used for the site filling elements of the same type - this will greatly simplify our work on making-up. In this field, the absolute path to the template on the hard-drive can be specified.

Now let's generate To Do List with the help of Wizards / Genetate ToDo List.

Task: Plan the development of the web site and generate ToDo List.

5. Making-up the site.

Now it's high time for making-up the site. This process takes place in specialized programs such as, for instance, Macromedia Dreamweaver. We will not be describing it here and will get down straight to the final work phase, which is also performed in ConceptDraw WebWave.

6. Testing the ready site.

Now that our site is ready, we need to make sure it has been realized technically correctly. Here two wizards will help us - one is to test the functionality of links, the other is to test the correctness of the file structure.

6.1. To test the order and correctness of the links, generate the user's site map using the wizard Web Site Map Generator.

Let ys make sure we have correctly assigned the links to switch along pages. For this, generate the map for our site by using the wizard Web Site Map Generator. Start the wizard from the section of the gallery Site Structure. In the opened dialog specify the Internet-link to ur site.

Additional settings can be done by using the button Settings. On the tab Scan you can specify the nesting-level for the elements and also restrict access to the site by a password. The tab Layout offers the possibility of choosing a text type to be contained in the shape. You can also choose a scale for each level and a variant of building a scheme.

On the other three tabs types of files, protocols and attributes are specified to be displayed in our scheme. If you wish any of the types not to be displayed, disable the options on the tab.

Task: Scan the given site and build a hyperlink map. Set the nesting level - 3, caption on the shapes - text only, scale - 100%, 75% and 25%, the scheme type - 3.

6.2. To test the correctness of location of the site files and folders, generate the diagram of the site file structure with the help of the wizard Web Site Structure Scanner.

Let us now make sure that nothing has been confused at locating files in catalogs. The wizard Web Site Structure Scanner will help us in this. We learned how to work with it in the previous lesson, let us now revise it. Moreover, revising will be a lot easier as the wizard is almost similar to the one described above (Web Site Map Generator), except the last two tabs missing in its settings. So, to build the diagram of the site file structure let us call the wizard Web Site Structure Scanner from the section of the gallery Site Structure, and move on by the known method. We should get the diagram similar to the site scheme. The diagram has been described in the item 2 of the lesson.

Task: Scan the created site and build the diagram of its file structure. Set the nesting level - 4, caption on the shapes - text only, scale - 75%, 50%, 25 and 25%, the scheme type - 2.

Summary: In this lesson we have learned how to make sketches of a site structure, develop page design, select the color gamma, plan work on realization of the site, and check whether the created site is technically correct.

Prev :: Content :: Next