How To Teach Yourself Web Design
Source: http://robcubbon.com/* this website really good to teach me to be a web designer! Thanks for the great, great info. And I like to share this great info with my love readers. And please visit this website for get free ebook.
Yes, it is perfectly possible to teach yourself web design. I asked around this week to see how people managed to acquire the skills and I tried to remember what worked for me.
There are three main ways you can teach yourself web design.
- By doing. People learn by actually creating websites.
- By using online resources. Everyone at some point finds answers online about how to design websites.
- By reading. This one surprised me. Most designers say they learn web design, in part, by reading books.
So, let’s go through each of these categories to find out how to teach yourself web design.
1. Learning web design by doing
The best way to start to understand web pages is to look how existing websites are put together and build them yourself.
Observe how other websites work
To start off, most web pages on the internet are written, at least in part, in HTML. In order to see the HTML that creates this page you need to “View Source” in the browser you are using. Try going Cmd/Ctrl-U (for Firefox), go Cmd/Ctrl-Alt/Opt-U (for Chrome), and if you’re using Internet Explorer, you really need to ask yourself if web design is the right career path for you.
Try looking through the HTML to see how the different elements on a web page are marked up. You may be able to identify certain tags straightaway. For example <p> is for paragraph, <h1,2,3> are headings, <img> is for an image, etc. You will notice that most of these tags work in pairs to denote the beginning and end of the mark up, for example <p>Text here</p> shows the opening and closing of the paragraph tag with the slash (/) preceding the closing tag. Other tags don’t work in pairs, for example the image tag self closes <img src = "http://robcubbon.com/images/rob.jpg" /> this instructs the browser to display an image with a particular web address as the source (src).
Another thing you might notice from the HTML source is that all HTML pages have similar structure. They all start with a <!DOCTYPE> declaration saying which version of HTML it’s in, followed by an <HTML> declaration, followed by the <head> of the document which is a container of various elements including links to scripts, style sheets, the meta information, etc. After the <head> comes the <body> where the elements of the web page are marked up.
Exercise: Select all the source code of this page into a NotePad (PC) or TextEdit (Mac) document and save it to your computer as “test.html” or something. Open this file in a browser and it should look exactly the same as the online version. Now turn off your connection to the internet and see what the test page looks like. Pretty different, huh? Try to work out why.
Tools of the trade
While you’re doing this, there will be certain tools you’ll need.
- Multiple browsers and smart phones. Try testing your own sites on different browsers and phones (this is where you’ll start a long standing hate affair with Internet Explorer).
- Text editor. You may use the basic NotePad (PC) or TextEdit (Mac), or maybe Coda (Mac) or Dreamweaver – don’t use Dreamweaver in the visual mode, just work on the code, you need to understand how this stuff works under the hood.
- Validator. Validate your web pages with the HTML Validator and the CSS Validator (use a browser plugin like Web Developer for Chrome to call on them quickly).
- Chrome Developer Tools and Firebug for Firefox. These tools help you understand CSS and JavaScript which, if you thought HTML was difficult, do take some understanding.
- Graphics and image editors. Central to web design are image editors like Photoshop or Fireworks. These are quite expensive but there is GIMP plus a host of online image editors if you’re just starting out.
Creating your own static HTML websites
While your understanding of HTML, CSS and JavaScript grows you should be creating static HTML sites, either locally or on a web server. Continuously play with the code to try to do cool things. Try to recreate certain elements in other websites by copying bits of the code.
Although the websites you eventually create are not likely to be made from HTML files, it vital you understand how to create static HTML sites first before you can start using PHP and/or Content Management Systems (CMSs) to create HTML.
Creating your own websites with CMSs
Most websites are created by CMSs – software that can create HTML pages within specified templates. The best ones are WordPress, Joomla and Drupal, but there are a host of lighter, open source CMSs you can experiment with, these will teach you how PHP, and with other CMSs, ASP, are used to piece together websites.
Use MAMP (Mac) or WAMP (Windows) on your computer to run these systems locally so that you can get a good understanding of how they work.
Using image editors
You will need to know how to use Photoshop or something similar. You will need this to create graphics for the site as well as to provide complete visuals of how the site will look when finished to aid the design process.
Get designing
Of course, I haven’t mentioned that the resulting websites will not only have to validate, work, be found by search engines, serve a purpose and be marketed but also … they have to look good.
In order to improve your artistic eye, regularly produce work and then try to better it. Sketch designs on paper then work on them in Photoshop or whatever graphics program you have. Practice will help you become a better designer. I will be recommending more resources later that will help you with design principles.
When people want answers they go to the internet and “Google it” or search YouTube. Web design is no different. There are many resources that will help you online. First and foremost there is W3 Schools which web designers refer to as the best online self teaching resource, there is also Tizag. Some people recommend Lynda.com although I’ve not used it personally.
Blogs
There are a number of great design blogs out there. There are big ones that can help you like SmashingMagazine, WebDesignerDepot, 1stWebDesigner and the Envato network.
Personally, I get more from the independent web and graphic designers who blog. There are, however, loads that I have learned from over the years so here are just a few and I apologise to any excellent bloggers that I’ve left off the list.
Chris Colyer‘s CSS Tricks is a great looking responsive website but also has great web design info and tricks
Veerle Pieters has great Photoshop and Illustrator tutorials on Veerle’s blog.
David Airey is someone I’ve followed for a while on his own eponymous blog, LogoDesignLove and IdentityDesigned. David is interested in the overarching identity of organisations amongst other things.
Chris Spooner has taught me a lot with tutorials at his blog at SpoonGraphics and plus information and inspiration at Line25.
Fabio Sasso‘s wonderfully designed site Abduzeedo offers great inspiration and weirdness.
Nick La‘s N.Design Studio and WebDesignerWall have some fantastic information and great inspiration.
Please feel free to add your favorite design blogs in the comments below.
Forums
When you are bashing your head against a brick wall forums are great places to get answers. Post a description of your issue and the web address and very often someone will get back to you with a solution. Here are some of my favorite forums.
I like Estetica Design Forum, DesignForums.co.uk, and Designer’s Talk. There’s Digital Point and Sitepoint for more wider ranging queries, the WordPress forum is excellent and there’s the Warrior Forum for internet marketing.
3. Books
Many web designers maintain that good old-fashioned physical books have helped teach them web design. Here are a few of my favorites and some others that have been recommended to me. The links are Amazon.com affiliate links.
- Build Your Own Website The Right Way Using HTML & CSS 3th (third) edition by Ian Lloyd is a Sitepoint book I read years ago. It really helped me at the time as it focuses on web design best practices. Make sure you buy an up-to-date edition (at the moment the third edition which includes a lot on HTML5).
- CSS: The Missing Manual by David Sawyer McFarland includes explanations, examples, and step-by-step tutorials. This book is especially recommended as it gives you the background to CSS and includes a lot about CSS3.
- The Principles of Beautiful Web Design, 2nd Edition by Jason Beaird, maintains that design is a skill that can be learned and teaches you the fundamental principles of design.
- Color Design Workbook: A Real World Guide to Using Color in Graphic Design by AdamsMorioka (editor) provides the vital information necessary to apply color creatively and effectively to design work.
- Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug an instant classic on web usability, loaded with insights and practical advice.
- Getting Real: The smarter, faster, easier way to build a successful web application by 37 Signals may be about creating web applications not sites, but it has such a marvellous way of simplifying web processes that I found it such a useful read.
- Digging into WordPress by Chris Coyier & Jeff Starr comes highly recommended as the great WordPress book. Available as a PDF version (handy for copying code) as well as a physical version.
Many designers maintain that failure is actually the best teacher. So get out there and design websites! When, as undoubtedly will happen, you come across a brick wall, you can use some of the online resources here to help you. And, when you can’t look at the computer screen any more, you can read a book about it!
0 comments:
Please leave a message, email or phone number to be contacted.