The four preliminary steps to creating a website involve creating a sitemap, schematic, wireframe and style tiles. Not everybody takes these steps before building a website, but if the process is important to you, so too will be these steps. Starting the process in something can be a daunting task, which is why, when broken down into simple steps, building a website can be easy. Even when working on a team, the first four steps can help create an idea in the heads of all of the developers before any serious work needs to get done.
A sitemap will be used to talk about the various pages that will be accessible on the future website. Arranging the pages visually to see how the navigation works will begin the process of arranging a functioning site, just without any bells or whistles. After this step, the site will be a navigable prototype, which helps developers see what works and what doesn’t in the process.
A schematic is the beginning of working on filling in content. It is the next step after working on the sitemap; it will contain details for each page that will be on the final website. In the beginning sites can be filled in with “dolor ipsum” text, but the process of laying out the schematic before working on the website creates a more streamlined process. It is better to worry about content before going on to the wireframe.
The wireframe is the preliminary step that lays out the boxes and places for content. This requires carefully deciding on pixel width and height of various div boxes so that when building out the site in HTML, the pixel dimensions are already known. The wireframe is like the foundation that everything gets built on top of, and will remain for the entire life of the website.
The style tiles are the last aesthetic vision that comes in the process before beginning to build the website in something like Dreamweaver or Muse. The style tiles are the art directors job, mainly. Choosing textures, colors, and images that represent the product or idea of the website. It is the style tile that experiments with possibilities that the website has to mimic properties or emotions of the source material. Inspiration for the style tile can come from many different places: the world-wide web, reality (skeuomorphism), people, places, objects, or even from your own process. Look to your schematic for possible links between visual imagery and the idea.
Once these steps are completed, you have a huge advantage over anyone picking up dreamweaver or muse with a blank slate. The only work left to do will be coding, and some copy and pasting, and your website should be a fully functioning and beautiful one.