Here’s a quick breakdown of what you’ll find on this page..
- Designing Your First Website
- Coding Your First Website
- Tools of the Trade
- Responsive Web Design
- Theming CMSs
- Understanding Our Industry
- And the Rest..
Designing Your First Website
Getting to grips with designing a website 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 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?
- An Introduction to Color Theory for Web Designers
- Visual Direction in Web Design
- Ensure Users Remember You, Tell a Story
- The Gestalt Principle: Design Theory for Web Designers
- Understanding the Z-Layout in Web Design
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
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.
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.
- Photoshop CS6 For Web Designers
- Designing a “Coming Soon” Page in Photoshop
- Quick Tip: Speed Up Your Workflow With Photoshop Actions
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 is one of those magic tools which, once you start using it, you’ll alway wonder how you managed without. Take a look!
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.
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.
- Designing for a Responsive Web
- A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter)
- Life Beyond 960px: Designing for Large Screens
- A Simple, Responsive, Mobile First Navigation
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!