Free Ebooks for Designers & Developers

Imagem

books_w1024

Whenever you are a newbie designer, or an advanced pro, the Web always has some interesting reading for you. Looking for a little experience in wiring SVG, building web apps or becoming a full-time freelancer? Well, there is no need to drown in hefty books. There are a lot of short, but useful ebooks which can help you become a pro in a particular subject. And the best part of these ebooks is that all of them are completely free to download!

So, scroll down and enjoy a showcase of 15 free ebooks for web designers and developers to take your skills to the next level. Some are available as PDF and other formats, while others can only be read online.

1. Pocket Guide to Writing SVG

In this guide, you’ll find a detailed introduction to writing SVG (Scalable Vector Graphics) and get an understanding on where to start. Using clear examples of fruit images and brief description of attributes, you’ll learn SVG step by step with this handy pocket guide. Also available in Portuguese.

Author: Joni Trythall

Available: Read Online

2. Speaking JavaScript

This ebook would be useful for both newbie Javascript programmers and for seasoned JavaScript programmers as it features the topic in-depth. The author continuousyly blog about Javascript and his other interests on his blog2ality.com

Author: Dr. Axel Rauschmayer

Available: Read Online

3. Adaptive Web Design

Learn the origins of progressive enhancement, its mechanism, philosophy, and a lot of practical ways which you can apply progressive enhancement principles using JavaScript, HTML, and CSS in this 6-chapter book.

Author: Aaron Gustafson

Available: Read Online

4. 27 Page Type Classification eBook

The 27 pages of this short ebook will walk you through the key classifications for typography. It covers a quick history for each classification and core characteristics of the style.

Author: Jacob Cass

Available: PDF

5. 11 Things to Do with Every New WordPress Install

This guide includes 11 awesome tips on how to build a great WordPress site. If you’re a newbie on this matter and who is just going to install WordPress, this ebook was written for you.

Author: iThemes Media

Available: PDF

6. Building Web Apps with Go

This is a 15-chapter ebook by Jeremy Saenz, which will teach you how to quickly build web applications using the Go programming language.

Author: Jeremy Saenz

Available: PDF | ePUB | Mobi | Read Online

7. Go Mobile With WordPress

It’s never too late to turn your site mobile. Learn what is responsive design, mobile sites and mobile apps, and the tips you need to turn a site mobile-friendly.

Author: iThemes Media

Available: PDF

8. HTML Canvas Deep Dive

It contains exercises, interactive examples and walkthrough lessons to get you started on building your canvas app. It is advised that you should know a bit Javascript and HTML before going into this book.

Author: Josh Marinacci

Available: Read Online

9. 10 Keys to Great Landing Pages

In this really short ebook you’ll get to know the key differences between landing pages and home pages, why they are so important, and how to build smart cool landing page, all in less than 20 pages.

Author: iThemes Media

Available: PDF

10. Book of Speed

The book of speed by Stoyan Stefanov is an online, free ebook about web performance. It begins by focusing on the business implications of web performance: why speed matters to the bottom line, and then moves on to changes that can make the performance better.

Author: Stoyan Stefanov

Available: Read Online

11. A Practical Guide to Designing for the Web

This ebook written by Five Simple Step’s founder Mark Boulton. The ebook covers 5 main chapters including topics like research and ideas, colors, typography, layout and what to expect if you are going into the world of web design.

Author: Mark Boulton

Available: PDF

12. PHP: The Right Way

There is so much outdated info on the Web that leads new PHP users astray. This ebook if here to stop that. PHP: The Right Way is an easy to read and understand ebook with PHP best practices and links to authoritative tutorials.

Author: Josh Lockhart

Available: Read Online

13. Essential Career Advice for Developers

This book was written by the founder and CEO of iThemes, specifically for developers. It will tell you how to build your portfolio, work with clients, develop good communication skills, and inspire you to keep learning and exploring.

Author: Cory J. Miller

Available: PDF

14. So You Want To Be A Freelancer?

Do you want to be a full-time freelance web designer, but have no idea where to start? This ebook will tell you all pros and cons of a freelance web designer career, along with some practical tips how to build a strong business in this field. You’ll learn how to make money, be more organized, find new clients, and more.

Author: iThemes Media

Available: PDF

15. Magic of CSS

There are six chapters encompassing the box model, layout, table layout, color, typography and CSS transitions. The book is easy to understand, well written and full of interactive examples to keep things interesting.

