Breaking out of the box(es) - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

While you can achieve a neat, professional looking page layout using XSitePro’s Page Layout settings, one of the mistakes often made by people designing their sites is thinking that the page design is in some way constrained to the tightly defined, rectangular spaces on the page.

 

In reality, while the different panels can usefully serve distinctly different purposes (navigation, testimonials or sales copy, for example) there is no reason why you can’t blend the different panels together within your page design.

 

There is a simple way of achieving a great looking, fluid design for your site that will make your site layout look far less ‘regimented’. We’ll be examining this technique below.

 

The basic premise comprises five steps:

 

Step 1: Decide what panel components you wish to include in your Page Layout

Step 2: Design your Web site layout as a graphic file – outside XSitePro.

Step 3: Overlay a page layout template, onto your design.

Step 4: Splice your design into panel-sized pieces.

Step 5: Import these pieces into your Page Layout design.

 

 

Note: The guidelines that follow assume that you have access to (and some understanding of) a basic graphics design package. If you are not comfortable with this type of design work, or you don’t have access to a design package, you can always stick to a simpler Page Layout, outsource your design work, or even buy a ready-made template.

 

 

Step 1 – First of all you need to sketch out, in your mind’s eye, a line template based on the page layout elements you have decided to feature in your layout. Use the Pop-up ‘Panels Illustration’ in the Page Layout tab as a guide, shown below:

 

sample_layout4

 

 

Step 2: With a basic idea in your head of the rough ‘proportions’ for your layout, you next need to design your mock-up Web page, in your third-party design package. You may use any package you might own for this task, for example: PhotoImpact, Photoshop, CorelDraw or another suitable program.

 

 

For the purposes of illustration, consider the following design.

 

sample_layout_2

 

 

Although fairly simplistic, you will see that this design is not constrained by any ‘panels’ or ‘sections’ at this time. The design flows across the layout design.

 

Note: It really is worth spending some time creating a great-looking design for your site since this is going to be the underpinnings of pretty-much every page on your site. This time-investment will pay itself back many times over, since if your overall page layout design is fantastic, you won’t have to do quite so much at a page level to make your pages

 

 

Step 3 – With your design created, the next thing to do is overlay (ideally in your design application) the page layout you came up with in Step 1, above, onto your design.

 

You can paste panel-sized rectangles onto your design as ‘layers’ or drag rulers/guides onto your design as preferred. In the example below, a line-drawing of the template proportions we are going to use in XSitePro (for this example) has been overlaid on top of the design.

 

sample_layout3

 

 

Step 4 – This next step is the easy part! Effectively we’re going to splice, or chop-up our page layout into the component pieces as shown above.

 

To do this, flatten your image and simply copy and paste the different pieces of the layout to different files, and save them with appropriate names – the image above is labeled to give you an idea for suitable filenames.

 

 

Step 5 – Now we need to switch back to XSitePro and select our new graphic files as backgrounds to the respective panels. This takes only a couple of minutes, and as you do this you’ll get a sense of just how easy this process really is. It’s like piecing back together a six-or-seven piece jigsaw - Not overly challenging!

 

With the pieces now together in the page layout, you now need to adjust your panel padding settings so that the text, images and other elements within the respective panels site well in the design. On completing this adjustment you’re now ready to begin adding Web pages.

 

piece_site_mockup

 

 

Note: This is only one of the many ways you can enhance your Web site design using the page layout feature. There are countless other tips and tricks for enhancing your page layout design, many of which can be found at the XSitePro user forum at the XSitePro Web site: www.xsitepro.com.

Home  Previous  Next