For students or young designers, it can be quite complicated to distinguish best practices from obsolete techniques. The fluidity of the Web means that yesterday’s cutting-edge code can be today’s clutter, and budding Web designers have to wade through waves of outdated material before they can ride the crest of clean code. At Smashing, we continuously strive to improve communication by passing along any knowledge we are privy to.
Today, we would like to encourage you to spread your wisdom: what advice would you like to pass on to aspiring designers and developers? Which coding or designing tip would you wish to receive if you were to start out in the field of Web design today? Share your thoughts with the community using the hashtag
#smnl via Twitter!
Young designers — and those that never get tired of learning — will surely enjoy some of today’s features. In the same spirit of education and curiosity, we would like to announce that we are looking for trainees this fall. If you’d like to learn more about the exciting world of online journalism and editing, you can now apply for one of two internship positions3 at Smashing Magazine. Learn first-hand what online publishing is all about in an open, multilingual microcosm. Freiburg may be small, but the Web is everywhere and we like to keep our finger on its pulse.
Last but not least, we’d like to send one lucky winner to this year’s DESIGN/Inspire4 in Chicago and one to DESIGN/Creative Directors5 in Portland, Oregon. If you’d like to meet some of the foremost experts in Web design, tweet “Take me to DESIGN/Inspire (or DESIGN/Creative Directors)
The Smashing Editorial Team
Table of Contents
- A Student’s Guide To Web Design6
- Shots Of Things That Work7
- Share Your Favorite Findings From Articles And Books8
- More Privacy With Ghostery9
- Get Creative With CSS Blockquotes10
- Helveltica Superheros11
- Create Nested Sortable Lists With jQuery12
- Vintage Cookbooks13
1. A Student’s Guide To Web Design
A Student’s Guide to Web Design14 is a blog dedicated to young designers, students and newcomers to the industry. The project provides information for real-life skills and helps you follow on where university education ends. It is committed to better equipping students after graduation for the design industry with an inviting community that encourages collaboration and the sharing of ideas for students.
The website was created by Janna Hagan, a designer from Edmonton, Alberta, Canada. You can find articles for students about the basics of how to build a portfolio, interviews with different people within the design community, practical insights into the real-life environment of an employee and even tips before moving away to college. If you’re a student (or know students who are new to the design industry), it’s definitely a website worth bookmarking. (ml)
2. Shots Of Things That Work
Probably the most valuable asset of our work is the ability to explore and study the creative examples of work that other designers and developers come up with. Little details often make a big difference, but finding them is not very easy. Luckily, some designers spend a lot of time finding these interesting nuggets of design or UI patterns and present them publicly for everybody to get inspired by.
Shots of Things That Work17 is a blog with all kinds of interesting design, coding, usability or conversion-related things on the Web, worthy of bookmarking. The project is run by Simon Schmid. You can filter the content by tags located below the main posts—like Mobile, Android or iOS. To get a quick overview, you can browse a very well-arranged archive, which provides you minimized screenshots of all posts by month and year. If you don’t have enough, check out LittleBigDetails18 as well — a website dedicated to beautiful examples of usability across the Web. (ea)
3. Share Your Favorite Findings From Articles And Books
We’ve all been there: you’ve discovered an interesting quote or idea in a book or article and would like to add it to the collection of your other findings. Wouldn’t it be great to have a place to store and share your findings and explore what other findings like-minded people have found recently? Findings.com19 is a tool that provides just that.
The tool can be used in any Web browser (using a bookmarklet or an extension) but also has integration with Amazon Kindle, allowing you to import your Amazon Kindle Highlights and start sharing and discussing them with others instantly. Once you’ve signed up using your Twitter or Facebook account, you can follow interesting findings by your friends and strangers. And if you like a particular finding, you can add the article to Instapaper or Readability right away, buy the book on Amazon, view on Google Books, or search for it in a local library. (vf)
4. More Privacy With Ghostery
It seems that during these times of permanent sharing, online privacy and security concerns often fade somewhere into the background, giving way to full transparency and personal disclosure. We know how important log-ins and passwords are, but do you actually care about your data strongly enough? What about your browsing data? Do you know if someone is having a peek on your browser history and trying to catch some precious behavioral data? Ghostery21 can help you find that out.
Available for Opera23, Mozilla24 and Chrome25, this tool sees the shadowy side of the Web and detects trackers, fishy ad networks and Web bugs that are spread throughout the networks that are interested in knowing more about your internet habits. It allows you to detect and block scripts from companies that you don’t trust, delete locally shared objects, and even block images and iframes. (tts)
5. Get Creative With CSS Blockquotes
When it comes to typography, we often pay a lot of attention to the selection of typefaces and to meaningful type combinations — yet often small typographic details are what makes or breaks the design. Do we spend enough time on details such as image captions, sidenotes and footnotes, indentation or blockquotes? In fact, there is so much we can do to make them enrich the design rather than doing nothing.
Mary Lou’s Modern Block Quote Styles27 features six interesting CSS examples of modern styles for blockquotes and testimonials. The tutorial doesn’t contain any vendor prefixes in the code, but freely available source files contain production-ready code. If that’s not the reason to pop up your blockquotes in your next project, what is? (vf)
6. Helveltica Superheros
Creative artworks often emerge in unusual places. French design student René Mambembé has created a set of posters combining two very different things: typography and super heros. Titled “Helveltica, My Hero28“, the designer has assigned each letter in the alphabet to either a superhero or a well-known character by using interesting compositions of the Helveltica glyphs.
Among the posters you’ll find Batman and Spiderman, the Green Latern and Catwoman, as well as Darth Vader and Yoda. The posters are perfect for anyone who doesn’t want to miss their favorite (childhood) hero and yet keep their flat stylish. Another example of what is possible once you think creatively about type. (ml)
7. Create Nested Sortable Lists With jQuery
When creating an overview of items, sometimes you need to create lists that are sortable via dragging and dropping. There are all sorts of potential applications for this type of thing (including things like card-sorting apps or ranking apps). But creating the code for this kind of UI element isn’t exactly simple. That’s why a ready-to-use jQuery plugin is such a great option for many designers and developers.
The nestedSortable jQuery Plugin31 lets you create a sortable list where your users can drag and drop list items into any configuration they choose. You can set various attributes, such as the maximum number of nested levels, as well as setting custom methods (including To hierarchy, To array, and Serialize). As an alternative, there’s also the HTML5 Sortable32 plugin, which uses HTML5 and jQuery for a similar effect. (cc)
8. Vintage Cookbooks
Have you recently searched for inspiration in places where you’ve never looked before? Perhaps you like visiting new places, experiment with new skills, take on new challenges or even just browse vintage books that are collecting dust on your grandparents’ bookshelves? There is something intoxicating about the design and feel of those dusty books — but more importantly, you can study a lot about typography, layout, food photography, drawing and illustration skills from them.
Even better: combine “vintage books” with “cooking” by browsing Flickr Vintage Cooking Books Group34, and you’ve got something there! The group contains over 7,500 pictures of vintage cookbook covers and page illustrations (including pamphlets, books, menus and vintage advertisements). And perhaps, just perhaps, you’ll find the recipe that your family will love and crave years from now. (vf)
The authors in this newsletter are: Melanie Lang (ml), Esther Arends (ea), Talita Telma Stöckle (tts), Cameron Chapman (cc), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), John von Bergen (proofreading).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://www.flickr.com/photos/opensourceway/6082519811/
- 3 http://www.smashingmagazine.com/internship/
- 4 http://www.redesignconference.com/inspire
- 5 http://www.redesignconference.com/conferences/cd/
- 6 #a1
- 7 #a2
- 8 #a3
- 9 #a4
- 10 #a5
- 11 #a6
- 12 #a7
- 13 #a8
- 14 http://www.studentguidewebdesign.com
- 15 http://www.studentguidewebdesign.com
- 16 http://thegodfounder.com/
- 17 http://thegodfounder.com/
- 18 http://littlebigdetails.com/
- 19 https://findings.com
- 20 https://findings.com
- 21 http://www.ghostery.com/
- 22 http://www.ghostery.com/
- 23 https://addons.opera.com/en/extensions/details/ghostery/
- 24 https://addons.mozilla.org/en-US/firefox/addon/ghostery/
- 25 https://chrome.google.com/webstore/detail/mlomiejdfkolichcflejclcbmpeaniij/
- 26 http://tympanus.net/codrops/2012/07/25/modern-block-quote-styles/
- 27 http://tympanus.net/codrops/2012/07/25/modern-block-quote-styles/
- 28 http://www.behance.net/gallery/helvetica-my-hero/3578945
- 29 http://www.behance.net/gallery/helvetica-my-hero/3578945
- 30 http://farhadi.ir/projects/html5sortable/
- 31 http://mjsarfatti.com/sandbox/nestedSortable/
- 32 http://farhadi.ir/projects/html5sortable/
- 33 http://www.flickr.com/groups/vintagecookbooks/pool/with/3480980838/
- 34 http://www.flickr.com/groups/vintagecookbooks/pool/with/3480980838/