10 Essential Material Design Resources and Tutorials When Google announced Material Design, it caused a splash in the Android community and beyond. It's been a Long Road to Google's Material Design, but the journey has been worth it. Material Design is no longer new, but it's as popular as it was on launch day. Material Design has a lot of good resources, but if you are new to the concepts, you are probably wondering where to begin. The most logical (but not the easiest) place to start, is the Material Design specification itself. 50 Meticulous Style Guides Every Startup Should See Before Launching All good brands have a great style guide. Creating a simple booklet that catalogues the specific colors, type, logos, imagery, patterns, taglines, etc. of a brand makes sure the brand machine runs smoothly. To prove why you shouldn’t let your style guide go by the wayside, we’re going to take a look at 50 stunning and detailed examples of style guides that are sure to encourage you to begin compiling your own. And when you’re ready to put that style guide to work, trial it the fun way, by designing a branded social media graphic in Canva (click here). 01.
20 Best Web Fonts from Google Web Fonts and @font-face At the moment there are several ways to use non-system fonts on a website. We will focus on the two least complicated, least expensive systems, Google Web Fonts and the @font-face rule. Fear not, we have not ruled out other paid methods such as Typekit, Fonts.com Web Fonts, Fontdeck, Webtype, WebINK or Fontspring for future posts as they certainly offer high quality typefaces and deserve to be considered. It’s important to be aware that web fonts can generate inadequate visualizations on operating systems which have subpixel rendering turned off in the case of Windows XP. They can also be represented differently depending on the browser used to visualize them. The aim of this post is to facilitate the choice of a series of fonts (out of the hundreds available) whose technical and visual characteristics make them more readable and compatible with a wide variety of devices, browsers and operating systems.
Responsive Data Tables: A Comprehensive List of Solutions Tables are an important part of HTML. Although they were often used in the past for layout, today they’re mainly used for marking up data. Since the adoption of responsive web design, various approaches have been developed for establishing tables that can scale well in different viewport sizes. Bosphorus Contributed by New Zealand-born graphic designer Mike Collinge. Bosphorus is a business consultancy specialising in customer experience, human resources, IT and small business management with the aim of helping companies become more sustainable, efficient and ultimately profitable. Bosphorus is named after the stretch of water running through the middle of Istanbul dividing Europe from Asia. Roughly translated, it describes an ox fording a river. A bous (bos) is Greek for ox, and poros (phorus) means to ford or to ferry.
Hamburgers by Jonathan Suh Table of Contents Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Sass DHTML Style Guide Working Group – AOL Access The DHTML Style Guide Working Group (DSGWG) has come together to create a recommendation for keyboard shortcuts to be used in website widgets. We realize that many keystrokes are already in use by various operating systems, user interfaces, and assistive technology. Therefore our task is to recommend the best, most intuitive, most international friendly shortcut keys possible without regard to their current use. It is hoped that developers, AT vendors, and Browser manufactures will use these as guidelines, but understand it may not be practical or possible given their individual constraints.
Front-end Style Guides Creating and Maintaining Style Guides for Websites Style guides, once the exclusive domain of print designers, are now finding their way onto the web. In this book, you'll learn about the style guides that have been created specifically for websites, and how to make and maintain your own. Designers and developers have taken different approaches to putting together their own web-based style guides. This book highlights the various techniques and the projects that have used them.
Material-UI We recommend that you get to know React before diving into Material-UI. Material-UI is a set of React components, so understanding how React fits into web development is important. If you're already familiar with single page applications (SPAs) and Node, feel free to skip the prerequisites and head straight to the installation part. Otherwise, what follows is a quick and brief introduction to SPAs and Node. Front-End Style-Guides: Definition, Requirements, Component Checklist Summary: Front-end style-guides help efficient design and testing, and enforce UI consistency. We present 8 style-guide requirements and 25 common components. What Is a Front-End Style Guide?