Author: Adam Schwartz

Available: Read Online

via hongkiat.com

Google launches Web Designer, and its free! (beta)

Imagem

googleweb

30 September Google launched a new advertising application in beta called Google Web Designer. The company says the tool is for creating “professional-quality design” HTML5 ads and campaigns accessible to everyone from the designer to the dabbler.

HTML5 is widely seen as the standard that everyone on the Web should adopt. In case you didn’t know, Google describes HTML5 as a “universal language for building beautiful, engaging content that can run across desktops, smartphones, and tablets.” It is thus the company’s hope that Google Web Designer will help make HTML5 accessible to people throughout the advertising industry, getting Web developers closer to the goal of “build once, run anywhere.”

Screen Shot 2013 09 25 at 9.02.41 AM 730x330 Google launches public beta of Web Designer, a free design tool for creating HTML5 ads and campaigns

Here’s the current feature list for Google Web Designer beta:

  • Create animated HTML5 creative, with a robust, yet intuitive set of design tools.
  • View and edit the code behind your designs and see your edits reflected back on the stage automatically.
  • Build ad creatives seamlessly for DoubleClick and AdMob, or publish them to any generic environment you choose.
  • Receive updates to the product automatically, without having to re-download the application.
  • Access all of this entirely for free.

If you prefer the visual version, Google has provided multiple YouTube videos to show off the tool. Here’s one of them:

If this piques your interest you should read the getting started guide. Google is also asking for feedback, which you can provide on its user forum and Google+ page.

Again, this is just a beta, although Google does use the tag with little regard for its meaning. That being said, the company says it is “working hard over the next couple quarters to add new features and improvements.” We’ll let you know when its stable release is available.

via thenextweb

15 free ebooks for web designers

There’s plenty of free advice and tuition out there for web designers. Get your teeth into these great free ebooks.

Looking for a little expertise in HTML5, coding or going it alone? Well, to need to get bogged down in hefty hardbacks – there’s a huge range of digestible ebooks for you to get your teeth into. And most importantly, many of them are free. Here we list of 10 of the best.

01. Getting Real

 Getting Real
Getting Real

Getting Real explains how to go about building a web application and covering everything from the basics to the more advanced. Written by leading agency 37Signals – who are well known for both their blunt, no-nonsense blogging and their gung-ho, “you can do it” attitude, this is very far from a dry, technical text. And best of all, you can download a PDF version for free!

02. The elements of typographic style applied to the web

 The Elements of Typographic Style Applied to the Web
The Elements of Typographic Style Applied to the Web

This very readable manual and reference on modern typography, explores the art and history of the field as well as technical details. The free online version includes a new chapter on digital typography, plus expanded information on typefaces and designers.

03. Just Ask: Integrating Accessibility Throughout Design

 Integrating Accessibility Throughout Design
Just Ask: Integrating Accessibility Throughout Design

Written by Shaun Henry, Just Ask cover the basics of including accessibility in design projects, with shortcuts for involving people with disabilities in your project. There are tips for comfortable interaction with people with disabilities and details on accessibility in each phase of the user-centered design process.

04. Graphic Design for Non-profit Organisations

 Graphic Design for Non-profit Organisations
Graphic Design for Non-profit Organisations

The book focuses on design and best prac­tices for non-profit orga­ni­za­tions, but the con­tent is a great resource in gen­eral and the teach­ings can be applied pretty much any­where.

05. Scalable and Modular Architecture for CSS

 Scalable and Modular Architecture for CSS
Scalable and Modular Architecture for CSS

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. And this great free book by top designer Jonathan Snook explains it all in easy-to-follow language.

06. Learning Web Design

 Learning Web Design
Learning Web Design

A beginner’s guide to web design, this free ebook from Jennifer Niederst Robbins starts with the very basics of how web pages work, and goes on to take you through to CSS layouts and optimised graphic files.

07. HTML5 Quick Learning Guide

 HTML5 Quick Learning Guide
HTML5 Quick Learning Guide

Rather than trail through heavy texts on HTML5, this Quick Learning Guide provides a round up of everything you need to know in no time. The guide covers the main elements of HTML5 and focuses on the basics to help get you started, quickly.

08. How To Be Creative

 How To Be Creative
How To Be Creative

