Tag Archives: web

Top 10 Material Design Frameworks for Modern UX/UI Design

Are you building websites, web apps or mobile apps without using one of these super helpful material design frameworks? May be it is the right time to look at this list of material design frameworks and start using one to speed up your design workflow, and to create material design compliant UX/UI.

The biggest advantage of using an existing material design framework is that you get ready to use material design compliant CSS and components out of the box, and spare yourself from building components and css from scratch.

There are many production ready material design frameworks out there in the wild, available as open source, free to use, including Materialize css, Material-UI, Bootstrap material design, Angular Material and Polymer to name a few.

Before moving to the details of these Material design UI frameworks, let us talk very briefly about what material design is, why it came into existence and where is it taking the modern UX/UI design.

Back in 2014, Google released the first of its kind visual design language in an attempt to standardize the design of chrome OS, web apps, Android apps and its own iOS apps. These guidelines were released because it was important for Google to set standards for developers and designers in the world of open source design & development.

Within months of its release, Material design became so popular that not only Google ecosystem but the web as a whole has transformed into all new look and feel inspired by material design principles. Web designers from across the globe have started to use material design css and components for individual projects and big design houses have built web development frameworks around material design guidelines to shorten the design life cycle.

Here is the list of best 10 material design frameworks available as of today, open source and free to use. You can pick one that suits best to your requirements, you might favor one over the other depending on whether you are historically a Bootstrap lover, Angular fan, ionic developer or believe in building websites, web apps and mobile apps from scratch.

1. Materialize css

Materialize is among the first few web frameworks that offer css and components built as per Google material design guidelines. It is the creation of students from Carnegie Mellon University and is available as free to use, open source framework, under MIT license.

Materialize css is a complete package for small projects as well as for building large scale responsive websites and HTML5 hybrid mobile apps. It includes css for color, typography, tables, grids and also helper classes etc. to name a few. Materialize css also comes packed with css to embed responsive images and videos the design. The framework is detailed to the level that it includes css classes even for vertical alignment of elements on the webpage.

When it comes to ready to use material design compliant components, Materialize includes Navbar, badges, buttons, forms, pagination and cards etc. and JavaScript implementation includes dialogs, parallax, modals, waves, tabs, pushpin, sidenav, ScrollFire etc., to name a few.

There are many projects using materialize css framework and running in production, check them out in action at – Materialize Showcase.

Materialize framework is built using SASS,  one can download source scss files and include selective css and components as per the project needs, download ready to use minified versions of complied CSS and JavaScript as well as refer css and javascript files from the cdn.

Read more about Materialize CSS at the official website – materializecss.com.

2. Material-UI

Material-UI is another very professional grade and cleanly built framework that implements Google’s material design. This one is the creation of engineers at Call-Em-All and they are currently using it in their own projects.

Developers of the framework have made it available as open source under MIT license and they are maintaining it actively to ensure changes or new additions in material design guidelines are incorporated.

Material-UI components run on top of Facebook’s Reactjs library. Everything in the framework is a React component except for basic CSS classes for material colors and typography etc. This makes it a little difficult for non-programmers since one need to have a fair understanding of JavaScript, JSX syntax and basic React concepts.

Framework is pretty much customizable and you can override style for most of the components by passing custom CSS classes as props (reactjs vocabulary) to the component under consideration. Roboto fonts are at the core of Material UI framework for a clean modern look and feel. Framework is built in less but sass version is available as well for download.

Material UI is available as npm package, you can download the free material ui package here- material-ui package.

Read more about Materialize CSS at the official webpage – material-ui.

3. Bootstrap Material Design

Built by Federico Zivolo, this one is definitely for all the bootstrap fans and also for anyone who is planning to start afresh with a new web project. It would not be completely right to call it a framework since it is a theme built using bootstrap 3 that implements Google’s material design.

It comes packed with components and css compliant with material design guidelines and is so customizable that you can create almost any layout and achieve any design just by making minor configuration changes.

Bootstrap Material Design offers best of both the worlds, Bootstrap as well as material design. Bootstrap is the best web framework if you want to build a responsive website at lightning speed and material design is the design philosophy that is raging at the moment.

You get Bootstrap elements dipped in material design, these include tabs, navbars, typography, buttons, progress bars, sliders, panels, bootstrap ready to use layout, grid system, responsive css3 and anything else that is material design.

