Pixels & code #3 – Web Design weekly links not to miss
Every week I post a lot of my daily readings about Web, UI and UX Design, HTML and CSS, webdesign tools and ressources and inspiration on twitter and other social networks. I decided to put them all together in one place at the end of the week, in case you missed some. They are classified in different categories with some tags so that you can quickly select what you are interested in. Happy reading.
Articles to read
- #Responsive – A Responsive Web Design Process , a lot of very interesting and clever ideas in this excellent article
- #Webdesign – What’s wrong with “Pixel Satisfaction”? ” Aiming for excellence in the final product is always the goal. However, when presenting a mockup, it should be ok if an element is a few pixels off, especially if it saves you (and your client’s budget) an hour of work “
- #Webdesign – Designers checklist advices, designers giving advices to other designer
- #Webdesign – Why designers are talking about the wrong thing., “You know what I don’t give a shit about? Design tools. (…) HTML, CSS & JAVASCRIPT bring your painting to life”
- #WebDesign – Laziness & The Web Designer, an interesting opinion on tools like Macaw or CSS3hat that render code automatically
- #Typography – Improving-layout-with-vertical-rhythm
Inspiration
- #Logo – Hawt Sauce, a very nice branding identity for home made sauce
- #Packaging – Lacy Kuhn a lovely cereal packaging
- #Typography – Fantastic Shoppe Fronts a tumblr with fantastic old store fonts <3
- #Art – The Zoom Quilt it a collaborative art project with infinite inception zoom inside an illustration. And to continue in this style, “Infinite Oz”
- #Interractions – The perils at Great Falls, a great work on an interractive page
Tutorials
- #CSS – Absolute Center how to center a modale vertically and horizontally using absolute positionning only in CSS
- #Responsive Multi-Level Push Menu, an Off-Screen navigation with multiple levels
Useful ressources
- #Ghithub – A guide to using Github Pages, very didactic step by step guide 🙂
- #Illustrator – Adobe Illustrator CS6 Shortcuts Cheat Sheet
- #Adobe CC – Early access to Typekit and file sync in Adobe CC
- #Test #Retina – How to test a website for Retina on Windows without an actual Retina display?
Freebies
- #Font- Dense typeface a free is a versatile, elegant, geometric and compact sans-serif typeface
- #Icons – 60 SEO Service icons, but they could also be used to illustrate for a more general purpose
Tools and plugins that will make your life easy
- #Grid – modulargrid.org, an online tool (and Photoshop plugin) to help you create a grid baseline in Photoshop : plugin + pattern to download 🙂
- #User – randomuser.me an API that provides you with a randomly generated user
Fun and impressive demos
- #CSS – an iOS style photo icon with one HTML element: body
- #Game – Littlealchemy, a game in the browser where you need to combine elements to create other
- #Game – http://hoverstud.io/babbit/ , use the rabbit to eat the carrots !
- #Canvas – Touch device jelly menu concept
The read you can’t miss:
#UX – Designing User Interfaces for Your Mother, how “real” user are surfing and what they are expecting from a website experience