Real Favicon Generator

Real Favicon Generator is a handy tool for setting up your website’s favicon properly.  It takes care of both the images (formats, resolutions, etc) and the HTML that you’ll need to include.  With just a few clicks your website will work properly with browsers, operating systems, and mobile applications.

With so many platforms and icons, it’s hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you.

If you still prefer to do it yourself and know all there is to generating proper favicon images and markup, have a look at this resource for everything there is to it and more.

LINGsCARS.com – website of the day

LINGsCARS.com deserves some kind of title and reward.  I’m giving it a website of the day award, as I’m still stunned for words.

On one hand, it serves as a painful reminder of how the web used to be back in the 90’s.  It got everything from psychedelic background and auto-played music to animated GIFs and mouse hover effects.

On the other hand, it does stand out from all pastel colored material designed websites of today.  Obviously, a lot of work went into building this thing and … somehow … strangely … it works.

Now, please excuse me while I wipe my bloody tears…

P.S.: Yeah it also took me a while to actually prepare that screenshot.  Full-page image was too large.  Cropping it down significantly brought it down to just under 5 MBytes, after which TinyPNG compressed it to just 1.4 MBytes.

History of Icons

History of Icons looks at the evolution of icons used for desktop, mobile, and web.  There are plenty of nostalgia triggering screenshots from a variety of systems.  Given that nobody could ever afford having all of those systems, I’m sure you’ll find interesting screens from computers you didn’t have or didn’t see.

The 20 best wireframe tools

 

Creative Bloq lists 20 best wireframe tools.  The selection varies from free, through cheap, to expensive, and covers web-based, desktop, and mobile solutions.  Quite handy for those of us not involved in web design on a daily basis, but needing a sketch / mockup / wireframe tool once in a while.

The list includes the following:

  1. Wireframe.cc
  2. Moqups
  3. UXPin
  4. Fluid UI
  5. Balsamiq Mockups
  6. Axure
  7. Pidoco
  8. Visio (surprise, surprise)
  9. InDesign CC
  10. Photoshop CC (no surprise)
  11. Photoshare
  12. Penultimate
  13. Pencil Project
  14. OmniGraffle
  15. Gliffy
  16. MockFlow
  17. Frame Box
  18. FlairBuilder
  19. Justinmind
  20. HotGloo

Update (May 22, 2017): Also, have a look at this list of mockup tools.

The Difference Between UI and UX

Via this article (in Russian), I came across this blog post discussing the differences between the design of the UI (user interface) and the UX (user experience).

In many cases, the incorrect expectation is that an interface designer by default understands or focuses on user experience because their work is in direct contact with the user. The simple fact is that user interface is not user experience. The confusion may simply be because both abbreviations start with the letter “U”. More likely, it stems from the overlap of the skill-sets involved in both disciplines. They are certainly related areas, and in fact many designers are knowledgeable and competent in both.

However, despite the overlap, both fields are substantially different in nature and – more importantly – in their overall objectives and scope. User interface is focused on the actual elements that interact with the user – basically, the physical and technical methods of input and output. UI refers to the aggregation of approaches and elements that allow the user to interact with a system. This does not address details such as how the user reacts to the system, remembers the system and re-uses it.