This is a definitive go without a second thought if you are among those who do not believe in building websites from scratch. Get the theme here and you are all set for your next web project with material design based UX/UI.

Read more about Bootstrap Material Design theme at bootstrap-material-design.

4. Angular Material

Running under the hood of AngularJS, Angular Material is a complete framework that implements Google’s material design and provides reusable, accessible and well tested UI components based on material design.

Available as open source under MIT license, Angular Material is created and maintained by none other than Google’s team who created material design guidelines in collaboration with Google’s Angular framework developers.

As you can expect, a framework in the Angular ecosystem would run on directives. All material design components are available as angular directives and services, behavior of components can be controlled by the use of attributes.  An example would look something like below –

<md-button ng-disabled=”true”> Disabled Button </md-button>

You can customize typography, colors and other components using the themeing layer of the framework. Angular Material also features grid system based on flex using which you can create any possible web layout you can imagine.

Angular material package is available on GitHub and can be built using npm and Gulp, or alternatively, you can get the distribution files and install locally using Bower. CDN version of Angular material is available as well on Google Hosted Libraries.

Read more about Angular Material at official website at – material.angularjs.org.

5. Polymer

Polymer is based on web components, the technology from W3C that allow to bundle up html, CSS and the behavioral elements in a fully encapsulated package which can be reused across the web by anyone.

Polymer comes packed with collection of custom web components that implement Google’s material design. At the core, you get paper elements collection that includes paper-button, paper-checkbox, paper-action-dialog, paper-dialog-base, paper-dialog transition, dropdown, menu, ripple, shadow, you name anything material design and you get that in Polymer.

Polymer is one of the cleanest implementation of material design and is future proof since it runs on web components, the support for which is inherent to all new web browsers. Read more about Polymer at official website – polymer-project.org.

6. MUI

MUI too is available under MIT license, free to use, open source but is still work in progress. It is a very small package and not yet in the league of professionals. Framework is built grounds up with pure JavaScript. However, ReactJS and web components version is on the way for greater flexibility and wider compatibility.

You have the option to customize material design colors, breakpoints and font settings etc. by making changes in the source Sass files available in the package.

The framework is under active development, not production ready yet but the roadmap looks very promising and one can definitely look back at MUI after a couple of months to give it a try.

Read more about MUI framework at – muicss.com.

7. Ionic Material

Ionic is an advanced framework for developing hybrid applications in HTML5, it is open source and free to use under MIT license. Ionic Material is aimed at developers working on ionic framework and is available as an extension library. This essentially ensures that ionic hybrid app development workflow remains the same and ionic developers get an option to incorporate material design experience in hybrid mobile apps, out of the box.

One of the key differentiator of this framework is that motion, ink and depth is created using hardware accelerated CSS which gives you a big advantage in terms of performance. Other features include

  • Ink effects as you interact
  • Option to extends Ionic classes
  • Option to easily integrate with ionic directives
  • Option to develop reusable themes around it.

If you are an ionic developer, there is no reason to look around for other material design frameworks or putting in efforts to create your own libraries from scratch. IonicMaterial is professional grade and actively maintained web development framework that seamlessly fits into ionic app development workflow.

You can check IonicMaterial in action here – ionic material demo.

read more about ionic material design at  official website – ionicmaterial.com.

8. LumX

This is another framework for Angular fans, built with Sass, Bourbon, Neat, jQuery and fuelled by Angularjs. Angular developers already have Angular Material which is top of the grade material design implementation but expect nothing less from LumX, created by Google cloud platform experts, LumaApps.

LumX is fully responsive framework and uses core jQuery without any additional plugins to ensure better performance. This framework is still improving on and has a clear roadmap defined, let us see how well it competes with Angular Material and other material design frameworks in the days to come.

Read more about LumX at official website- ui.lumapps.com.

9. Nt1m/material framework

Nt1m is the creation of Tim Nguyen, it is a simple responsive css only framework that can be used in any web page or web app. Tim has taken a different approach and created css only implementation of material design components, to the extent possible.

This is a great effort and an absolute fit for small projects and for web designers who do not really like to play around with JavaScript. You just need to include the material.css file in your project or the minified version of it.

Read more about Nt1 material framework at nt1m.github.io, or download the css at – material-framework.

