FLS blog

share the best free resources



Creative and Funny Graphic Designer Jokes

Category : Fun · No Comments · by Mar 19th, 2015
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

Category : Help, school · No Comments · by Mar 9th, 2015
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

Category : Inspiration · No Comments · by Jan 21st, 2015

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.

clever-hidden-meaning-logo-designs-1

1. Is that a golfer or the profile of a Spartan wearing a helmet?

 

clever-hidden-meaning-logo-designs-2

2. The ‘R’ forms a man riding a bicycle, the orange circle is the front wheel.

 

clever-hidden-meaning-logo-designs-3

3. The hand and leg enclosure forms the map of Australia

 

clever-hidden-meaning-logo-designs-4

4. Two ‘F’s and a plane in the middle

 

clever-hidden-meaning-logo-designs-5

5. The coffee froth forms the shape of the moon (with an eye)

 

clever-hidden-meaning-logo-designs-6

6. The face of a lion, the shape of a bird.

 

clever-hidden-meaning-logo-designs-7

7. The ‘C’s form the eyes of a cat

 

clever-hidden-meaning-logo-designs-8

8. A fish made of code symbols

 

clever-hidden-meaning-logo-designs-9b

9. The two arrows shape a ‘H’ letter

 

clever-hidden-meaning-logo-designs-10

10. The negative spaces between the legs form the buildings of the Bronx

 

clever-hidden-meaning-logo-designs-11

11. Is it a hat or a cup?

 

clever-hidden-meaning-logo-designs-12

12. A reel or a scared face?

 

clever-hidden-meaning-logo-designs-13

13. BarCode 

 

clever-hidden-meaning-logo-designs-14

14. Boundary

 

clever-hidden-meaning-logo-designs-15

15. Is it a bear or a hand?

 

clever-hidden-meaning-logo-designs-16

16. ArtSharks 

 

clever-hidden-meaning-logo-designs-17
17. Freedom

 

clever-hidden-meaning-logo-designs-18
18. Hope for African Children Initiative

 

clever-hidden-meaning-logo-designs-19

19. Baskin Robbins has 31 flavours – check the ‘B’ & the ‘R’

 

clever-hidden-meaning-logo-designs-20

20. Sony Vaio

 

clever-hidden-meaning-logo-designs-21

21. Is it a ‘g’ or a smiling face?

 

clever-hidden-meaning-logo-designs-22

22. The ‘C’ and the ‘o’ form a tyre

 

clever-hidden-meaning-logo-designs-23

23. An eight made up of 8s

 

clever-hidden-meaning-logo-designs-24

24. Ever noticed the arrow in the negative space between the ‘E’ and the ‘x’?

 

clever-hidden-meaning-logo-designs-25

25. The number ‘1’ can be seen between the white ‘F’ and the red waves

 

clever-hidden-meaning-logo-designs-26
26. Kölner Zoo

 

clever-hidden-meaning-logo-designs-27

27. From ‘a’ to ‘z’, Amazon has it all…and a smile.

 

clever-hidden-meaning-logo-designs-28
28. Mister Cutts

 

clever-hidden-meaning-logo-designs-29

29. The Guild of Food Writers logo shows a spoon between the nib of a fountain pen

 

clever-hidden-meaning-logo-designs-30

30. London Symphony Orchestra – Do you see LSO or a conducter with a baton?

 

clever-hidden-meaning-logo-designs-31

31. The peacock in the NBC logo stands for color and pride.

 

clever-hidden-meaning-logo-designs-32

32. The ‘N’ is also a ‘W’ with an arrow pointing north-west

 

clever-hidden-meaning-logo-designs-33

33. Is it a tree or a chimp looking at a lioness?

 

clever-hidden-meaning-logo-designs-34

34. Portrait Photos 

 

clever-hidden-meaning-logo-designs-35

35. The chip forms the word SUN in all directions

 

clever-hidden-meaning-logo-designs-36

36. Ever noticed the bear between the mountain?

 

clever-hidden-meaning-logo-designs-37

37. Food & Wine

 

clever-hidden-meaning-logo-designs-38
38. Twins

 

clever-hidden-meaning-logo-designs-39
39. Elefont

 

clever-hidden-meaning-logo-designs-40

40. One of the first commercially designed ambigram/reversible logos (1969)

 

clever-hidden-meaning-logo-designs-41

41. Birdlove 

 

clever-hidden-meaning-logo-designs-42

42. A plug, socket and an ‘E’ in the middle

 

clever-hidden-meaning-logo-designs-43

43. Is that a film or Frankenstein’s head?

 

clever-hidden-meaning-logo-designs-44

44. There’s a knife in the letter ‘a’

 

clever-hidden-meaning-logo-designs-45

45. Almost forms the % symbol

 

clever-hidden-meaning-logo-designs-46

46. Is that the moon or a golf ball?

 

clever-hidden-meaning-logo-designs-47

47. Handydog

 

clever-hidden-meaning-logo-designs-48
48. Circus of Magazines 

 

clever-hidden-meaning-logo-designs-49
49. Piano Forest

 

clever-hidden-meaning-logo-designs-50

50. Killed

Responsive Design Explained Brilliantly

Category : Help, Inspiration · No Comments · by Nov 28th, 2014

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.

responsive-vs-adaptive-01

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.

relative-units-vs-static-units

“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.”

flow-vs-static

“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.”

with-breakpoints-vs-without-breakpoints

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.

nested-vs-not-nested

“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.”

max-width-vx-no-max-width

“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.”

desktop-first-vs-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.

vectors-vs-images

 

Original post: http://blog.froont.com/9-basic-principles-of-responsive-web-design/

Cheatsheets for Web Designers

Category : Help · (2) Comments · by Nov 24th, 2014

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 PDF View
fontfamily.io – Check Compatabilty of Default Local Fonts Web View

Popular CSS Frameworks

Master Cheatsheet for Bootstrap 3 PDF 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 PDF View
HTML 5 Cheat Sheet Infographic 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 PDF 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 PDF View

MODx Revolution

MODx Revolution Documentation Web View
MODx Revolution’s Cheatsheets PDF View

Concrete5

Concrete5 Official Docs Web View
Concrete5 Cheatsheet Web View

Drupal 7

Drupal Community Docs Web View
Drupal 7 Database Cheatsheet PDF View
Drupal jQuery Cheatsheet PDF View
Drupal 7 Translation Cheatsheet PDF View

Browser Dev Tools

Chrome Devtools Cheatsheet Web View
Firebug Keyboard and Mouse Shortcuts Cheatsheet Web View

Git & GitHub

Git Cheatsheet via Git-Tower PDF View
Git Cheatsheet via GitHub Training PDF View
GitHub Visual Cheatsheet by Zack Rusin PNG View
A List of Cool Features of Git and GitHub Web View
Git Pretty Flowchart PDF 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 PDF View

Social Media

Social Media Dimensions Cheatsheet PSD View
Social Media Cheatsheet PDF View

SEO

The Web Developer’s SEO Cheatsheet via Moz.com PDF 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

Category : Design tools · No Comments · by May 14th, 2014

Google Drive

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

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

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

Category : Portfolio sites · No Comments · by May 14th, 2014

Behance

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

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

Category : Design tools · No Comments · by May 14th, 2014

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

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

Category : Design tools · No Comments · by May 14th, 2014

Redbooth

Teambox

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

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

Category : Design tools · No Comments · by May 14th, 2014

Bootstrap

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

Startup-Framework

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.