Creating a Basic Website Structure with Mini Pages

April 6th 2010 | Designing with Wix

Structure

One of the most critical yet overlooked steps in web design is structure. Structure is the way in which a website’s different parts are arranged or put together to form a whole. It’s the foundation that supports your website, keeps it together and guarantees that all sections and subsections work in rhythm and in harmony. You can think of it as your website’s central nervous system: a command center that coordinates and regulates all your website’s movements, transitions and actions.

Having a solid structure gives you full control of your website. You won’t have to worry about visitors being lost in a loop of clicks, of navigation not being intuitive enough or page transitions being too backward or too crude. And there’s another big bonus in having a well structured website – the freedom it gives you to update, change or modify it regularly without undermining its functionality or usability.

Creating a basic web structure is easy. Following these simple guidelines, you could set up a website which is user friendly, has excellent navigation, good speed – and yes, even style.

So Why Use Mini Pages?

Mini pages are characterized by swift and smooth transitions thus offering an enjoyable and aesthetic surfing experience. What more, Mini pages lend you the option to play music uninterruptedly on different pages, create a drop down menu, and add animations or page turning transitions.

If you’re still undecided about using Mini pages, here’s a little nugget that might rock the vote in their favor. In order to have good ranking, you need Google and other search engines to crawl your flash website. In order for your website to be crawled and indexed you need to throw bait that the spiders are likely to swallow: an adequate and relevant amount of text. As our SEO expert Moran Matyash explains, “a website with no text will simply look empty to search engines. Make sure you have content in your website and that this content is informative in the sense that it will tell the search engine who you are and what your website is about. To be more specific for Wix, I recommend at least 400 words in the homepage. Don’t sweat it though, if you’re using Mini pages, you can spread your content throughout them, as Google sees them as a single page”.

Before Getting Started

Make a blueprint of your website. Let your vision grow out of a piece of paper and gradually evolve into a well structured website. You might have great ideas but do not be tempted to rush your stream of consciousness into the editor. Here’s a nice illustration of a site map growing into a website:

Sketch of website structure

Choosing a Background

Wix’ default background is light blue. It consists of your workspace (inner) background and of your browser’s (external) background.

To change inner and outer background:

  1. Go to ‘Settings’ on the top menu bar
  2. Click ‘Background Color’
  3. Choose color
  4. Click ‘Apply’

How to create a website structure

Please note that your workspace color will always look lighter on editing mode. This is because we made the workspace transparent so its borders could be seen clearly. To see your website’s true colors click ‘preview’.

To change inner background :

  1. Go to ‘Page Parts’
  2. Click ‘Background’
  3. Choose desired background from the list or from the color palette on the bottom menu bar

How to create a website structure

*Tip: If you like to use one of your own photos as background, upload the photo to the editor > right click > ‘Set Item as Background’.

Setting Up Mini Pages

1. Go to ‘Page Parts’, click ‘Mini pages’ and choose skin. The first skin, ‘Mini Page’ is a great choice for a clean, professional look.

How to create a website structure

*Tip: Mini pages are 100% transparent. That means they automatically assume the color of your workstation background.

2. Go to ‘Manage’. Name your Mini pages, e.g., ‘Home’, ‘About’, ‘Portfolio’, ‘Contact’.

3. Click ‘Add Menu’ and choose a menu from the list.

4. IMPORTANT: Mini pages cannot and will not work unless you connect them to a menu!

5. IMPORTANT: Place the menu outside the Mini page. The menu is your external control center and needs to be placed outside the bounds of your Mini Page.

How to create a website structure

6. Choose transitions for your Mini pages. Click on your Mini Page > ‘Transitions’ and choose the desired effect or alternatively choose ‘None’.

Adding Title and Logo

Add your company’s name and logo to your homepage.

IMPORTANT: Make sure you position both logo and company’s name outside your mini page so that they’re visible from every page.

Setting Up Your Portfolio

Your portfolio is where you feature your work.

  1. Go to ‘Galleries’ and choose a photo gallery. If you’re new to web design, it’s best to experiment with the ‘Slide Show’ gallery first. ‘Slide Show’ is the most common and widespread gallery, and – the easiest one to use.
  2. Choosing skin: Once again, start with a basic skin before experimenting with the more unusual ones. First-timers will be more comfortable choosing the ‘blank’ slide show. However, even professional designers will normally choose the blank slide show to present their work. This comes from a design philosophy that maintains that ‘the photo is the art’ and that adding shapes to it is at best superfluous, and at worst plain vulgar.

How to create a website structure

3. Adding Navigation Controls: Just like a Mini page needs to be connected to a menu in order to work, so does a gallery. Connecting a menu to a gallery is what enables browsing and navigation.

4. IMPORTANT: Once choosing a menu, make sure you place it in close proximity to the gallery – on top/ below/ near and on the same Mini page!

How to create a website structure

*Tip: If you’d like navigation to be controlled by the user, go to ‘Settings’ and cancel ‘auto play’ by unchecking the box. Make sure you cancel ‘auto-play’ before adding a menu to your gallery.

5. Choosing Transitions: Transitions are the way slide shows move from one photo to another. Always consider the viewer’s comfort. Most people prefer subtle movement and glare-free animations.

Adding a Contact Form

Congratulations. You’re nearly done. All you have to do is add a contact form so clients get in touch with you.

  1. Go to ‘Widgets’ and click ‘Contact Form’.
  2. Choose a contact form.
  3. Drag and drop the contact form to your Mini page.
  4. Set contact forms’ background to 0 so it assumes your workstation background.
  5. Click ‘Edit Email’ on the bottom toolbar and add the email address you want to retrieve information sent via the form.

How to create a website structure*Tip: please be sure to check your Spam / Junk Mail in case messages sent via your contact form.

This is it. We created a fully functional website in 5 easy steps.

Here is the final outcome:

For additional information or if you run into trouble during any of these pages, feel free to consult any of these great resources:

http://support.wix.com/index.php/Wixpedia

http://www.youtube.com/user/wixmypage

http://www.wix.com/flash/web-design/templates.html


Tagged with:


1 comment

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>