Advertising executive and creative Hugh MacLeod provides 26 ‘tried-and-true tips’ to help guide your creative self through the business world. Famous for drawing cartoons on the back of business cards, each of his tips is brilliantly presented by a cartoon drawing with advice ranging from ‘ignore everybody’, ‘put the hours in’ and ‘keep your day job’.

09. Web Designer’s Success Guide

 Web Designer’s Success Guide
Web Designer’s Success Guide

A designer’s ebook staple, Keven Airgid’s ‘Web Designer’s Success Guide’ is a comprehensive narrative on how to set up as a freelancer, and profit. Covering topics such as making the transition to self-employment, marketing your design skills and knowing what to charge, this ebook has all the answers you’re looking for when choosing to go it alone.

10. Pixel Perfect Precision handbook

 Pixel Perfect Precision handbook
Pixel Perfect Precision handbook

The guys at London design studio ustwo love pixels. So much so that they induct all new designers into the school of pixels with their very own Pixel Perfect Precision™ (PPP™) handbook. The aim? To give pixels the care and attention they deserve, to make sure they get the simple things right before moving onto the detail.

The 165 page guide is available in iBook format for both desktop and iPad, and also a straightforward PDF. And best of all it’s still free!

11. Design Your Imagination

 Design Your Imagination
Design Your Imagination

Another for the rookie, ‘Design Your Imagination’ is a complete beginner’s guide to web design, although it includes great tips for old-timers, too. The book uses examples to guide the reader through its 28 chapters, ranging from the history of web design, to design principles, planning and so much more.

12. The Nature of Coding

 The Nature of Coding
The Nature of Coding

A professor of the Interactive Telecommunications Program at New York University, Daniel Shiffman’s ebook focuses on the programming strategies and techniques behind computer simulations of natural systems. However, bear in mind that ‘The Nature of Code’ is not one for beginners, and you’re likely to need a background in coding to understand it completely.

13. Web Design and Mobile Trends for 2013

 Web Design and Mobile Trends 2013
Web Design and Mobile Trends 2013

A compilation of interviews with notable industry figures such as Jeffrey Zeldman (A List Apart), Karen McGrane, and Aarron Walter, and agencies like B-Reel, Unit9 and Ultranoir, this ebook outlines predictions for the future of web technologies and design for different devices. Also available to download and read on your iPad, Kindle and a wide range of devices and ereaders.

14. 50 Ways to Please Your Customers

 50 Ways to Please Your Customers
50 Ways to Please Your Customers

Following mobile’s phenomenal growth in 2012, this ebook provides tips on how to build amazing websites for mobile devices. It spans problems to consider when designing the user experience, 50 strategic approaches to create multi-screen designs and 50+ best practices to streamline your mobile design skills.

15. The Woork Handbook

 The Woork Handbook
The Woork Handbook

The Woork Handbook is a collection of Antonio Lupetti’s blog posts,  after receiving requests by some of his four million website visitors in 2008 for a printable version. Topics cover CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other aspects about web design.

via creative bloq

Icon Fonts for Web User Interfaces

I’m developing a layout for a web site, this time I surrendered to the icon fonts. Here are some examples.

What are Icon Fonts?

Icon fonts are font files that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters.

Icon fonts are like dingbat fonts, but are designed specifically for UIs. Icon fonts, just like other web fonts, use the CSS @font-face rule to display icons in web browsers.

And because they’re treated like web fonts, icon fonts:

  • Have great cross-browser support (even IE6, for example, can render web fonts using the @font-face rule)
  • Can be scaled on-the-fly if the user adjusts their web browser settings
  • Can be rendered with different colors
  • Can embody font- and text-related CSS properties (like text-shadow andgradient)

See icon fonts in action by visiting my friend Chris Coyier’s icon fonts demo page.

To learn how to use icon fonts, read this tutorial on CSS-Tricks: HTML for Icon Font Usage.

Free Icon Fonts

Below are 18 excellent icon free fonts that have licenses that permit commercial use. I strongly recommend reading the license terms and conditions of any freebie you get online, just to be sure that you can use the free resource for your particular purpose.

1. Foundation Icons Fonts

Number of icons: 137. License: MIT Open Source License.

Foundation Icons Fonts

2. Sosa icon font

Number of icons: 121. License: Custom license (use in commercial projects permitted).

Sosa icon font

3. Font Awesome

Number of icons: 196. License: Creative Commons Attribution 3.0 Unported.

