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

Anúncios

Great examples of innovative navigation for inspiration

Imagem

nav

Could you imagine landing on a website with no navigation? It would be like trying to find your way in the ocean with no compass. It would be terrible.

Lucky for you, most sites have at least some kind of navigation, so you’re not completely lost. Recently, the Betterment blog featured a UX Flows post on navigation, where we discussed the importance and function of navigation in a web site. Navigation is critical — and it’s safe to say that some sites do it better than others. For this post, we’ve decided to take a look at some navigation that’s breaking the mold.

Take a look, and say “ahoy” with your thoughts in the comments!

Yar, Matey! Let’s Set Sail to 23 Web Destinations.

1. Disqusnavinsp_disqus

Disqus offers simple and effective navigation. The streamlined header is highlighted in white, which stands out against the blue background, and a footer navigation also appears with more options after scrolling down.

2. Big Spaceshipnavinsp_bigspaceship

With a different approach, Big Spaceship offers left sidebar navigation that expands from a menu icon that is similar to what you see on mobile sites. The nav is easy to find in the upper left hand corner of the main landing section, which displays a paint splash animation against a black background.

3. Dataveyesnavinsp_dataveyes

Upon loading, the Dataveyes navigation is conspicuously displayed in the center of the header, but then shrinks to a mobile navigation icon, allowing you to easily access the information without intruding on the content.

4. Glossy Reynavinsp_glosseyreyWith contrasting white text against a black background, the split navigation header is easy to locate and offers a really cool hover animation for each menu option.

5. Words Pictures Ideasnavinsp_wordpicturesideas

This single page, anti-navigation website is captivating and organized — users can still find their way around the site with ease.

6. Equus Designnavinsp_equus2

Simple, clean, and minimalist, the navigation design for Eqqus Design pops against the page’s dark background.

7. Miss Julia Piepnavinsp_julia

When you land on Miss Julia Piep’s page, the company logo is centered with a row of five menu options below it, and when you select an option, the responsive navigation moves to the top of the page. Neat.

8. Teehan + Laxnavinsp_teehan

Teehan + Lax’s mobile navigation icon flies out to offer six menu options that you can later close.

9. Danielle LaPortenavinsp_danielle

Danielle LaPorte’s nav is fancy, as the navigation responsively appears in both the header and the footer as you scroll. Best of both worlds!

10. Olympic Storynavinsp_olypmics

A mobile nav icon flies out to be a substantially sized sidebar menu that also can be closed. Boom — mobile can be anywhere and now it is.

11. Curad Mirnavinsp_carmir

Users’ attention is drawn to the upper left hand navigation icon, and without even clicking — just hovering over the icon — a menu sprawls out along the top bar while a white frame outlines the page.

12. Weyland Industriesnavinsp_weylandindust

Neatly tucked under the company’s logo with an arrow that implores you to click, the mega- navigation flies out to offer three main categories of navigation with multiple options below it. For sites that have a ton of content, neatly organized mega-menus with flyouts are where it’s at (jussayin’).

13. Lexusnavinsp_lexus

This navigation is different from most top bar menus. Lexus layers it up with a full navigation bar that flips out directly below the “MENU.” Layers of navigation = layers of fun. (Plus the option to use your keyboard!)

14. P’unk Avenuenavinsp_punk

P’unk Avenue’s navigation keeps it easy breezy for users with a horizontal grid-esque design at the top of the page that’s also numbered, titled, and provides a short, one-sentence description of what you’ll find.

15. SRGnavinsp_rg

It’s the circle of navigation! The pageless design is navigable by way of a responsive hero area circle navigation. I clicked to learn more — would you?

16. I Think I Mightnavinsp_ithinkimight

Easy to use icon navigation in the upper right hand corner of the page makes navigating this site caveman-picture simple.

17. Zaarly’s Employee Handbooknavinsp_zaarlyhandbook

Zaarly’s nav starts out as a boring mobile icon — then BOOM! Fun, full-screen navigation with color bar menu that cascades down and across the screen. I love it when designers realize the nav doesn’t have to be boring.

18. Editernavinsp_editer

Speaking of top bar navigation menus, Editer provides us with just that, but the flyout feature enhances the experience and organizes the content, which is essential for mega-sites.

19. Firestormnavinsp_firestorm

The Guardian’s completely interactive site is exploding with drool-worthy design aspects. The vertical navigation menu is easy to see but doesn’t take away from what’s going on visually — and it’s educational! Bonus!

20. Petersham Nurseriesnavinsp_cafesite

Petersham Nurseries gives you two navigation menus: vertical navigation menu on the left, providing new users with information on the company, and a horizontal navigation menu on the top right for account holders.

21. NKI Studionavinsp_nki

This site’s navigation commands attention from a different perspective in the bottom left of the page.

22. Cloud Ninenavinsp_cloud9

Cloud Nine has left side icon navigation in a blue colorblock bar, which nicely complements the responsive, pageless design.

23. Pervasive Lightnavinsp_pervasivelight

Pervasive Light’s light bulb nav is exciting with an electric wiggle mouse over feature. The nav also smartly flies up and out of the way when users reach their destination.

via dtelepathy.com

BLOKK – a font for quick mock-ups and wireframing

Imagem

BLOKK - a font for quick mock-ups and wireframing

BLOKK fontBLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin.

Download font

Is Flat Design Already Passé?

Imagem

Is Flat Design Already Passé?

MAYBE IT’S TIME TO GIVE SKEUOMORPHISM ANOTHER TRY?

Over the last few years, we’ve seen an upheaval in the way computer interfaces are designed. Skeuomorphism is out, and flat is in. But have we gone too far? Perhaps we’ve taken the skeuomorphic death hunts as far as they can go, and it’s high time we usher in a new era of post-flat digital design.

