When we think about design, we tend to get tangled up in discussions about visual direction, layout, content hierarchy and eventually responsive breakpoints. However, what matters the most from the user’s perspective are access to content and readability on the page. The access to content doesn’t just mean that the content is available when users are on the site; the content should be easy to access even before the user has accessed the website.
Quite often in our projects the URL design is an afterthought — a topic we tend to leave to monstrous content management systems and third-party content providers. The result are unreadable and mysterious URLs which are difficult to type, to memorize and to share. URL Design is important3 and since URLs are created for people, not computers4, why don’t we optimize them for, you know, humans?
Here’s an example: Clearleft uses the URL design pattern such as
clearleft.com/does/ux-design to showcase the different areas of their work and activities, and Lanyrd uses self-speaking URL structure for events and speakers:
lanyrd.com/2013/w3conf/speakers/. Sometimes it’s even more than that, e.g. How do you prevent vanity URLs from colliding with future features5 on your site?
URL design matters, wouldn’t you agree? What creative ways have you found of keeping your URLs memorable, friendly and helpful to your users? Please share your ideas with us via Twitter466 by using
— Smashing greetings from Moscow, Vitaly (@smashingmag)
Table of Contents
- Free Editable Vector Maps7
- How Much To Make An App?8
- Discover The Best Comments In Source Code9
- Don’t Be Dumb, You’re Smart!10
- New Workflows For Your Digital Butler11
- Easy-To-Implement Tool Tips For Your Next Project12
- A Maps Experiment Made With Chrome13
- The Beauty Of Corruption14
- Food For Thought: Workshops in London & Berlin15
1. Free Editable Vector Maps
So what do you get when you marry design and travel? Beautifully detailed Free Vector Maps16 by Ted Grajeda, of course! Ted has an affinity for maps as he loves to travel and explore, and so he has designed a few he wants to share with you. The maps have been created by designers using consistent color, fonts and strokes.
GIS data is used to create these clean vector maps which are all digitally handmade without tracing or copying any images. The maps are layered with different details and all the elements are on separate layers. These maps are so easy to customize by using the different layers that there’s almost an entire world of maps waiting for you! (sh)
2. How Much To Make An App?
You have this awesome idea of what kind of app the world is still missing? You want to get it out there? But how should you get started? To connect creativity with professional knowledge and know-how is one of the goals ooomf pursues. They offer help with one of the basic steps: estimating the costs of your app18.
In only ten steps you can get an overview of how much an app with your desired features costs. There are many options to choose from, such as device, type of interface, required login system, and a few others. Of course, the total you receive in the end is just an estimate but it might give you a sense of direction of what kind of budget you should be expecting or seeking for such a project. (kv)
3. Discover The Best Comments In Source Code
Leaving a personal mark for others to discover seems to be a human urge. Humans in the stone age left cave drawings, today’s students are known to leave doodles on their desk, and tourists love to leave the obligatory “X and Y were here, 03.10.2013″ in almost every famous landmark they can access.
I always treated code as a deadly serious business (maybe because I’m German), but some developers love to leave goodies for the few people that may stumble across their source code. Read all 518 creative comments21 written in code by developers who have left their personal marks behind, for themselves and for those who may have to maintain a particular code in the future. (ml)
4. Don’t Be Dumb, You’re Smart!
While more and more designers focus on typography and readability, there are still some common issues which are so easy to avoid yet are often overlooked. However, Jason Santa Maria promotes one simple feature which won’t need any special knowledge and can make your content better — today.
Jason’s little side project “Smart Quotes For Smart People23” was made for the National Punctuation Day 2013 and promotes the usage of elegant Curly Quotes instead of the simple Straight Quotes. The website gives you a quick overview on how the English language uses quotes correctly. Furthermore, it presents shortcuts for Mac and Windows users, as well as HTML entities. Improve your practical typography knowledge today — your English teacher will love you for it! (ml)
5. New Workflows For Your Digital Butler
Do you know Alfred24, the digital butler? Discreetely sitting in our Mac menu bars, he is always at our service, untiredly waiting to be woken by a keyboard shortcut. Over time, this little guy has spared us countless clicks and enhanced our productivity. Now, Alfred has attended special training in catering for Web developers and designers, and guess what? He has gotten even smarter. With the nifty Alfred workflows25 that front-end engineer Zano Rocha compiled on GitHub, the program has the makings of becoming your new best digital friend — if it hasn’t been until now.
In the collection of new workflows, you will find cool features such as opening files and folders in Sublime Text, searching for browser compatibility support, converting color values, finding processes by name and killing them, searching for questions on StackOverflow, and many, many more. Once you get used to them, you’ll never want to work without them anymore. (cm)
6. Automatic Background Adjustment For Better Readability
You know how it is: you have a large, prominent feature area in your layout, usually with a quite large background image, and you have to put either an illustration or text on top of it. The problem is that the feature image is likely to change in the future and you don’t really know whether a light or dark foreground text (or illustration) will still stay readable once the content manager has made some changes.
What do you do? Well, what if you used a script that would detect the brightness of background images as well as their dark and soft spots, and then automatically switch the brightness of your foreground text or illustration to a darker (or a lighter) version of an element? That’s exactly what BackgroundCheck28 does. This library gives you two extra classes,
.background--light that you can use to change an element’s style in your CSS. Simple and easy. The script weights 3.82 Kb and is available on GitHub29 as well. Worth bookmarking! (vf)
7. A Maps Experiment Made With Chrome
Map Dive30 is a game that lets users free fall to famous monuments from around the world, such as the Statue of Liberty. But wait a second, it’s Pegman from Streetview — do you recognize him? The whole aim is to earn your wings by navigating Pegman through a series of gates and gaining points by collecting stars along the way and hitting the bonus objects by using the arrow keys on your keyboard.
The game is actually a celebration for reaching the landmark achievement of one million Maps API integrations. It also demonstrates the immersive experience of Maps in the browser. The design of the user interface has been kept simple and reflects the new Google Map design. (sh)
8. The Beauty Of Corruption
If you’re a person who finds beauty in the faulty and distorted things in life, or if you just like to break things, then maybe you’ll enjoy glitch images32 — a script which lets you mess around with bytes in a JPEG image. Simply import your own image and try it out yourself!
9. Food For Thought: Workshops in London & Berlin
When we started running workshops in our lovely hometown Freiburg, we were humbled to see the interest from areas close to our city, so we decided to explore other areas. Since recently, we have also started organizing full-day workshops with experts36 of the industry in Berlin and London. The feedback has been amazing, and we know that you’ll love the workshops just as much as we do, and brush up your skills for good!
The upcoming hands-on, practical workshops are:
- The Mobile Web38 with Peter-Paul Koch (London, UK),
- Visual Design39 with Dan Rubin (London),
- Front-End Warrior40 with Addy Osmani (London),
- Responsive Design: Clever Tricks41, with Vitaly Friedman (London),
- Responsive Workflow42 with Stephen Hay (Berlin, DE),
- Product Lunch43 with Rachel Andrew (Berlin),
- Node.js44 with Remy Sharp (Berlin),
- Innovation by Design45 by Peter Smart (Freiburg, DE).
We look forward to meeting you at one of the Smashing workshops soon. If you have any questions or workshop suggestions, please don’t hesistate to contact us via Twitter466 and we’ll get back to you right away! (vf)
The authors in this newsletter are: Esther Arends (ea), Melanie Lang (ml), Cosima Mielke (cm), Shavaughn Haack (sh), Kristina Vogt (kv), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://warpspire.com/posts/url-design/
- 3 http://warpspire.com/posts/url-design/
- 4 http://www.not-implemented.com/urls-are-for-people-not-computers/
- 5 http://www.quora.com/How-do-sites-prevent-vanity-URLs-from-colliding-with-future-features
- 6 http://www.twitter.com/smashingmag
- 7 #a1
- 8 #a2
- 9 #a3
- 10 #a4
- 11 #a4b
- 12 #a5
- 13 #a7
- 14 #a7b
- 15 #a8
- 16 https://www.freevectormaps.com/
- 17 https://www.freevectormaps.com/
- 18 http://howmuchtomakeanapp.com/
- 19 http://howmuchtomakeanapp.com/
- 20 http://stackoverflow.com/questions/184618/what-is-the-best-comment-in-source-code-you-have-ever-encountered
- 21 http://stackoverflow.com/questions/184618/what-is-the-best-comment-in-source-code-you-have-ever-encountered
- 22 http://smartquotesforsmartpeople.com/
- 23 http://smartquotesforsmartpeople.com/
- 24 http://www.alfredapp.com/
- 25 https://github.com/zenorocha/alfred-workflows
- 26 https://github.com/zenorocha/alfred-workflows
- 27 http://www.kennethcachia.com/background-check/index.html
- 28 http://www.kennethcachia.com/background-check/index.html
- 29 https://github.com/kennethcachia/Background-Check
- 30 http://mapdive.weareinstrument.com/
- 31 http://mapdive.weareinstrument.com/
- 32 http://snorpey.github.io/jpg-glitch/
- 33 http://snorpey.github.io/jpg-glitch/
- 34 http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator
- 35 http://fishnation.de/
- 36 https://shop.smashingmagazine.com/workshops/?pk_campaign=Editorial-Newsletter-19-09-2013&pk_kwd=full-day-workshops
- 37 https://shop.smashingmagazine.com/workshops/
- 38 https://shop.smashingmagazine.com/smashing-workshop-mobile-web-london.html
- 39 https://shop.smashingmagazine.com/smashing-workshop-visual-design-essentials.html
- 40 https://shop.smashingmagazine.com/smashing-workshop-the-front-end-warrior-workshop-london.html
- 41 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-london.html
- 42 https://shop.smashingmagazine.com/smashing-workshop-stephen-hay-responsive-design-workflow.html
- 43 https://shop.smashingmagazine.com/smashing-workshop-shipping-your-product-berlin.html
- 44 https://shop.smashingmagazine.com/smashing-workshop-nodejs-knowledge-smash-and-grab-berlin.html
- 45 https://shop.smashingmagazine.com/smashing-workshop-innovation-by-design.html
- 46 http://www.twitter.com/smashingmag
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.