Browse Category

Web Design

Web Design | Blog on Web Design, API Integration, Web Design Trends & Web design inspiration

UI Components Handbook

No matter what kind of UI component you’re working on, there’s no need to reinvent the wheel. To make your work easier and shorten research time, the folks at UI Guideline analyzed some of the most popular design systems and UI libraries to standardize the design and code of more than 40 UI components. The result is the UI Components Handbook.

For each component, the handbook gives you an overview of real-world examples, anatomy, grouping, and properties of the component. The cherry on top is a ready-to-use Figma component that includes all the best practices and the ready-to-use HTML code that you can use as a starting point to code and style your own component.

https://www.uiguideline.com/components

Dashboard Design Patterns

Dashboards present complex data sets at a glance. But what does effective dashboard design look like? How do you find the right balance between displaying everything that’s important and ensuring the dashboard is easy to use without overwhelming the user?

The interdisciplinary research lab VisHub at the University of Edinburgh published a set of dashboard design patterns to support the design and creative exploration of dashboard design. It dives deeper into every aspect of dashboards — from components and meta information to visual representation, interaction, and page layout. 

https://dashboarddesignpatterns.github.io/patterns.html

Good Design Principles

Establishing a set of design principles for a project or brand can help teams create more consistent user experiences. They aid decision-making and make it easier to keep the product aligned. If you plan to establish a set of design principles for your product, we came across useful resources that will help you get started.

Ben Brignell curates an open-source collection of 195 design principles and methods. It features both heuristic design principles and design principles developed by companies specifically for their products. All of them are searchable and tagged, from hardware and infrastructure to language and organizations.

https://principles.design/

JavaScript frameworks security report 2019

The folks at Snyk published their state of JavaScript frameworks security report for 2019. It investigates the state of security for the Angular and React ecosystems as well as security practices for the popular JavaScript frameworks Vue.js, Bootstrap, and jQuery. Given the fact that Angular and React both have their proponents with ongoing discussions whether one or the other is a true framework, the report doesn’t intend to venture into rivalries but reviews each of them as viable front-end ecosystem alternatives, while focusing on security risks and best practices and the differences between them.

Read more: https://snyk.io/blog/javascript-frameworks-security-report-2019/

How to GraphQL

GraphQL enables a client to specify exactly what data it needs from an API, so instead of multiple endpoints that return fixed data structures, a GraphQL server exposes a single endpoint and responds with precisely the data a client asked for. If you want to wrap your head around GraphQL, here are two great resources to get you started. How to GraphQL is a free open-source tutorial to take your GraphQL skills from zero to production. Divided up into two parts, part one covers the core concepts of GraphQL while part two gives you a broader understanding of the GraphQL ecosystem.

Read more: https://www.howtographql.com/

Having fun in Infinitown

Do you enjoy WebGL tech demos? Imagine a little town with perfectly square city blocks, a park, a coffee shop, a factory, a gas station and cute little homes. Cars and trucks are driving through the streets, but as you navigate through the town, you realize that there’s a twist: no matter where you go, you’ll never reach the town limit.

Infinitown is a WebGL concept made by the team at Little Workshop. It’s an attempt to create a city that is alive and fun to watch.

How it was done: Little Workshop generated a finite grid of random city blocks, then the viewpoint wraps around this grid, and thus makes it seem infinite.

Check it out here: Infinitown

Tools used: Three.js, Blender, and Unity

 

The biggest checklist for of inclusive design…. ever!

…ever?? Yes!

A lot of aspects add up to an inclusive web experience. Considerations that might not come to one’s mind in the first place — like the use of inclusive language or providing alternatives or descriptions for complex visualizations.Or, accessible considerations such as providing transcripts for audio content.

To get your site on the best track of becoming truly inclusive, the magical Heydon Pickering has put together an Inclusive Design Checklist. The biggest and most comprehensive one available. It includes items for accessibility, performance, device support, interoperability, and language.

Do check it out!

 

Really Good UX

Often, it’s the small things that take a user experience from good to memorable. This could be a useful tooltip, a straight-forward registration flow that doesn’t ask for the world, a simple checkout process or a useful way you’re being upsold products.

For UX designers, it is important to stay up-to-date with the latest trends and to stay inspired with examples of outstanding UX. 

I came across a site called Really Good UX which is collecting some amazing UX details from around the web and explains what makes them so good. Definitely worth having a look!

Let me know what you think! 🙂