Web Colors Tutorial

8 Tips for creating bulletproof color schemes.

This article is brought to you by Buninux.com.
Visit our premium asset store and level up your design inventory. ☟

Buninux — How to create a better UI color palette.
Buninux — How to create a better UI color palette.

Intro

Color is everywhere. Working with color is an essential part of any brand, and a modern interface strives for its recognition. Therefore, choosing and using colors to achieve business goals can be challenging for any designer.

The choice you make affects the look and impacts how the customer feels about your product and business. Here are my practical tips on creating a bulletproof UI color scheme to help you make the right choice.

1. You must choose. But choose wisely

Define your primary colors.

The primary color is the first thing you should decide on. …


Sketch & Figma Freebie

Instagram Carousel Template for Sketch & Figma

I see a big trend among designers — posting carousels on Instagram. But I can’t get myself used to post there. So, I decided to do a bit of research and create a template for my future content to help myself.

So today, I want to share my small Carousel Kit for Sketch & Figma. 😊

Instagram Carousel Template
Instagram Carousel Template
gum.co/igcarouseltemplate

This resource is brought to you by Buninux.com.
Visit our premium asset store and level up your design inventory.

The Idea

The idea behind this freebie is to establish a workflow for preparing my own Instagram content. …


440 Super Basic Icons to Help You Design Clean Interfaces.

Hello! Glad to present to you the Super Basic Icons ✶.

SBI is a set of high-quality symbols created especially to fit modern interfaces, websites, and applications.

SBI differs from most icon packs on the web with the ability to live edit stroke thickness and style — which is a real time-saver when you need to adapt any of your project icons to numerous sizes, products, or interface states.

All icons ✒ use a single line style and a 24px grid to relay sharp visual metaphors that are clear and simple to get.

For the best experience, the pack is divided by interface categories with a multi-tag name structure to help you find the right icon much quicker within the favorite design tool. …


Sketch app templates

A collection of resources for aspiring UI/UX Designers.

Hi! 👋
In this post, you will find useful templates to help you create well-known design components, such as tables, buttons, mockups, and charts, as well as assists in setting up typography and grid for your next project in Sketch.

Image for post
Image for post

This collection is specially made for aspiring UI/UX designers and everyone interested in Sketch app basics functionalities in 2020.

Feel free to download, play, break, or use these bite-sized templates on your own design will.

If you enjoy any of this, you can support me by visiting the asset store. ♥️

Smart Buttons

The template includes two types of buttons: with and without an icon, both made using advanced Sketch features, such as smart layout, library styles and overrides. …


Sketch & Figma Tutorial

Tips and tricks on transferring a design kit from Sketch to Figma.

This guide is made due to a loud trend among product teams and designers, a transition from Sketch to Figma.

In this article, I want to highlight the common pitfalls and uncover several tips on how to seamlessly transfer your precious design assets from one excellent design tool to another.

Image for post
Image for post
🏀https://dribbble.com/shots/7026719-From-Sketch-to-Figma

This article is brought to you by Buninux.com 🤘

Check out the latest project I’ve been working on, called Slice — it’s a super cool and useful design system for Sketch and Figma.

Why these tools? 🛠️

Sketch and Figma are great for creating UI and organizing components libraries. …


Sketch Tutorial

Setting up a modular design system.

In this article, I will guide you through all the necessary steps and features to properly set up and use Slice in Sketch at its maximum potential.

Image for post
Image for post

Guide contents:

  1. 👀 Overview
  2. 📦 Installation
  3. 🎨 Changing Colors
  4. ✏️ Changing Fonts
  5. 🔪 Using components
  6. 🧩 Naming and Extending

1. Overview

Slice is a Modular Design System shaped from separate UI libraries. Its main purpose is to serve as a project boilerplate and provide you with all the necessary building blocks to create stunning websites and apps.

By Modular, we mean, that the whole system is intelligently partitioned into sustainable modules like Core, Controls, Navigation, and Cards.

Keeping components in separate modules makes Slice much easier to use with different brands and user interface circumstances. …


Empower your workflow in Sketch and Figma.

Say Hello 👋 to Slice Design 🎉 🥁 We’re excited to introduce Slice — our newest Modular Design System for web and mobile with over 760+ components to boost your daily workflow.

We have put all of our efforts and expertise to create a truly outstanding design product that we hope every designer would love to use.

Image for post
Image for post

With Slice, you can swiftly design stunning websites and apps, while taking into account the most stringent requirements for design system organization, best UX patterns, beautiful and comfortable styles, and much more.

Our goal was to create a versatile product to empower both experts and beginners to design better! …


Sketch Tutorial

Setup, customize, and reuse a mobile design system for a Sketch.

Hi! In this article, I will guide and introduce you to Plaster, a toolkit for creating mobile interfaces in Sketch.

Image for post
Image for post
https://dribbble.com/shots/6714384-Get-Started-with-Plaster

With Plaster, you can easily apply on practice rules from Material, & iOS guidelines to design beautiful and usable applications.

Plaster strives to bridge the gap between Android and iOS design principles. By making mobile patterns as open as possible for customization and repeated use with a versatile set of ingredients bound in a single workspace to meet product goals, regardless of the platform.

This guide is meant to show you the basics of customizing and scaling the system to properly fit it into your design process and brand successfully. …


Sketch Tutorials

List of plugins to create beautiful things with Sketch.

Hi, did you know that in addition to user interfaces, Sketch can be used to create cool looking graphics? This is specially made possible thanks to a vast community of talented developers who cut-through window to creativity into masses, allowing anyone to do crazy things with just a couple of clicks.

Therefore, I would like to keep here a list of extensions to assist in creating illustrations, patterns, gradients, and bring beautiful graphics details to your canvas. 👨‍🎨

The article is provided by Buninux.com


Sketch Tutorials

List of useful tricks to overcome software limitations and better operate your favorite assets.

This article is dedicated to techniques whom I discovered in the process of creating new products for Buninux.com.

Plugins have become an integral part of the designer’s workflow allowing to close numerous gaps by combining multiple plugins into a single workflow for managing libraries and assets.

New extensions come out very often, so I would like to consider the few that deserve attention and will complement your toolkit with solutions to original use-cases. 🧐

Image for post
Image for post
🏀https://dribbble.com/shots/6355760-Sketch-Tools-for-Managing-a-Design-System-2

Mass Symbol Import

When you in a rush and need to sketch a prototype super fast, it’s a good idea to squeeze some juice out of a UI kit you have downloaded a while ago. …

About

Buninux

Design Articles & Tutorials. Author — buninux.com, robowolf.net, slice.design.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store