It might seem overwhelming when you don’t know how to start on your site, however, there are multiple steps that help make the process simpler and faster. In order to make a site one has to create an organizational process to get to the final product. In this process, each step works as a puzzle piece that ties to another and as continue developing the steps you get closer to getting the final piece together. It is true that each site is different in purpose and performance, but to get to a final design for both imagery, and content a set of steps need to take place. The first step on the system is called a sitemap, followed by schematic, wireframes and style tiles. Once you start and continue with this process, you will be able to see how much simpler and faster one is able not only to make the site, but also communicate your vision to others.
The first step of the process of making a site is the sitemap. One can describe it as the map of navigation. The sitemap allows you to show how a person would navigate through the site. It gives a clear sense of how to get from page to page and it does this through hierarchy. It could be described as a summary of the site or a table of content. A sitemap is the first step that happens when creating a site because it allows you to look at how you are going to organize and divide your site. It helps you create the different sections and categories of how later content would be added.
Once you have your sitemap figured out, it is time to step into making a schematic and wireframes. It is a little hard to distinguish between a wireframe and a schematic since like smallbusiness.chron.com states they both “present the nuts and bolts of page functionality without incorporating the design elements, color schemes, type styles or interactive elements themselves.” These two things according to the website are like the floor plan and the finished page is the furnished room. “Rather than repaint walls and rearrange or replace furniture to change how your pages come together, you can plan your online space using boxes and placeholders that establish how your site pages function.” So when looking at schematics and wireframes, one is basically looking at how each web page is going to be structure as well as where text and images are going to be placed. Wireframes and schematics give you a visual sense of your page without getting into too much detail. In this part of the process, if two or more of your pages are going to have the same structure, there is no need to create multiple wireframes, but just one. Even though you don’t need to specify which images you will be using or what you will be writing in each section, there are general things that should be stated or put down on the wireframes so it is more clear. These things include: the logo section, site navigation, maybe even the sitebar areas and footers. This would make it even easier to understand when looking at the wireframes.
Now that the sitemap, the schematics, and the wireframes are done, the last step is to work on the style tiles. Style tiles are essentially like mood boards or style boards. They allow the person to get a sense of the website as far as color palettes, typefaces, and the style in general. They can be seen as a substitute for designing full compositions. Style tiles also bring a sense of cohesiveness to the page as it lays down the design elements and choices that will be consistent through the entire site. Style tiles give the site its personality.
It can be said that the process of making a site starts from a type of brainstorming and figuring out how the website is going to function, followed by creating a more detailed structure of each page on the site, which allows the person to get a sense of the functionality as well as composition of each of the pages. Finally once the structure is created is when the last step comes in, bringing the design and harmony to the entire page. However, even though the last step seems to bring the cohesiveness to the site, it is important to know that there most be some cohesiveness on the structure of the site as well so that the structure along with the style allows the user to know where they are on the site.