As you may or may not be aware, there’s actually quite a lot of work that goes into the creation of a website. There are many people working hard behind the scenes to help make your ideas a reality. There are people that you may never come in contact with, programmes used that you may have never heard of and skills required that you could only dream of.
The interweaved world of web design!
Every digital agency has their own way of working around things. From preparation to lift off! Reactive Graphics are no different.
Before we even get started
Before we can even start putting pen to paper, there are a series of questions you need to address:
- What kind of website are you making?
- What kind of company are you?
- Do you need a CMS/Hosting/Domain?
- Why do you want to use the web to promote your business?
- Who’s your audience?
- What do you want to achieve from your website?
- Do you have content for your website?
- What is your budget/timeframe for the work?
In answering these questions, more queries are likely to arise, so it is important that you make time with your web design agency to fully investigate these points.
Strategy – Beginning the prep
Strategy is pretty much the key term here. How do you propose to approach this project and how do you hope it will be delivered? This can often be a really tricky one to answer, especially if you have no idea about the digital world.
One thing to be aware of though, is that the ‘space’ that you are aiming to carve will give access to approximately 3,424,971,237 Internet users. Therefore it is important that you approach the work with thought and attention to detail.
Amongst the preparatory stuff, it is important to consider the following points:
Usability leads to sustainability
Usability is something that we always bang on about here at Reactive Graphics, as it is a very important component to firstly engaging clients with your site, keeping them on your site and getting them to revisit your site again and again.
Usability is about making things as easy as possible to find, see and navigate for every kind of person. Whether that be someone who is sight impaired, someone with low attention span or someone who is deaf. The site needs to be as accessible as possible in order to address the broadest scope.
Usability includes responsiveness – so its not just making your website work for those browsing on a desktop. Your site needs to be flexible and adaptable to various screen widths and browsers as for forth coming technological developments.
What is your business?
If you do not know the answer to this then it will be impossible for your web designer or developer to work this out for you.
Understanding your business is a key component to preparing the look, feel and overall delivery of the website and needs to be defined concisely and clearly.
What content will you include?
Content is a key player in making sure your website is understood by your audience. A few key parts of content that you should work on are:
- Tone of Voice – be true to yourself, your company and your audience
- Approach – make your intentions clear!
- Call to action – make it clear!
- Word count – not too much waffle!
Putting pen to paper…
Sketch it out
So many people of this world are visual thinkers and more often that not the talking time can be drastically decreased if you just get the ideas down on paper. Whether that be rough sketches of a logo or web page layout, seeing it visually definitely helps the client and the designer get on to the same page.
Wireframes
Wireframes are essentially the bare bones of a website structure and that skeleton needs to be strong enough to hold all that flesh (the content.)
A good wireframe should contain:
- Details of how the website functions
- A list of possible navigation
- A hierarchy of information
- Call to action
- The varying click states – e.g hover, expand… etc
HTML & CSS
HTML
Every single website out there is formulated from a language called HTML (Hyper Text Markup Language.) This language gives all the components of a webpage structure and needs to be carefully written to not only display your content correctly but to also keep your website and all the data inside safe and secure. HTML is the building blocks and the holder of all the CSS ‘exciting’ bits.
CSS
CSS or (cascading style sheet) is essentially all of the choices you make to create a desired look or feel to the website. CSS designates font, font size, font colour, page layouts and hover states whilst working inside the framework or layout of the HTML.
Site-map
Once the wireframes have been completed and agreed, your developer can begin putting together the site maps. Site maps are a website specific version of the maps we use to get around physical space.
A site map is an order list of all of the pages that exist on your website. This includes unlinked pages and blogs items. Site maps can exist in multiple formats but always display information in a hierarchy, including all click links and potential paths that a user may come across.
The development of a site map can take a lot of time, however it is intrinsic to ensuring the website is correctly structured.
Layouts
The World Wide Web consists of multiple website layouts and styles. Different layouts have different functions. In previous years there has been such thing’s as fluid layouts, static layouts, responsive layouts and more.
Nowadays – as we always point out – responsive is the only way. This means that your website in all its finery can be viewed correctly across browsers and devices without glitches. This doesn’t just mean that the content stacks according to whatever screen size you are viewing on, it also means that the functionality is adaptable and presented at maximum ease on all devices.
The great thing about platforms such as WordPress (which we really recommend) is that there is already a massive choice of layout templates to choose from – these also include demo’s which give you a bit of an idea of how the site will look from the word go!
Typography
Typography is an art form all of its own. It is the art of arranging typefaces and fonts to present text.
Three key terms you should be aware of are:
- Tracking: allows you to adjust the space between characters of an entire word.
- Kerning: allows you to adjust the space between two letters
- Leading: allows you to adjust the space between lines of text.
Choosing the right typography for your logo and website can be crucial in determining the right ‘feel.’ Do not just choose a type that you have seen on an existing logo because type logos are as recognisable now as image logos and your brand may be misconstrued if it has too much of a likeness to larger companies.
Type is so varied nowadays that you can really have fun with it. Choosing colour’s textures and complimentary fonts that somewhat challenge the general perception of text.
Claudio Guglieri, product designer & creative Director says:
Overall choose a font that is easy to read for long amount of text and be more playful with titles and call to actions. Don’t be afraid of using big fonts and overall be playful and consistent when using typography.
Specifications Document
Another key element to ensuring your web design idea gets a spot in cyberspace, is ensuring you have a good and clear agreement with your digital team. For example here at reactive graphics, we usually work with project managers to liaise all communication so you do not have to worry about chasing designers, developers, QA testers etc… We take care of the logistics by outlining our specifications in a tidy (and pretty thorough) specifications document.
These specifications might include comments regarding:
- Is the site responsive?
- Do you have button functions/touch icons that translate to devices
- Is the content readable/relevant?
- Can the site be used across old/new browsers
- Do you need a self managed Content Management System
- Do you have a Logo,Type,Favicon
- Does the site translate to print for visually impaired users?
- Are error messages correct?
- Will there be social media integration?
- Is there a sign up/ login area?
- Is there an email chain connected to the CMS?
- Can you do tagging and meta-tagging in house?
- Do you need guidance on SEO?
Not all of these specifications will apply to your project, but it is as important to note what can’t be achieved within your constraints as to what can, so a. avoid disappointment and b. achieve a realistic and manageable end result.
Conclusion
So there you have it, an insight into the behind the scenes world of digital design. There’s a lot of detail to web design work and it is also important to note that these details are constantly changing as the capabilities of the web advance further.
If you want any help getting your next web design project off the ground, then please give us a call.
