Blog
Creative and Funny Graphic Designer Jokes
These are some great jokes turned into images and posters, only designers will understand. From typography jokes to Keep Calm posters, these will surely put a smile on your face.
Design Principles
Learn Design Principles is an easy-to-follow guide to a variety of design principles, all in one place. It gives a…
50 Incredibly Clever Logos With Hidden Meanings
If you’re looking for some logo design inspiration look at these ingenious examples that carry dual meanings in their design. These hidden symbols either explain the nature of the business or are a clever visual representation of its name. Superb work by talented artists and designers who must have been high on some ‘good stuff’. Check them out.
1. Is that a golfer or the profile of a Spartan wearing a helmet?
2. The ‘R’ forms a man riding a bicycle, the orange circle is the front wheel.
3. The hand and leg enclosure forms the map of Australia
4. Two ‘F’s and a plane in the middle
5. The coffee froth forms the shape of the moon (with an eye)
6. The face of a lion, the shape of a bird.
7. The ‘C’s form the eyes of a cat
8. A fish made of code symbols
9. The two arrows shape a ‘H’ letter
10. The negative spaces between the legs form the buildings of the Bronx
11. Is it a hat or a cup?
12. A reel or a scared face?
13. BarCode
14. Boundary
15. Is it a bear or a hand?
16. ArtSharks
17. Freedom
18. Hope for African Children Initiative
19. Baskin Robbins has 31 flavours – check the ‘B’ & the ‘R’
20. Sony Vaio
21. Is it a ‘g’ or a smiling face?
22. The ‘C’ and the ‘o’ form a tyre
23. An eight made up of 8s
24. Ever noticed the arrow in the negative space between the ‘E’ and the ‘x’?
25. The number ‘1’ can be seen between the white ‘F’ and the red waves
26. Kölner Zoo
27. From ‘a’ to ‘z’, Amazon has it all…and a smile.
28. Mister Cutts
29. The Guild of Food Writers logo shows a spoon between the nib of a fountain pen
30. London Symphony Orchestra – Do you see LSO or a conducter with a baton?
31. The peacock in the NBC logo stands for color and pride.
32. The ‘N’ is also a ‘W’ with an arrow pointing north-west
33. Is it a tree or a chimp looking at a lioness?
34. Portrait Photos
35. The chip forms the word SUN in all directions
36. Ever noticed the bear between the mountain?
37. Food & Wine
38. Twins
39. Elefont
40. One of the first commercially designed ambigram/reversible logos (1969)
41. Birdlove
42. A plug, socket and an ‘E’ in the middle
43. Is that a film or Frankenstein’s head?
44. There’s a knife in the letter ‘a’
45. Almost forms the % symbol
46. Is that the moon or a golf ball?
47. Handydog
48. Circus of Magazines
49. Piano Forest
50. Killed
Responsive Design Explained Brilliantly
What is responsive design? Most people vaguely understand that it refers to websites that work just as well on desktops as they do on smartphones, but there’s a lot more to it than that, leading to widespread confusion.
But the principles of responsive design aren’t that hard to understand, thanks to this amazing collection of animated GIFs. Spend just a few minutes with these GIFs, and you’ll never be hoightily corrected by a design pedant about “responsive websites” versus “adaptive websites” ever again. In fact, you can be that hoighty pedant!
The GIFs below show many of the basic principles of responsive designs. Responsive designs fluidly expand, whereas adaptive designs hitch as you expand a browser or viewport.
Positioning your designs elements using pixels as X,Y coordinates can cause a site designed for one screen to look weird on another. Use relative units, like percent of the screen, instead of static units like pixels.
“As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down. It’s called the flow.”
“Breakpoints allow the layout to change at predefined points, i.e. having three columns on a desktop, but only one column on a mobile device.”
By using nesting elements, you can make it so collections of onscreen elements adapt to a shrinking or expanding screen as one, instead of individually.
“Sometimes it’s great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense.”
“Technically there isn’t much of a difference if a project is started from a smaller screen to a bigger screen (mobile first) or vice versa (desktop first). Yet it adds extra limitations and helps you make decisions if you start with mobile first.”
“Does your icon have lot of details and some fancy effects applied? If yes, use a bitmap. If not, consider using a vector image.” A vector image can more properly adapt to different resolutions.
Original post: http://blog.froont.com/9-basic-principles-of-responsive-web-design/
Cheatsheets for Web Designers
It doesn’t matter how many years of experience you have of a programming language, framework or CMS, you will always need a handy quick reference cheatsheet. Here’s a collection of useful cheatsheets, references, guides, checklists and docs, covering almost all aspects of web design.
| CSS | HTML | JavaScript | PHP | Markdown |
| WordPress | Ghost | Joomla | ModX | Concrete5 |
| Drupal | Browsers | Git | Sublime Text | Newsletters |
| Social Media | SEO | Licenses | Graphic Editors | Checklists |
| HTTP |
Web Languages
CSS – Cascading Style Sheets
| CSS Cheatsheet via OverAPI.com | Web | View |
| CSS Vocabulary | Web | View |
| Media Queries Cheat Sheet | Web | View |
| Responsive Web Design Cheatsheet | View | |
| fontfamily.io – Check Compatabilty of Default Local Fonts | Web | View |
Popular CSS Frameworks
| Master Cheatsheet for Bootstrap 3 | View | |
| Complete Font Awesome Icon Reference Cheatsheet | Web | View |
| Bootstrap 3 Glyphicons Cheatsheet | Web | View |
| Foundation 5 Cheatsheet | Web | View |
HTML – HyperText Markup Language
| HTML Vocabulary | Web | View |
| HTML5 Tag Cheatsheet | View | |
| HTML 5 Cheat Sheet Infographic | View | |
| HTML5 Cheatsheet | Web / PDF | View |
| HTML Elements Index | Web | View |
| HTML Canvas | Web / PDF | View |
JavaScript & jQuery
| jQuery Quick API Reference Web | Web | View |
| Javascript Cheatsheet via OverAPI.com Web | Web | View |
| JavaScript Regular Expression Cheatsheet | Web | View |
| Emmet Cheatsheet | Web | View |
PHP
| PHP Cheatsheet via OverAPI.com | Web | View |
| PHP Date & Timestamp Converter | Web | View |
Markdown
| Markdown Quick Reference Cheatsheet | Web | View |
| Printable Markdown Cheatsheet | View |
CMS Cheatsheets
WordPress
| Official WordPress Code Reference | Web | View |
| WordPress Codex | Web | View |
| Copy/Paste WordPress Cheatsheet PDF | Web | View |
Ghost
| Ghost Cheatsheet | Web | View |
| Ghost Developer Guides | Web | View |
Joomla!
| Joomla! Official Documentation | Web | View |
| Joomla! 3.x Templates Cheatsheet | View |
MODx Revolution
| MODx Revolution Documentation | Web | View |
| MODx Revolution’s Cheatsheets | View |
Concrete5
| Concrete5 Official Docs | Web | View |
| Concrete5 Cheatsheet | Web | View |
Drupal 7
| Drupal Community Docs | Web | View |
| Drupal 7 Database Cheatsheet | View | |
| Drupal jQuery Cheatsheet | View | |
| Drupal 7 Translation Cheatsheet | View |
Browser Dev Tools
| Chrome Devtools Cheatsheet | Web | View |
| Firebug Keyboard and Mouse Shortcuts Cheatsheet | Web | View |
Git & GitHub
| Git Cheatsheet via Git-Tower | View | |
| Git Cheatsheet via GitHub Training | View | |
| GitHub Visual Cheatsheet by Zack Rusin | PNG | View |
| A List of Cool Features of Git and GitHub | Web | View |
| Git Pretty Flowchart | View |
Sublime Text
| Commonly Used Sublime-Text Command Cheatsheet | Web | View |
| Sublime Text 3 OSX Cheatsheet | Web | View |
Email & Newsletters
| MailChimp Merge Tags Cheatsheet | Web | View |
| Campaign Monitor Template Cheatsheet | View |
Social Media
| Social Media Dimensions Cheatsheet | PSD | View |
| Social Media Cheatsheet | View |
SEO
| The Web Developer’s SEO Cheatsheet via Moz.com | View | |
| On-Page SEO Cheatsheet | Web | View |
| Punctuation, Symbols & Operators in Search | Web | View |
Software Licenses
| TLDRLegal – Software Licenses Explained in Plain English | Web | View |
Graphic Editors
Sketch
| Sketch 3 Visual Cheatsheet by Manuel Ebert | PNG | View |
| Keyboard Shortcuts for Sketch App | Web | View |
Adobe Photoshop
| Adobe Photoshop Keyboard Shortcuts (AZERTY) | JPG | View |
| Adobe Photoshop Keyboard Shortcuts (QWERTY) | JPG | View |
| Adobe Photoshop Reference Cheatsheet via Cheetyr | Web | View |
Adobe Illustrator
| Adobe Illustrator Keyboard Shortcuts (QWERTY) | JPG | View |
| Adobe Illustrator Keyboard Shortcuts (AZERTY) | JPG | View |
| Adobe Illustrator Reference/Cheatsheet via Cheetyr | Web | View |
Handy Checklists
| Web Developer Checklist | Web | View |
| Web Developer Checklist Chrome Extension | CE | View |
| Visual Web Design Checklist | Web | View |
| Launch Check List for Professional WordPress Websites | Web | View |
| Web Accessibility Checklist | Web | View |
| Usability Checklist | Web | View |
| IxD – Interaction Design Checklist | Web | View |
Handy References
| Can I use… Support tables for HTML5, CSS3, etc | Web | View |
| Findguidelin.es – Quicklinks to Style Guides | Web | View |
HTTP
| How to Switch from HTTP to HTTPS | Web, PDF | View |
Free file sharing tools
Google Drive
Google Drive is a free file sharing app that allows you to host and share your design files. With Google Drive you can allocate who to share the file with or set it as a private file. Google Drive can also act as a digital backup of your files, which can be accessed from your mobile device and any computer. Google Drive is also tied to your Google account, which means sharing files with your Google contacts is extremely easy and it can be distributed to other Google services.
Dropbox
Dropbox is a popular alternative to Google Drive. They both perform the same functions, however Dropbox lacks the additional Google options and functions that Google Drive possesses such as team collaboration.
Evernote
Evernote is a file sharing program with additional support and features for document sharing. It acts as a great platform for sharing documents such as PDFs with its in-built reader, and it is also great for recording and sharing notes, using its document capabilities. Once you upload or change a document in Evernote, it will automatically sync and then can be accessed in the future by any computer with Evernote installed.
Freelance portfolio sites
Behance
Join one of the largest design communities in the world. Behance is a web based portfolio app which many designers use to host their work. With millions of views every month, its a good idea to host your own work on Behance, as you never know who might be looking at your designs. Behance also has an active job board which you can use to look for new jobs/clients. Designs on Behance also get displayed on the “Served” websites, such as Typography Served, Photography Served, etc, giving you a greater chance to be seen.
deviantart
As a community destination, deviantART is a platform that allows emerging and established artists to exhibit, promote, and share their works within a peer community dedicated to the arts. The site’s vibrant social network environment receives over 160,000 daily uploads of original art works ranging from traditional media, such as painting and sculpture, to digital art, pixel art, films and anime.
Free collaboration tools
Projectuss
Projectuss is a collaboration platform for creatives. Projectuss gives designers the tools they need to work together without meeting face-to-face and for free. With great communication tools that allow you to comment and give feedback on your work, you can effectively talk to one another to get the job done quicker.
Cage
Cage is a collaboration platform for creatives. Cage gives designers the tools they need to work together without meeting face-to-face. With great communication tools that allow you to comment and give feedback on your team’s work, you can effectively talk to one another to get the job done quicker.
Free task & project management tools
Redbooth
TeamBox is a collaboration platform with a heavy focus on project management. While most freelancers may work as sole traders, there might be times when you need to work with someone else or you join/form a group. TeamBox gives you the management software you need to make collaborations a seamless experience, therefore reducing the amount of time and energy needed to manage group work.
Blimp
Productivity is a problem for many freelancers, especially for those working in groups. Sometimes it can feel like the endless discussions on Skype could be reduced to a few sentences. Blimp allows you to assign tasks, create discussions, chat and manage multiple projects within its wonderful platform. Spend less time on miscellaneous tasks and more time on what you do best.
Design & Development Frameworks
Bootstrap
Bootstrap is a powerful front-end framework that allows developers and designers to easily and quickly create responsive websites. Bootstrap has the unique ability to let you customize your framework, by allocating your desired grid size. The framework will then do the necessary calculations to allow you to build a website with your desired grid size and then generate a file for you to download with all the necessary HTML and CSS files.
Startup
Designmodo’s very own design framework is built for companies who want a professional yet affordable website solution. Startup features a heavy focus on design, with the ability to change the framework to your liking. The Startup framework also comes with sleek animations and HQ images which can be used as mockups if you don’t have your own images prepared. Designmodo realizes the need for an affordable but professional website framework and has provided the necessary tools and materials for any company to build their own website.
Recent Comments