10. Paper

Paper is a customizable theme that implements material design using Bootstrap, icons from font awesome and web fonts from Google. This is one of the themes offered by Bootswatch.com, created by Thomas Park and available to use under MIT license.

Like Bootstrap material design, this one also gives you a head start with any new project, you get material design flavored base theme, ready to use, and options to customize it and make it the way you would like to.

Know more about Paper Material Design theme at – bootswatch.com/paper, or get the theme here at Github.

Final Thoughts

Material design is raging at the moment and the whole web and mobile ecosystem is undergoing a mass scale redesign influenced by Google’s material design principles. Frameworks around any new design paradigm are necessary and that is what we are witnessing here with material design.

Vía NoeticForce

Good web design is crucial for making the right impression

First impressions are important… Presentable clothes, matching accessories, getting to meetings on time – it all matters. It shows people around you that you care.

Online, first impressions matter too. Website visitors make judgements about website credibility in as little as 50 milliseconds, and one in five website visitors will leave your website, not giving you a second chance.

Staying on top of the current trends makes it possible to create a website that will impress your audience, and will hold users attention for the first crucial 10 seconds, and beyond.

So what are the Web Design trends for 2017?

First things first. Web design is not art.

Art expresses feelings, raises questions, provokes emotions. By contrast, design helps people to find answers, take action, or complete a task.

More than ever before, everything in web design, from imagery to navigation, to content, must serve a purpose. Many websites are now decades old, and some have collected huge amounts of clutter along the way. If you are redesigning an existing website, start with a clearout (content audit), and focus on what’s important by mapping key customer journeys. If, on the other hand, you are building a website from scratch, consider wireframes, sitemaps and top tasks as your starting point. Prioritise clarity over absolute completeness.

New, decluttered WWF homepage.

Persuade with numbers

Numbers project confidence. A web designer that built 60 websites comes across as more competent than the one who has ‘many years experience in the industry’. A company that has offices in 4 countries seems more established than the one with ‘international presence’. Even when the numbers are not very meaningful, being precise and specific still works. Carolyn Mendelsohn, an award winning photographer, owns 321 snow globes. How about that?

Carolyn Mendlesohn, award-winning photographer and author of widely acclaimed In Between series

Grids, frameworks and pre-made themes

As CSS frameworks and grids mature, more and more coders use them as a basis for their web development work. They allow beginner coders to step up their game and they help digital agencies to streamline their production. Frameworks might sometimes contribute to bloated code but they cut down development time and take care of responsiveness, which makes them a good choice for many digital projects.

In addition to Bootstrap, UIKit and Foundation, which have been around for a while, new front-end development frameworks such as Suzy, Jeet and Breakpoint are also getting traction.

Pre-made themes from EnvatoMarket and TemplateMonster can also be a valid choice. Developers of paid templates tend to respond to customer feedback and continuously iterate their product, so some of the most popular themes have now gone through many improvements, to become what they are today.

Smithsonian magazine uses Suzy framework which offers on-demand grid.

Flat Colors

Google Material Design was first introduced in 2014. It’s a set of principles and best practices for web designers and mobile app developers. Google Material Design is about going back to basics, focusing on what’s important, but still accounting for multiple resolutions and devices – an over-engineered simplicity, if you like.

Google Material Design with its flat colours isn’t the only approach to web and mobile app design but it continues to be popular and trendy. Fabulous app, Google Material Design Awards winner, is a remarkable example of Google Material Design principles at its best.

Fabulous is a mobile app that helps you to establish healthy habits.

Authentic images

The overriding rule with regards to choosing effective images for web is that they have to be relevant and genuine. When choosing images, think about the following:

  • Product
    Are product images appropriate and useful? If so, this should be your first choice.
  • People
    Can you use an authentic image to tell a believable story about people using your product and benefitting from it?
  • Quality
    How can you show that your product is of good, or superior, quality? Can you show the craft, the expertise or the materials that make it great?
  • Ethics
    Are you charitable, ethical, organic, green? Does your business give back to the community? Does it make the world a better place?

Overused staged photography will make your website look dated. Choose realistic images that portray real world and real people. Use new perspectives: selfies, feeties, drone and head-on camera pictures and videos. Try full-screen approach, with the image occupying the whole screen.