Ever since the original Macintosh redefined the way we interact with computers by creating a virtual desktop, computer interfaces have largely been skeuomorphic by mimicking the look of real-world objects. In the beginning, computer displays were limited in resolution and color, so the goal was to make computer interfaces look as realistic as possible. And since most computer users weren’t experienced yet, skeuomorphism became a valuable tool to help people understand digital interfaces.

But skeuomorphism didn’t make sense once photo-realistic computer displays became ubiquitous. Computers have no problem tricking us into thinking that we’re looking at something real so we don’t need to use tacky design tricks like fake stitching or Corinthian leather to fool us into thinking our displays are better than they are. In addition, most people have grown up in a world where digital interfaces are common. UI elements don’t haveto look like real world objects anymore for people to understand them.

This is why Jony Ive took over the design of Apple’s iOS and OS X operating systems and began a relentless purge of the numerous skeuomorphic design elements that his predecessor, skeuomaniac Scott Forstall, created. To quote our own John Pavlus, “skeuomorphism is a solution to a problem that iOS no longer has”… and that’s true of other operating systems and apps too. Google, Microsoft, Twitter, Facebook, Dropbox, even Samsung, they’re all embracing flat design, throwing out the textures and gradients that once defined their products, in favor of solid hues and typography-driven design.

This is, without a doubt, a good thing. Skeuomorphism led to some exceedingly one-dimensional designs, such as iOS 6’s execrable billiard-style Game Center design. But in an excellent post, Collective Ray designerWells Riley argues that things are going too far.

Flat design is essentially as far away from skeuomorphism as you can get. Compare iOS 7’s bold colors, unadorned icons, transparent overlays and typography-based design to its immediate precessor, iOS 6. Where once every app on iOS had fake reflections, quasi-realistic textures, drop shadows, and pseudo-3-D elements, iOS 7 uses pure colors, no gradients, no shadows, and embraces the 2-D nature of a modern smartphone display. But while flat design has made iOS 7 look remarkably consistent, it has also removed a lot of personality from the operating system. It’s like the Gropius house, when the old iOS 6 was a circus funhouse. Maybe it needs to get a little bit of that sense of madness back.

Here’s how Riley defines elements of a post-flat interface:

• Hierarchy defined using size and composition along with color.

• Affordant buttons, forms, and interactive elements.

• Skeuomorphs to represent 1:1 analogs to real-life objects (the curl of an e-book page, for example) in the name of user delight.

• Strong emphasis on content, not ornamentation.

• Beautiful, readable typography.

Riley’s argument is that flat design has allowed digital designers to brush the slate clean in terms of how they approach their work, but it has also hindered a sense of wonder and whimsy. Software should still strongly emphasizes content, color, and typography over ornamentation, but why is, say, the curl of a page when you’re reading an e-book such a crime, when it so clearly gives users delight?

“Without strict visual requirements associated with flat design, post flat offers designers tons of variety to explore new aesthetics—informed by the best qualities of skeuomorphic and flat design.” Riley writes. Dust off your drop shadows and gradients, and introduce them to your flat color buttons and icons. Do your absolute best work without feeling restricted to a single aesthetic. Bring variety, creativity, and delight back to your interfaces.”

Maybe Riley has a point. Why should mad ol’ Scott Forstall be allowed to ruin skeuomorphism for everyone? With the lightest of brush strokes, skeuomorphism can be used to bring back a sense of personality and joy to our apps. For those of us growing listless in the wake of countless nearly identical “flat” app designs, he makes a good point. It is time for the pendulum towards flat and away from skeuomorphism to swing back, if only a little bit.

via fastcodesign.com

28 Free Resource Websites for Designers and Developers

Whether you are a designer, developer, marketer, copywriter or otherwise, there is something in this list for you. Granted the number of tools online has been growing very quickly and it’s certainly not a complete collection. If you know of any helpful links which I’ve forgotten please share with us in the discussion area below.

Web Colour Data

web colour data webapp inspiration design

CodePen

codepen dark ui homepage coding ide cloud webapp

365psd

freebie 365psd download gallery psds

Gridulator

gridulator grid based webapp free open source online

Font2Web

convert online fonts ttf otf webfont webapp

Source Canvas

freebie download gallery psd open source codes sourcecanvas

WordPress Query Generator

sql database query generator code php wordpress

Buttons

open source github buttons css library

HTML Email Boilerplate

free open source html boilerplate homepage design

Google Web Designer

free software program homepage google webdesigner

Screen Sizes

screen sizes responsive design width devices webapp reference

CSS Font Stack

css css3 webfont font stacks homepage webapp

PixelsDaily

dark website homepage pixelsdaily freebie psd

Unheap

unheap gallery jquery repository homepage webapp downloads

Colourcode

colourcode code choice hexadecimal colors picker webapp

Pure CSS

pure css homepage open source webapp layout colorful

Favigen

favigen homepage layout webapp picking building favicons

resizeMyBrowser

resizemybrowser inspiration homepage webapp design

Responsive Elements

responsive elements inspiration webdesign homepage webapp

Forecast Font

freebie open source fonts weather icons iconfont

Font Awesome

font awesome open source icons webfont iconfont

Prefixr

net tutsplus internet webapp css3 prefix generator

PXtoEM

online webapp pixels to ems converter

Ajaxload

small loaders icons gif generator ajax circles

Iconza

iconza webapp icons webpage inspiration design layout

DesignFloat

design float social news digg webapp homepage

Subtle Patterns

subtle patterns website backgrounds free download

PageSpeed

pagespeed tools website google tools homepage

via designm.ag

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