Keep on Learning @learnwithhonee - Tumblr Blog

What are Treemaps?

Treemaps are used to visualize large data of complex hierarchies data sets that are often hard to interpret. On certain scenarios, making use of charts such as bar charts or pie chart for easy understanding.

Two types of information that treemaps capture:

Value of the individual data points

Hierarchy structure

Example:

A hierarchical tree diagram, showing the structure of the S&P 500.

You can find more information on Nielsen Norman Group about Treemaps.

#treemaps #data visualization

Bootstrap 4 is here! Exciting to explore flex and new components such as Card.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

While working on a project with Richard Amos about a year ago we were pondering the static linear nature of breadcrumbs and wondering why they should always be so. The breadcrumb serves two purposes;...

The Scotch Egg Navigation, a better alternative to the static breadcrumb navigation we often use that makes use of dropdown selections.

#breadcrumbs #ui #ux

Bootstrap Select

Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements.

You can check the documentation here.

It is very useful if you’re looking for a jQuery plugin that does multiple select and can easily style the standard select elements.

It is open-source and can be downloaded on Github -https://github.com/silviomoreto/bootstrap-select

Enjoy!

#bootstrap #bootstrap select #dropdown

jQuery for Select Boxes

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Use cases

Enhancing native selects with search.

Enhancing native selects with a better multi-select interface.

Loading data from JavaScript: easily load items via AJAX and have them searchable.

Nesting optgroups: native selects only support one level of nesting. Select2 does not have this restriction.

Tagging: ability to add new items on the fly.

Working with large, remote datasets: ability to partially load a dataset based on the search term.

Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.

Templating: support for custom rendering of results and selections.

Documentation can be found here or in Github.

#jquery #select box #search box #javascript

Standards for developing flexible, durable, and sustainable HTML and CSS.

“Every line of code should appear to be written by a single person, no matter the number of contributors.”

#css #html #style guide #code guide

by Nick Babich

Microinteractions

Microinteractions are the contained product moments that do one small task.

As first described in Dan Saffer’s book Microinteractions, these tiny details typically serve these essential functions:

Communicate feedback or the result of an action.

Accomplish an individual task.

Enhance the sense of direct manipulation.

Help users visualize the results of their actions and prevent errors.

#UX Design #microinteraction #Mobile Design #mobile app #mobile pattern #android design #iOS Design

A library of iOS and Android screenshots for designers and developers to reference.

Mobile Patterns is a great reference if you are designing a mobile app for iOS or Android.

If you are looking for iOS design patterns, check it here http://www.mobile-patterns.com/iphone/recently-added .

If you are looking for Android design patterns, check it here http://www.mobile-patterns.com/android/recently-added

#mobile pattern #ios #android #design ui #UX Design #mobile design #ios design #android design

Scan this list to see if there are any useful metrics to help measure the project / site you are working on.

“If you can't measure it, you can't improve it.” - Peter Drucker

How do we measure UX Design effort? This blog post would give you an idea on the UX Metrics and KPIs that you can choose from, which you think is relevant to what you try to measure.

I also made a blog post related to this http://www.iamhonee.com/articles/design/ux-kpi-and-metrics.html

#UX Design #kpi #metrics #ux metrics #ux kpis

Design is the process of going from an existing condition to a preferred one.

Milton Glaser

How to set container width on Bootstrap 3?

The preset .container width for Bootstrap 3 is 1170px. However, if you want to change it to 940px or 980px, there are ways on how to do it.

1. Directly change the container width on bootstrap.css to your desired width. However, the issue is if you have to make some changes. You will keep on changes the main Bootstrap file which is not good practice if you want to keep files easy to manage.

2. Another way is to set the width using media queries.

@media (min-width: 1200px) { .container{ max-width: 970px; } }

The advantage of setting it this way versus customizing the Bootstrap file is that you don’t have to change the Bootstrap file directly. For example, if you are using a CDN, you can still download most of Bootstrap from the CDN without having to worry on overrides.

#bootstrap 3 #container width #media queries

States of Design

One of the things that designers should look closely on how to execute on the user experience design is the “Loading” state.

The ideal state though is for users not to notice the “loading” state but that is impossible to do especially when different users have different disposition (slow internet, old machines, out-of-date browser etc). Thus, the best thing to do is to put yourself on the shoes of these users and think of strategies on how to deliver a good user experience design for the loading state. Facebook has done an incredible job at executing this.

The photos above shows you the different ways and design that Facebook used to handle Loading state.

#facebook #ux #design #loading #loader #lazy loading

Major League Baseball’s highest-paid player, Alex Rodriguez, does the same thing every lesser-paid player does: he pract…

Here's a good article by Jared Spool on how to improve your UX design skills by practicing. He gave some example on how you can do your practice.

#UX #Practice #UX Design

Kracken.io vs PunyPNG

Which one is the best image compressor?

I've been using PunyPNG PRO for more than 2 years now at $5 / month. I just case across PunyPNG and didn't look further for alternatives. However, I have been experiencing already some problems with PunyPNG that I started to look for a better one and I came across Kraken.io and will never switch back to PunyPNG anymore.

Why?

Simple. Kraken.io is FREE and faster. Though there are options for an upgrade, at the moment, the FREE version can still manage my needs. But in terms which ones had brother options, I can still say it's Kraken.io. PunyPNG PRO can only compress an image size of maximum 500KB per image. Beyond that, you already have to work around your image size.

Kraken.io is better, it can compress up more than that once you upgrade your Kraken.io account.

"Kraken is a robust, ultra-fast image optimizer and compressor with best-in-class algorithms."

Hope this would help designers out there looking for alternatives on which image compressor, optimizer to use.

#Kraken.io #PunyPNG #image-optimizer #image-compressor

Simple Guide in using Git

I came across this very simple guide by Roger Dudler about Git. It provides you the basic things you need to remember.

Here's the important things to remember about Git.

Check out Roger's site http://rogerdudler.github.io/git-guide/

#Git #Github #Bitbucket

How to remove Google Map address / location pop-up on mobile view?

Here's a quick fix on how to remove the google map location or address whenever you view your website using mobile.

Just add iwloc=A to iwloc=near right after the iframe. It should added after the iframe tag.

Here's the Stackoverflow message thread where I got the answer.

jQuery Mobile Datepicker for Mobile

Here's a good jQuery Datepicker fit for mobile devices like iPhone. Instead of using the usual jQuery Datepicker that shows calendar, this will show a keypad-like ui that is suitable for touch devices.

It's easy to use. You just need to add the following files:

This is a good alternative especially when you do responsive web design where mobile view is quite challenging.

#jquery mobile #datepicker

Trending Blogs

Recently Viewed Blogs

Keep on Learning