Christian Betancourt is e-sports, portrait, landscape, and lifestyle photographer

Video

If a picture can tell a thousand words, then video must be even better, right? Homepage background videos can tell a story behind a product or service within seconds – Evernote, Airbnb and Loyola Marymount University are notable examples. For longer, more sophisticated video stories in web design, have a look at edstafford.org and silenza.it (It’s worth noting that mobile versions of these websites do not display videos.)

Navigation

Humans can hold between 5 and 9 items in their short term memory. A landline number such as 496 0926 is relatively easy to remember, but something a bit longer like 07700900546 is far more difficult to retain in your memory. That’s why, for a long time, web developers and UX designers strived for a maximum of seven menu items (7±2) in the website navigation. But that’s changing.

The number of visible, main menu navigation items is now reduced to the absolute minimum. Paypal has only three visible items in their primary navigation. Tate have reduced the number of items in the main navigation from 11 to just 3 during their most recent redesign in 2016. Laterooms redesigned it’s homepage in 2015 to focus solely on the booking process.

Continued influence of the mobile design means that hamburger navigation icon is more popular than ever. The jury is out on the effectiveness of this approach – it’s not just the meaning of the icon, but the size and visibility of the three lonely lines that affect the usability of the hamburger approach. Research and A/B testing seems to show that hamburger lines combined with a MENU label – such as the one on Adobe website – works significantly better than the hamburger icon alone.

Sticky navigation, such as on Pexcard by Rockpool Digital is still popular, and so are mega-menus – Museum of London built by WebCredible is a good example.

Museum of London was redesigned by Webcredible in 2016

Performance and intelligent analytics insight

Average weight of the homepage across the websites reviewed in this article is approximately 3.5MB. With all the high resolution images, interactive scripts, font replacement techniques, webpage performance requires special consideration. “If you can make the site load a second faster, you can drive engagement by 5%” according to Financial Times. Note the use of engagement as website metrics in this quote. Intelligent insight that goes beyond page views and unique visitors is increasingly important for understanding what works and what doesn’t on your website.

The aims of Financial Times redesign are shorter page load times, increased engagement, and better personalization.

The blend of personal and professional space, integrity, ethics

The line between the personal and professional space is not as clear as it was in the past. What we hear about business leaders on Facebook and Twitter, is often less formal and more in-the-moment than press releases and company’s own marketing materials. Integrity, ethics, telling people who you are, not just what you do, is more important than ever before.

Educate & Celebrate advises schools on LGBT and inclusion best practices.

Conclusion

In summary, modern websites of 2017 will use authentic images and full-width or full-screen layout to portray genuine, passionate, ethical people and products. Primary navigation will be reduced to the very minimum, and other links will be available through the ‘hamburger’ navigation, mega-menus and contextual navigation. Great websites of 2017 will use direct, persuasive language and will use numbers to demonstrate their achievements. Responsiveness, micro interactions and large, bold images continue to dominate the web, but they are only effective if website performance and page load times are reasonable.

Best of luck and have a well designed 2017!

Web@Explorer: Noticias Alrededor de la Red V 1.0

Explorando la red, ponemos estas notas de interés donde podrán encontrar cosas curiosas de una red de redes que cada día esta mas compleja en todos sus aspectos…. directo de Facebook para el mundo…

 

 

 

 

 

 

 

 

 

 

La historia del Hombre Michelin

El hombre Michelin ha sido un icono de la marca desde hace poco más de un siglo, creando un símbolo que ha sido muy bien manejado por distintas agencias de medios, desde luego adaptando el personaje a través de los tiempos y creando algo que ha evolucionado y cambiado para adaptarse a los nuevos tiempos.

Aquí les presentamos una pequeña historia de su origen, acompañadas de imágenes vintage de las campañas que han durado ya más de 100 años.

Cuenta la historia que en la feria universal de 1894 en Lyon, los hermanos Michelin montaron un stand para promocionar sus productos. En el una pila de sus neumáticos evocaba una figura inusual por lo que Édouard dijo a André que la pila podría ser un hombre si brazos le fuesen añadidos, este momento sería recordado por el años más tarde.

