Assignment for this week’s chat was to choose three mini-articles from http://tympanus.net/codrops/collective/collective-78/ to write about.
First selection I checked out was “Photoshop and Adobe Illustrator CS6 Shortcut Cheatsheets”. (http://www.zerolag.com/infographics/) These great infographics display the computer keyboard with notations on shortcut keys for performing certain commands within each software program. Printer-version links enable you to print out these cheatsheets to keep handy. (I just printed to PDF and left them on my computer desktop for easy access when I’m working in either program.) Gotta love cheatsheets!
The second article I chose was “Great Responsive Web Design is a Matter of Process” (https://medium.com/p/270048a88c70). This article focuses on designing for content rather than devices, a nice perspective to designing for today’s web. In her article she states that designers need to retrain their brains to stop focusing so much on widths and that the focus should be more on fluid elements. I believe the term she referred to was “adaptive design”. The author’s approach to this is twofold. First, she suggests developing a design system. This involves tossing out the old notions of layout design and thinking more about the particular “feel” of the site as it will translate across devices. Second, she implores a new mockup strategy called “content hierarchy”, where the focus is more content-based than layout based. In this method, designers give numerical values to elements of content that correlate to where those items might appear in a stacked column layout, for example. The author also lists a few tools to help designers with responsive web design (RWD). One tool is Style Tiles (http://styletil.es/) , which focuses on elements of the website like font, color, and sample UI swatches. I have worked with Style Tiles before and plan to integrate it into all future web design projects. The next tool she mentions is a Priority Guide (here’s a PDF – http://media.smashingmagazine.com/wp-content/uploads/2012/05/Dress-Responsively-Wireframe.pdf). An example is Drew Clemens of Spark Box (http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/ ). The priority guide shows how content will be prioritized on a site. I look forward to trying this out on my next web project. Her article is certain to help in planning a great website to meet your client’s needs.
The third article I read was, well… I kind of checked them all out. Some of them were mere “skimming”, as I’m not savvy enough on some of the topics to really glean much from them at this point. However, I did bookmark some to Favorites to tap back into at a later date. I also started a Web Toolbox folder on my Favorites to house ideas, tools, and tips for future projects. Here’s a few I added from this week’s assignment…
…and my favorite: http://cloudcastlegroup.com/blog/basiliq
I like the Basiliq UI website layout and overall design! You must watch the “How It’s Made” Freehand UI video on their page – very creative! Basiliq UI provides a hand-crafted set of elements for mockups. I think they might come in handy for future web projects. Browse around the rest of Cloud Castle’s site to see what all they have to offer!
Off to Google “adaptive design” and “CSS cheatsheets”…
P.S. Here’s a great HTML5 cheatsheet from Smashing Magazine: http://media.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf
And a great HTML5 cheatsheet, also from Smashing Magazine: