I frequently get asked by people and respond to various questions on forums on where and how to start learning web design and coding for the web. I remember buying my first book on learning PHP, it was about two inches thick and with my initial scan through the pages it seemed an impossible mission and left me feeling quite deflated. I persevered for a while going through the ever more complex series of tutorials verbatim with very little of the lesson seeming to stick in my mind. It didn’t take long before the book became more than just an expensive paperweight. I am sure if you ask around this is more common than not and it would have been all to easy to just give up there.
I started my career as a graphic designer. During my college years all of the designs we produced were painstakingly rendered by hand. My tutor of typography and calligraphy was a man called George Evans whom was a published author on the subject and was passionately against the use of computers as he believed it would be the downfall of the true art in typography. Looking back and around at the typography now, I have to say that George was pretty much right on that point. However as I soon discovered times move on and the print industry in which I began my career was starting its decline, I unlike George always loved computers and could clearly see the direction things were going and knew that one way or another I needed to learn web technologies or be left behind.
So after that little meander down memory lane this is how I began to learn web design and coding for the web and how I suggest that those just getting started should proceed. Web design like most design goes through trends and it doesn’t take long to spot the similarities in design from site to site. This however is not always just a case of emulating what someone else has done and can be quite often driven by the request from your clients. Design trends also have a tremendous impact on the ‘User Experience’ (UX) and as a designer you are tasked with the job of making the ‘User Interface’ (UI) as simple as possible for your visitors to navigate. If the visitor to your site is confused as to how to navigate around the various pages of your site it will not be long before they leave in search of an alternative source of information or product. We as designers therefore tend to place navigational elements in common places and with frequently used and easily recognisable icons. The best way to learn this is to simply use the web. Look around at the myriad of sites you visit and look for these common elements but more than that take note of the sites that just seem to work and those that don’t, analyse them, dissect them and learn from them.
When you are ready, pick a project. A friend’s or family member’s business is always a good place to start or simply make one up. Look at what the business is and what you are trying to achieve. What is the purpose of the site? What is the target audience? Does the company have an existing corporate image ie; does it have an existing logo, colour scheme or font? Does this corporate image need to be updated? A corporate image should not be set in stone but evolve with the times and with how the company wishes to be portrayed. Examples of this can be seen companies such as Apple, Shell Oil, Audi and Pepsi Cola just to name a few. Look at the evolution of DC Comics most distinguishable logo the Batman symbol over the last 75 years and how it has changed for a perfect example. Once you have answered these questions and created a project outline then begin to rough sketch out ideas. These do not have to be works of art, they are what I refer to as thinking out loud. It is at this point you can begin to learn the skills you need for creating website design in software such Adobe Photoshop. The web is a tremendous source of information and I guarantee there will be a tutorial out there to help you through each element of the design you are trying to create. Unlike following a tutorial that has little obvious application to you, you will be learning to how to solve a specific part of your design, adapting the tutorial to suit your needs. This is the single best way I have discovered to learn new skills, by practical application and problem solving. Now this may seem like a long and convoluted way to get to this simple method but the most important part is the problem solving. Learning how to solve problems in a practical application will help you retain the lessons learnt within the tutorial and will more than likely become a common tool to add to your skillset.
We have spent years trawling the web ourselves looking for tutorials and code snippets to solve a given problem and believe it is time to give something back. So we will be adding a tutorial section to this site soon and will be creating a series tutorials for various user levels. We will be doing a complete beginner’s guide which will guide you through from concept to final code in easy to follow steps with supporting files for examples. Web design and development is about problem solving. It is a constantly evolving medium and there is always something new to learn. This for me is the greatest appeal to this profession and the true reason that I love what I do.