En 1898, cuando viendo un anuncio ilustrado por O’Galop, André Michelin tuvo una idea: Porque no reemplazar el gigante barbado levantando su tarro de cerveza por un hombre hecho de una pila de neumáticos y tomando una copa llena de vidrios rotos y clavos. La frase en latin del poeta Romano Horacio, “Nunc est Bibendum” que se traduce como “Ahora es tiempo de beber” fue usado para el nuevo personaje.

El nuevo personaje se adapto muy bien a una vieja publicidad que  decía ” Salud, La llanta Michelin se bebe los obstáculos , un slogan lanzado años antes para convencer a los ingenieros de los beneficios de las llantas neumáticas.

Sin mas preambulo les presentamos estas interesantes muestras de 100 años del Hombre Michelin.


 

 

 

Vía Logo Design Love

El poder del HTML5/CSS ejemplos de páginas creativas

El poder del HTML5 es increíble… En realidad pocas cosas que antes fuesen posibles con tecnologías propietarias ahora son posibles con soluciones libres y un poco de empeño…

Y pensar que hace pocos años Adobe y sus ofertas multimedia aún dominaban el mercado…

Falto que el mercado se volviese mobil para qué la perspectiva entera de la industria cambiase con el.

Muestra de ello son estos magníficos sites hechos en HTML5/CSS por buenos creativos de la industria que nos prueban que se pueden conseguir resultados de alta con herramientas libres… Para inspirancia un poco de buen HTML en el Geekcast…

Vía graphic design junction y otros
Blogsitos

 

Mitos geniales del Marketing web

Durante una sesión del Mashable Media Summit, Ricky Van Veen co-fundador de CollegeHumor, dio una charla sobre las leyendas urbanas que circulan en torno a los contenidos que se suben a la Web, y citó diez de ellas, de las que conviene tomar buena nota para no engañarnos:

La gente querrá ver contenido de calidad: Según Van Venn, lo primero que hay que hacer es preguntarse porqué alguien querría ver ese contenido. Si no se puede responder, entonces es mejor no subirlo a la Red. Y añade que los contenidos con marca registrada necesitan ser flexibles ya que cuantos más niveles de burocracia haya, más estéril será el contenido.

La gente será paciente con su contenido: El 35% de la audiencia se irá tras los primeros 30 segundos. Elimine las barreras para acceder a su contenido.

La gente encontrará su contenido: Las empresas quieren la llamada “fiebre del vídeo viral”, básicamente, marketing basado en la fe. El 95% de las visitas vendrá de Youtube de todas formas, por lo que Ricky Van Veen recomienda subir allí su contenido. Internet no es como la televisión donde se pueden poner anuncios y esperar a que la gente los vea cuando cambian de canal. También aconseja formar equipo con marcas establecidas y reconocidas para ganar credibilidad.

Internet es un campo de pruebas o de juego: Un link a una web de opinión envía más tráfico que el blog de un empleado. Hay que darse cuenta de que en la arena de las redes sociales, hay sitios y personas con un gran tirón que conviene aprovechar.

No tengo ni idea de porqué las cosas son virales: No hay reglas para hacer un vídeo de marketing viral, aunque estos vídeos tienen una característica en común: el usuario tiene alguna razón para pasarlo a sus contactos. Por ello, conviene centrarse en la persona que ve el vídeo y no en el vídeo en sí. Aún así, Van Veen desvela las claves que él emplea: 2-3 minutos máximo de duración, el gancho en los primeros 20 segundos, un título clarificador…

La experiencia conduce la documentación: Hay una nueva generación que pone la documentación por encima de la experiencia. Documenta ahora, la experiencia más adelante. Si se es un “marketiniano”, es bueno crear experiencias que muestren lo “guays” que son sus usuarios.

Debería crear su propia comunidad y herramientas: Hay personas que están construyendo cosas impresionantes. Si usted puede usarlas, debería crearlas.

Mantener las cosas de manera profesional: Cuando las empresas producen contenido, normalmente no quieren mostrar a las personas que están detrás de las escenas. Van Veen cree que mostrar el proceso de creación reforzará la marca de la compañía.

Los medios tradicionales no son relevantes para la Web: No es verdad. La televisión y los periódicos todavía importan y todo el mundo los tiene y compra. Hay que aplicar los medios tradicionales a los nuevos medios.

La gente creará buen contenido para usted: Hacer que la gente cree contenido es difícil. Hacer que creen buen contenido es aún más difícil.

Vía Computing.es