Ian Yates
My name's Ian and I'm editor of Web Design content at Tuts+. Ask me anything you like about web design… I'll find someone who knows the answer.
Courses
  • Web Design

    Building Static Websites with Hammer for OS X

    3 hours
  • Web Design

    Responsive Web Design for Beginners

    3.6 hours
  • Design & Illustration

    Character Design

    1.9 hours
  • Web Design

    Introduction to Web Typography

    1.9 hours
  • Web Design

    30 Days to Your First Website Design

    4.7 hours
Tutorials
  • Web Design
    Comment to Win! Paperback Copies of Shopify’s “Grow” BookGrow banner preview
    106 shares
    Grow (vol. 1) is a collection of eleven chapters; lessons written by web professionals from all across the spectrum. It caters for beginners and experts alike, touching on everything from branding and finding clients, right through to contracts and pitching. And we have a pile of paperback copies to give away!Read More…
  • Web Design
    The Women of Tuts+ Web DesignPreview women of web design
    231 shares
    Here’s a fun fact: for no particular reason we have more men than women on our instructor team at Tuts+ Web Design, yet our top three tutorials so far in 2015 were all written by women. This post will quickly introduce you to our regular women contributors and give you a couple of names to look out for in the near future!Read More…
  • Web Design
    Create and Win with the Envato Remix CodePen Challenge!Envato remix 02 alt
    216 shares
    Several times this year we’ve run CodePen Challenges on Tuts+ and they’ve all been a huge hit. So I’m seriously excited to announce that we’re running another, but taking it to the next level! This time we’re wrapping the challenge up as an Envato Remix contest–the whole Envato community will be involved and we have some brilliant prizes on offer too! Read on to find out what (and how) you can win..Read More…
  • Web Design
    How to Translate Tuts+ TutorialsPreview
    405 shares
    We recently pushed out some big changes to the Tuts+ Translation Project, making the process easier and quicker for everyone involved. Read on to find out how you can take part and exactly how the new translation tools work!Read More…
  • Web Design
    100 Popular Translated Web Design Tutorials and ArticlesPrev
    239 shares
    The Tuts+ Translation Project has been running for over a year now and is still picking up speed–every day we receive new submissions, requests and ideas, in all kinds of languages! With the help of Native we’re processing translations quicker and more easily. Find out how to get involved at the bottom of this post, but in the meantime here are some of the most popular translations, in 24 different languages, from Tuts+ Web Design.Read More…
  • Web Design
    CodePen Challenge #3: Results!Codepen challenge 3
    87 shares
    Last week we asked you to take part in our third CodePen Challenge: to select your favorite Google font pairs and apply them to some sample content. Over 50 of you took part, showing us some great font combinations–here’s what you all did!Read More…
  • Web Design
    CodePen Challenge #3: Favorite Google Font PairsCodepen challenge 3
    134 shares
    Another month, another CodePen Challenge! Last time we asked you to style a signup form and a whopping 68 of you took part. This time we want to see which Google font combinations you recommend–the best examples will be showcased in a week or so!Read More…
  • Web Design
    Sign on the Dotted Line: Finishing Your Animation With Waypoints Sig 3
    110 shares
    In the previous tutorial we animated an SVG signature using CSS. It’s a great effect, making it appear as though the words are being written right there on the screen. In this tutorial we’ll take things further and use Waypoints to trigger the animation when we choose.Read More…
  • Web Design
    Sign on the Dotted Line: Animating Your Own SVG SignatureSig 1
    230 shares
    Animating the stroke of an SVG is perfect for simulating handwriting. Over the course of two tutorials we’re going to use CSS animation to make a signature neatly appear to be written, as though you’re signing the page yourself.Read More…
  • Web Design
    Web Design Glossary: What is “Affordance”?Affordance
    242 shares
    The term “affordance” is one you’ll hear often in the world of web design. It regularly appears in tutorials on Tuts+ too, so this article will serve as a definition just to clear up any doubts.Read More…
  • Web Design
    CodePen Challenge #2: Results!Codepen challenge 2
    124 shares
    Last week we asked you to take part in our second CodePen Challenge: styling a mailing list sign up form. More than 60 of you took part, offering some really diverse ideas–here’s what you all cooked up!Read More…
  • Web Design
    CodePen Challenge #2: Style a Signup FormCodepen challenge 2
    96 shares
    It’s time for another CodePen Challenge! This time I want you to show us what you can do to a simple signup form. That’s all. The best examples will be showcased in a week or so!Read More…