Font Awesome

4. Iconic Icon Set

Number of icons: 172. License: SIL Open Font License and Creative Commons Attribution-ShareAlike 3.0.

Iconic Icon Set

5. Raphaël Icon-Set

Number of icons: 116. License: MIT License.

Raphaël Icon-Set

6. PulsarJS @FontFace

Number of icons: 73. License: SIL Open Font License.

PulsarJS @FontFace

7. IcoMoon

To create a font file, you’ll need to use the IcoMoon web appNumber of icons: 316.License: Attribution-ShareAlike 3.0 Unported.

IcoMoon

8. Typicons

Number of icons: 88. License: Creative Commons Attribution 3.0 Unported.

Typicons

9. Entypo

Number of icons: 100+. License: Creative Commons Attribution 3.0 Unported.

Entypo

10. Heydings Icons

Number of icons: 60. License: Attribution-NoDerivs 3.0 Unported.

Heydings Icons

11. Heydings Controls (App Icon Font)

Number of icons: 50. License: Attribution-NoDerivs 3.0 Unported.

Heydings Controls (App Icon Font)

12. JustVector Social Icons Font

Number of icons: 62. License: Free Art License.

JustVector Social Icons Font

13. Modern Pictograms

Number of icons: 86. License: SIL Open Font License.

Modern Pictograms

14. Brandico

Number of icons: 18. License: SIL Open Font License and Attribution-ShareAlike 3.0 Unported.

Brandico

15. Signify Lite

Number of icons: 38. License: Custom license (use in commercial projects permitted).

Signify Lite

16. Web Symbols typeface

Number of icons: 78. License: SIL Open Font License.

Web Symbols typeface

17. Social Media Icons

Number of icons: 74. License: Custom license (use in commercial projects permitted).

Social Media Icons

18. ikoo

Number of icons: 65. License: Attribution-ShareAlike 3.0 Unported.

ikoo

 

For those that are out of the loop, you can think of an icon font as a grown-up version of dingbats…with an actual use-case. The core idea is to take a set of icons or pictograms that would normally be implemented as an image or vector file and then convert it into a font. There are many reasons to do this too, according to Pictonic, as an icon font can load as much as 14% faster than images and can to be as much as 90% smaller than SVG files.

Now that a ton of options have emerged as popular choices among Web designers, we’ve made this brief list of 7 typefaces to point you in the right direction. If we missed your favorite, please share it with us in the comments below!

19. Font Awesome (free)
Font Awesome is an icon font that was designed to work perfectly with Twitter Bootstrap. Above you can see the font in use to make buttons, navigation, and more.

fontawesome 7 Gorgeous icon fonts to speed up your site and your design process

20. Fontello (free)
Differing from Font Awesome, Fontello is actually a tool that lets you easily piece together your own icon font based on icons from a number of sources, including: EntypoFont AwesomeIconic and Brandico.

fontello 7 Gorgeous icon fonts to speed up your site and your design process

21. Modern Pictograms (free)
The first icon font we discovered, Modern Pictograms was designed to work on-screen at sizes down to 18 pixels, and is remarkably pixel-perfect and useful as a pictographic font.

Screen Shot 2012 01 20 at 8.17.32 PM 520x165 7 Gorgeous icon fonts to speed up your site and your design process

22. Typicons (free): Yet another set of well-made, clean icons for Webfont use.

typicons 7 Gorgeous icon fonts to speed up your site and your design process

23. Pictonic (free-$160)
A well-supported and growing collection of 2300+ icons, 230 of which are free.

Screen Shot 2012 10 12 at 2.04.04 PM 520x224 7 Gorgeous icon fonts to speed up your site and your design process

24. Pictos ($49)
Pictos is an impressive set of icons that you can host and embed yourself via CSS @font-face (like the icon fonts above), or you can take advantage of Pictos Server, available through subscriptions.

Screen Shot 2012 10 12 at 2.11.09 PM 7 Gorgeous icon fonts to speed up your site and your design process

All of the above fonts are impressive and worth a look, especially if you’re planning on embracing responsive design and supporting higher resolution screens like the Retina display. Additionally, using icon fonts enables designers to quickly adjust the size, color and shadow of their icons on the fly — saving tons of time when changes have to be made and details refined. Your toolkit is only limited to what you can achieve with CSS.

via sixrevisions.com and thenextweb.com