You may wonder, how does a website get built? Over the next 4 weeks, we’ll look into the four main stages of building a website: design, development, testing, and finalisation/completion.
In Part 1, we will delve into the first step, the design.
What is web design and why is it important?
Think of web design like constructing a house. You will need to first draft the architecture, style, and dimensions in order to begin building. Similarly, web design is the blueprint for your website. It presents the layout, colours and styling, fonts, and structure of your website before it is developed into a working website.
What’s involved in web design?
There is no set structure for how one would go about designing a website, but there are common steps that most designers will follow.
Research and information gathering
The first step in web design is to understand your clients needs. This includes gathering enough information about your client and their required site to focus your idea on an appropriate design. It is important to understand what your client needs and wants, what sites they like, how they want to present information on the site, and what special features or perks the site will contain. Once you have gathered enough information to get a few general ideas, it’s time to put those ideas onto ‘paper’!
Wireframe and design elements planning
This is where the visual shape and layout of the website starts to take place. From the information you gathered about the client, you can begin designing a layout of the wireframe that the end product is going to look like. There are plenty of online tools available to help with wireframing but traditional pencil and paper is surprisingly helpful as well.
At this point in the design process, forget colours, logos, content, fonts, or what the images are going to look like. The point of a wireframe is to get the layout completed. Breaking items down into their basic shapes is a great way to see what takes up too much space, or hasn’t got enough focus, without the distraction of colours, images or other effects.
Mock-ups and visual aesthetics
After a wireframe has been established it’s time to fill in the elements. The mock-up should be very similar to what the end website will look like. Through the use of illustrative tools such as Photoshop or Illustrator, the end product of a mock-up consists of (usually multiple) exported images (JPEGs or PNGs) which are sent to the client for review and/or approval. Also, keeping the design in native Photoshop or Illustrator formats will definitely make it easy for a developer to bring to life later on during the development phase.
This is the stage of design where colours, imagery, logos and font become very important. The end result should almost be an exact copy of what your finished website will be, except that it doesn’t do anything.
Review and approval of designs
Usually a design will require a few rounds of changes before being approved for development. This cycle of reviewing, tweaking and approving mock-up designs often takes place until both the client and designer are happy with the design. This is the easiest time to make changes to the design before development has started.
Slicing and coding of the design
Once the final design has been approved, it’s coding time! Elements from the design can be sliced up using an image editor or can be replicated programmatically with CSS elements by the developer. Usually, this process is done by the web developer, who may not be the original designer. This isn’t always the case. Web designers usually have some basic knowledge of HTML and CSS coding to get the website visuals together on screen but ultimately it is up to the web developer to make the interactive “behind-the-scenes” elements work.
So, whats next?
After the layout has been transposed from the design to a basic template, it is now time for development to take place. Usually this is handled by a web developer or third-party company, however some designers have extensive development experience and vice versa. In such cases, the development stage is handled by the same person. In Part 2 of this series, we will look at what goes on in the development stage.
At Fireworks, we take pride in our web design work. We make sure your site looks amazing and just how you envisioned it to be! To get a quote or to talk to someone about setting up a new website or upgrading your current website, give Fireworks a call today on 1300 660 160.