Website Design

Page Layout Structure

All of the websites we build use the Bootstrap grid system as this allows us to easily use columns to form the layout of the pages, as well as providing responsive options for modifying the column widths, etc. You can find out more about Bootstrap here: https://getbootstrap.com/.
When designing the layout of the site we recommend working to the 24 column Bootstrap grid system when positioning elements, as this is what we will be using to build the site.

Standard Website Structure

Below is a diagram of the standard website structure for Khaos Control Web sites. This is just to give an example of the possible page designs that would be required, as well as which pages lead on to which other pages.
This can be customised to fit your needs, so you do not have to follow this exactly. Below this is some alternative checkout layouts, as examples of the customisability. 

Alternative Checkout Structure Examples

The checkout within Khaos Control Web is customisable to fit with your requirements. Here are some alternative checkout structures: 

It is also possible to skip certain sections of the checkout by default for logged in customers, such as the address stages, and then give the customer the option to go back and change them if required. This provides a much more compact checkout experience for the customer, while still allowing all of the customisation of the order required. In this way it is possible to create a "single page" checkout, where the remaining elements such as delivery method and payment options are combined onto a single page.

Website Design Requirements

As part of a Khaos Control Web project you will need to provide us with the designs for the different areas of the website. We will then match these designs as closely as possible while building your website.
Here is a list of designs that are commonly required for a project:
  1. Header and Footer (these are normally integrated into the other designs, but can be separate)
  2. Home page
  3. Account login page
  4. Account registration page
  5. Forgotten password / Reset password pages
  6. Main account page
  7. Each account section page, for example:
    1. Address list page
    2. Add / edit address page
    3. Previous order list page
    4. Individual previous order page
    5. Account details / password page
  8. Category page
  9. Search page
  10. Product page
  11. SCS product page (if required)
  12. Basket page
  13. Checkout login page
  14. Checkout stages (see the section above for various options for this)
  15. Order confirmation page
  16. Order failed page (in case there is an error during confirmation)
  17. Content pages (contact us, etc)
  18. Main blog page
  19. Individual blog article page

If there are other pages that you want in your website, to accommodate custom functionality, etc, then please provide those as well. If there are designs that are required, such as if you are not having a blog on your site, then these can be ignored.
NOTE: It isn't a requirement to provide designs for content pages that are just text, or ones that you will be creating yourself, it is mostly required for content pages that would require specific styling or custom layouts.
As well as providing the designs for these different pages, it is also really helpful to have notes on specific functionality, whether a section of content should be hard coded or customisable in the CMS as static content, what happens when a button or link is hovered over, and any other aspect of the design that might not be clear from a static image.

Assets

Where possible you should also provide any assets such as background images, logo images, icons, etc. Background images and logos should be provided in JPG or PNG format, depending on any transparency requirements, and icons should be provided in SVG format if possible, or PNG format if not.

Did you find this article helpful?