Saturday, 1 February 2014

New to Web Design? Start Here.

Contents

Here’s a quick breakdown of what you’ll find on this page..

Designing Your First Website

Getting to grips with web design is about understanding what you’re aiming to achieve and how you can solve problems through design. In the first stages of the process, it’s worth thinking about creativityand we have a whole session of tutorials to help you out with that:
 
Beyond creativity comes the actual web designing. How does someone take ideas and communicate them in design terms? How should a web page be laid out? How does color influence a design? And how should we take our users into account?
    
And if you’re a developer, coming to web design from a coding background? We have a whole series of design theory articles (each one with an assignment at the end) to help you out, plus some very useful workflow tutorials:
 

Coding Your First Website

Planning, sketching, wireframing and mocking-up visuals are all important aspects of web design, but what about actually realising those designs for the browser? Getting a handle on web standards (HTML, CSS and JavaScript) is vital if you’re interested in the world of front end development. Let’s begin with the basics..
 
With a fundamental understanding of HTML and CSS you can now start to translate your static visuals into living, breathing web pages. Follow Adi Purdila as he moves from Photoshop to the code editor, building his Adaptive Blog Theme in this extended screencast series.
  

Tools of the Trade

Every craftsman needs good tools, and web design is no different! In actual fact, with a simple text editor and a web browser you have enough to get you started, but there are many other applications and tools to help with other tasks.

Photoshop

The workhorse of many a web design studio for years. Its role may be changing these days, but there’s no denying its presence in the design arena.
  

Fireworks

Adobe Fireworks development is being discontinued, instead making way for some new kids on the block, but it still has a passionate following and is a very capable web design tool.
  

Emmet

Emmet is one of those magic tools which, once you start using it, you’ll alway wonder how you managed without. Take a look!

Reflow

Those new kids on the block we just spoke about regarding Fireworks’ demise? That would be Reflow and the other Adobe Edge suite of tools. The future is here, ladies and gentlemen.
 

Wireframing Tools

There are plenty of wireframing tools to choose from, but Omnigraffle is certainly one of the most popular. Take a look at our beginners’ guide.

Responsive Web Design

Responsive web design has been arguably the most dramatic movement to hit web since someone suggested we stop using HTML tables for lay out purposes. To understand more of what it is, take a look at this quick interview with its founder, Ethan Marcotte.
Getting more involved, you’ll find a number of tutorials and articles which explore the many aspects of RWD.
   

Theming CMSs

Web designers have been using Content Management Systems as a real world web solution for years now. Why reinvent the wheel when CMSs such as WordPress do website structure and management so well?
In a continuation of the session shown earlier, Adi Purdila takes his static website build and converts it into a WordPress theme. Follow him during these very thorough screencasts and you’ll soon be able to do the same. Alternatively, follow me as I walk through another WordPress build, this time based on the popular Skeleton framework.
 
WordPress isn’t the only CMS out there, however. We’re always adding to our CMS tutorials, so here’s an example of what else is out there:

Understanding Our Industry

Being able to design and build a website is a small part of the business. If you’re going to be successful at earning money as a web designer, it’s important you understand the industry.
Being able to work with a team and your clients is crucial, so take a look at these articles which will help you on your way:
 
Learning from your peers is one of the best ways to get ahead in web design. On Webdesigntuts+ we enjoy critiquing both our readers’ work and the work of larger industry players. Take a look at our How They Did Itseries, plus our collection of workshop posts. Join the discussion!
 
Posted by at
Labels: , , , , , , ,

1 comment:

Subscribe to: Post Comments (Atom)