Tag: Kits


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
2-frontend-boilerplates-starter-kits
10 Jun

Useful Front-End Boilerplates And Starter Kits

by TBSCategories: News

Today, we’re shining the spotlight on boilerplates and starter kits for all kinds of projects, from static site templates and React/Vue starter kits to favicon and accessibility templates and emergency site templates. This collection is by no means complete, but rather a selection of things that the team at Smashing found useful and hope will make your day-to-day work more productive and efficient.

If you’re interested in more tools like these ones, please do take a look at our lovely email newsletter, so you can get tips like these drop right into your inbox!

Table of Contents

Below you’ll find quick jumps to specific boilerplates and guides you may need. Scroll down for a general overview or skip the table of contents.

Accessibility Boilerplate

To prevent accessibility from becoming an afterthought, it is a good idea to already lay the foundation when beginning a web project. So if you’re looking for a boilerplate solution to kickstart your project responsibly, the Accessibility Boilerplate is for you.

The template uses plain old semantic markup to correctly structure your content, making it easily accessible by search engines and assistive technologies. The HTML5 syntax is further enhanced with ARIA roles and Microdata. An oldie but goodie.

In case you need a little bit of help with WAI-ARIA, this collection of accessible snippets will sure come in handy. The snippets include all WAI-ARIA attributes and descriptions to help make your content more accessible. To help you resolve existing accessibility errors, Jacob Lett put together a collection of snippets for reducing redundant title text, dealing with empty links used for JavaScript behavior, and bringing meaning to visual elements like icons.

ASP.NET Boilerplate

The ASP.NET Boilerplate uses familiar tools to provide you with a solid developer experience when building modern web applications. Based on domain-driven design, it provides a strong infrastructure and development model for modularity, multi-tenancy, caching, background jobs, data filters, setting management, domain events, unit and integration testing, and everything else you’ll need to have more time to focus on your business code. Startup templates help you get started — either with an Angular single-page application or classic MVC & jQuery architecture.

Another fully-fledged boilerplate is the ASP.NET Core Hero Boilerplate. It enables you to run a single line of CLI on your Console to get a complete implementation. The template includes both WebAPI and MVC. A perfect starting point to learn about various essential packages and architecture.

Browser Extensions Boilerplate

Do you plan to build a browser extension? The Browser Extension Webpack Boilerplate has got your back. Designed for creating WebExtensions API-based browser extensions using Webpack, the extensions are, in theory, compatible with Chrome, Chromium, Firefox, Firefox for Android, Opera, and Microsoft Edge. Actual compatibility will depend on the APIs you used.

Modern Cross-Browser Extensions Boilerplate

Things that seem trivial in the web development world can turn out to be surprisingly hard in a web extension context. Especially when it comes to cross-browser extensions. To give you the experience you know from building cross-browser web apps when developing cross-browser web extensions, Cezar Augusto built extension-create.

extension-create helps you develop cross-browser extensions with built-in support for module import/exports, auto-reload, and more. There’s no build configuration necessary: To create an extension, a new browser instance (for now, Chrome) will open up, and you’re ready to dive right in. Each command and major feature works as a standalone module which is particularly useful if you have your extension setup but want to benefit from specific features, such as the browser launcher with default auto-reload.

Modern CSS Resets And Their Alternatives

With CSS browser compatibility issues being much less likely today, CSS resets have mostly become redundant. However, there are instances when a modern CSS reset might still make sense. Box sizing, body styles, links, fluid image styles, fonts, and a @media query for reduced motion, these are things you might want to reset, as Andy Bell shows. A modern reset of sensible defaults, so to say.

Another modern alternative to CSS resets is Normalize.css. It normalizes styles for a wide range of elements, corrects bugs and browser inconsistencies, improves usability with subtle modifications, and it uses detailed comments to explain what code does.

CSS Boilerplates And Snippets

Are you embarking on a smaller project or do you feel that a larger framework is overkill for your needs? Barebones only styles a handful of standard HTML elements and CSS Grid, and, as it turns out, that’s often more than enough to get started. With its approximately 400 lines, the boilerplate is light as a feather, and there’s no compiling or installing necessary to get you started.

The CSS snippet collection by 30 seconds of code contains utilities and interactive examples for CSS3. Whether it’s custom checkboxes, menu overlays, or button animations, the collection has got you covered with useful snippets for layouts, styling and animating elements, and handling user interactions. CodeMyUI also features a collection of pure CSS code snippets for user interfaces — some of them with quite fancy effects.

Color Themes For Your Dev Environment

Have you ever wished for a streamlined color theme across your entire development environment? One that you feel is pleasant for the eyes and that stays the same when you switch from your code editor to the terminal across to Slack? themer helps you achieve just that.

themer takes a set of colors and generates themes for your development environment based on them. You can either start with a pre-built color set or create one from scratch by entering two main shades for background color and foreground text and accent colors for syntax highlighting, errors, warnings, and success messages. Once you’re happy with the result, you can download the themes you want to generate from the palette — different terminals and text editors are supported, just like Slack, Alfred, Chrome, Prism, and other tools and services. To make the color coordination complete, there are matching wallpapers based on your theme, too.

Bootstrap Your Dotfiles

Dotbot helps you install dotfiles with just one short command, even on a freshly installed system. It is designed to be lightweight and self-contained (no external dependencies or installation required) and can be used as a replacement for any other tool you were using to manage your dotfiles. Dotbot uses YAML or JSON-formatted configuration files to let you specify how you set your dotfiles and it knows how to link files and folders, create folders, execute shell commands, and clean directories of broken symbolic links. User plugins are supported for custom commands.

If you want to dive deeper into dotfiles, the Awesome Dotfiles list features helpful articles and tutorials, as well as example dotfile repos and frameworks, tools, and more.

Electron Boilerplate

A minimalist boilerplate application for Electron runtime comes from Jakub Szwacz. To provide you with an easy-to-understand base that you can build upon, it only includes the bare minimum of tooling and dependencies that are needed for a fully-functional Electron environment. The boilerplate doesn’t impose any front-end technologies on you, so you are free to pick your favorite.

Emergency Site Kit

In case of emergency, many organizations need a quick way to publish critical information. However, existing CMS websites are often unable of handling sudden traffic spikes and, depending on the kind of emergency, the local network infrastructure might even be damaged, leaving people with poor mobile connections out. Max Boeck’s Emergency Site Kit is here to provide people with the information they need in such cases, no matter the circumstances.

The kit helps you quickly publish a simple website that is fast, accessible, and that can withstand large amounts of traffic. Built on the rule of least power, it uses simple technologies to ensure maximum resilience: The static files are optimized for first roundtrip, there’s only basic styling and one critical request, and service workers ensure offline support. One for the bookmarks.

How To Favicon In 2021

Sometimes, it’s a good idea to re-evaluate best practices. When it comes to favicons, for example — particularly given the fact that front-end developers have to deal with more than 20 static PNG files to display a simple favicon these days. To make the process more straightforward, Andrey Sitnik came up with a smarter solution that requires just five icons and one JSON file to fit most modern needs.

Inspired by Andrey’s approach, Chris Coyier went even a step further and went ultra-minimalist for the CSS Tricks favicon. He explains how it works in his post “How to Favicon in 2021”. An SVG concept to get your favicons ready for dark mode is also included.

A Boilerplate For Forms

Let’s be honest, forms can be a pain. Luckily, there’s a little HTML and CSS boilerplate to change that: Boilerform. Providing baseline BEM-structured CSS and appropriate attributes on elements, the little boilerplate gives your forms a head start.

Designed to be straightforward to implement, you can, in its most basic form, drop a CSS file into your head with a short snippet and wrap your elements in a boilerform wrapper. To give you more control, there’s also a Sass and Patterns Library to work with. Whether it’s a contact form, card payment, or user signup, Boilerform has got you covered.

All-In-One Front-End Boilerplates

The Modern Front-End Development Boilerplate is an all-in-one starter kit to develop, build, and deploy your next web project. Features include multiple front-end SCSS frameworks, an easy-to-manage folder structure, a centralized place to manage project-related settings like images, fonts, and JavaScript, hassle-free font-face generation, an integrated backup feature, and much more.

Another modern front-end boilerplate comes from the team at digital product studio tonik: the HTML Frontend Boilerplate is a modern solution for building fast, organized, and standardized web apps and sites.

GitHub Template Guidelines

No matter if it’s a private repository you share with your team or an open-source tool intended for the community: the first thing people usually see of your project is the Readme on GitHub. But what goes into the Readme that actually provides value to the user? Cezar Augusto put together guidelines for building GitHub templates. Handy!

Create .gitignore Files For Your Git Repositories

Another little detail that can be automated to save you some precious time are .gitignore files. gitignore.io does exactly that. The site has a graphical and a command line method of creating .gitignore files for your operating system, programming language, or IDE.

You can either enter the system and language you want to ignore directly on the site or copy the snippet that fits your shell from the documents to create an alias and, finally, the .gitignore file with the help of the command line.

Hackathon Starter

If you have ever attended a hackathon, you know how much time it takes to get a project started: Once you’ve decided what to build, you need to pick a programming language, a web framework, a CSS framework, and you need to set up an initial project that team members can contribute to.

Hackathon Starter is here to help you set the base for your Node.js web applications so that you can focus on what really matters: the hackathon project itself. The boilerplate features local authentication with email and password, authentication via Twitter, Facebook, Google, GitHub, LinkedIn, and Instagram, flash notifications, MVC project structure, account management, API examples, and much more to help you get started.

HTML Boilerplate Explained

How do you start a new project? Do you copy the HTML structure of the last site you built or maybe a boilerplate from HTML5 Boilerplate? Manuel Matuzović usually does the same, but recently, he encountered a situation where copying and pasting wasn’t an option: To document the structure he and his team are using at work, he had to understand the choices that have been made.

The task took up quite some time to research, so Manuel published the boilerplate on his blog for everyone to use, along with detailed explanations for each line of code so that you know exactly what you’re dealing with. A great opportunity to dive deeper into the underlying structure of a page.

Mobile-First Boilerplates

Do you need a lightweight, mobile-first boilerplate that includes only the essentials? Then Kraken might be for you. Kraken is not supposed to be a finished product but rather a starting point that you can adapt to any project. The base structure is a fully-fluid, single column layout, and an object-oriented approach to CSS lets you mix, match, and reuse classes throughout a project.

Another great little helper if you feel you don’t need all the utility of larger frameworks is Skeleton. It only styles a handful of standard HTML elements and includes a grid. The boilerplate gets by with only 400 lines and there’s no installation and zero compiling necessary to get started.

HTML5 Boilerplate

One of the most popular (if not the most popular) boilerplate to help you build fast, robust, and adaptable web apps or sites, is HTML5 Boilerplate. It bundles up the combined knowledge and effort of 100s of developers in one little package.

What’s in it? A lean, mobile-friendly HTML template, with optimized Google Analytics snippet, a placeholder touch device icon, and docs with extra tips and tricks. The boilerplate also includes Normalize.css, a modern, HTML5-ready alternative to CSS resets, and further base styles, helpers, media queries, and print styles. Perfect to give your project a head-start.

An alternative worth looking into is Igor Agapov’s Modern HTML Starter Template which was built with a focus on performance.

Boilerplates For Responsive HTML Emails

We all know about the challenges that come with formatting HTML emails. A handy boilerplate for sending out nicely formatted messages while avoiding some of the major pitfalls comes from Sean Powell: HTML Email Boilerplate.

Sean’s template is available in two versions — with and without comments — and consists of a header with global styles and a body section with more specific fixes and guidance to use where needed in your design. Whether you want to create your own template based on the snippets or cherry-pick the ones that fix your specific rendering issues, the boilerplate has got you covered.

Another email boilerplate worth looking into is Mark Robbins’ Good Email Code template, a simple stripped-back template that you can use for every email you send. If you’re interested in learning why each part of the code is where it is, Mark breaks it down in more detail.

Developed to help you build responsive HTML emails with confidence, the Email Framework provides you with pre-built grid options for responsive/fluid and hybrid layouts as well as with common components. The framework supports over 60 email clients and has been thoroughly tested using Litmus.

Last but not least, for those occasions when all you need is a simple responsive HTML template with a clear call-to-action button, you might also want to check out Lee Munroe’s template. It’s tested on all major email clients, on mobile, desktop, and web. Happy emailing!

A Complete Guide To HTML <head>

The head of a web page can get quite full, especially in large pages. But what do you actually need? And how to organize the head to prevent implications on performance? Josh Buchea put together a handy guide that dives deep into HTML <head> elements.

The guide covers everything from the recommended minimum and including elements for how a document should be rendered to links and references, favicons, social media, just like browser-depended information for things like smart app banners or “add to homescreen” features. A nice bonus: The guide is available in 11 languages. One for the bookmarks.

PHP Boilerplates

If you’re looking for a simple yet powerful PHP framework with a very small footprint, CodeIgniter has got you covered. CodeIgniter encourages MVC without forcing it on you, it has exceptional performance, and comes with built-in protection against CSRF and CSS attacks. There’s nearly zero configuration required to get you up and running.

A PHP framework that was also built with simplicity, performance, and security in mind is the PHP Microsite Boilerplate. As the name implies, it is perfect for building a rather small website without complex code structure. Key features include easy routing, intelligent serviceworker cache, and it’s SEO-optimized, and prepared for Accelerated Mobile Pages as well as for Progressive Web Apps.

Create Projects From Cookiecutters

A command-line utility that creates projects from cookiecutters (i.e, project templates)? Cookiecutter does just that. It takes a source directory tree, copies it into your new project, and replaces all the names that are surrounded by templating tags {{ and }} with names it finds in cookiecutter.json. These can be file names, directory names, and strings inside files. This enables you to bootstrap a new project from a standard form, skipping all the mistakes that are often involved when starting a new project. Project templates can be in any language or markup format and you can use both local cookiecutters or remote ones from Git or Mercurial repos.

Quick Snippets

Sometimes you come across a small tip that turns out to be true gold: Maybe it’s a solution to a problem you’ve been tinkering with for some time or a short code snippet that makes your workflow a lot more efficient. The site QuickSnippets collects little nuggets like these.

Currently, the collection features almost 1,300 snippets by 296 authors to help you in your everyday work. The snippets cover everything from browsers, tools, and editors to CSS, HTML, JavaScript, Laravel, PHP, React, UI/UX, and Vue.js. A treasure chest just waiting to be opened.

React Boilerplates

When it comes to React, there are several community-created boilerplates out there that are bound to save you time. One of them is the React Boilerplate. The highly-scalable, offline-first foundation was created with a focus on performance, best practices, and developer experience and shines with features such as quick scaffolding, instant feedback, predictable change management, and internationalization support, among other things.

Another boilerplate worth looking into comes from the team at Infinite Red: Ignite is the culmination of five years of constant React Native development and was created for both Expo and bare React Native. It comes with a CLI, component/model generators, and more.

The Electron React Boilerplate is another great foundation for scalable cross-platform apps. Fast iteration, incremental typing, and code optimization and minification out of the box are the three pillars it’s built upon.

The React Starterkit by Konstantin Tarkus is a front-end starter kit using React, Relay, GraphQL, and JAMstack architecture. It’s optimized for serverless deployment to CDN edge locations and comes pre-configured with CSS-in-JS styling, code quality tools like ESLint, Prettier, TypeScript, and Jest, as well as VSCode snippets and settings to make your workflow more efficient.

Speaking of VS Code: The React + Redux Snippets extension makes sure you always have the snippets you need available in your editor. It’s designed taking maximum advantage of code completion — perfect for power users.

Last but not least, if you want to use the best of all worlds to create your own, unique React boilerplate, Leonardo Maldonado’s tutorial is for you. He takes you step by step through building your own boilerplate from scratch with the main dependencies used in the React community today.

A Snippet For Loading Responsive WebP Images

It has always been complicated to load images in the best sizes and formats, and with new image formats like WebP and AVIF gaining popularity, things don’t get any easier. If you want to ship WebP already today, you’ll need a loading strategy that also providess a fallback for browsers that don’t support the new format yet. Stefan Judis shows how to do it.

Stefan’s solution for loading a responsive WebP image uses the picture element, and even though it it involves quite a lot of lines of code, it’s worth it as the snippet not only loads the image in the best format but also the best sizes. One for the bookmarks.

Also, in case you missed it, Stefan has started publishing his Web Weekly newsletter this year. Every Monday, you’ll find a colorful mix of resources all around frontend, productivity and web development learnings paired with handy tools and GitHub projects in your inbox. Stefan’s goal: make it the best email to start your week.

SaaS Boilerplate

User authentication, cookie sessions, subscription payments, billing management, team management, GraphQL API, transactional emails — when you’ve built a SaaS product before, you know how much time it takes to make all the different tools involved play well together to offer the functionality you need. To change that, Max Stoiber created Bedrock.

The modern full-stack Next.js and GraphQL boilerplate combines the best tools the JavaScript ecosystem has to offer into one solid foundation for your SaaS product. No need to master all of the technologies involved, if you know Next.js and GraphQL, you can start coding almost immediately.

Static Site Boilerplate

Automated build processes, a local development server, production minification and optimizations, and the latest standards for static websites. Eric Alli’s Static Site Boilerplate uses the latest tech to make the process of building static websites more straightforward.

The built-in development server will get you up and running in seconds, your HTML, styles, and scripts will be automatically linted, changes to files are monitored in real time, images are compressed for your production build, and sitemap.xml and robots.txt files are automatically included with your production build. A real timesaver.

Style Guide Boilerplates

What do you need to consider when building a style guide that, well, works? Brad Frost’s Styleguide Guide takes you step by step through each and every section and what goes into it — from the homepage to guidelines, styles, components, utilities, page templates, downloads, and even support, and contributions. A very complete overview.

Brett Jankord’s Style Guide Boilerplate is a great starting point for crafting living styleguides. You can create a directory for it on your site to see how your live site’s CSS affects the base elements and start customizing the patterns and modules to your liking.

Typographic Starter Kit

Do you need a little bit of help with typography? Not in terms of aesthetic design choices, but regarding markup? The typographic starter kit Typeplate has got your back. It defines proper markup with extensible styling for common typographic patterns.

Typeplate is available as a stripped-down Sass or CSS library of your choosing (including Bower and CDNJS) and is primarily concerned with technically implementing design patterns, not their looks: from typographic scale and word-wrap to indenting, hyphenation, small and drop capitals, small print, code blocks, quotes, footnotes, lists, and more.

VS Code Snippets To Streamline Your Workflow

Are you using VS Code? We came across some useful extensions that handle the React, Vue, and Angular snippets you might need to type frequently for you. For Vue, be sure to check out Sarah Drasner’s extension. It was built for real-world use and focuses on developer ergonomics instead of cataloguing API definitions.

Burke Holland provides you with a collection of essential React snippets and commands that he selected from his day-to-day React use. And if you’re looking for Angular snippets, John Papa has got you covered. His extension adds snippets for Angular for TypeScript and HTML to your VS Code setup.

Speaking of VS Code setup: Have you heard of the “VS Code Can Do That Workshop” already? From customizing the editor to using Git and source control, it features eight exercises to enhance your VS Code skills.

Vue Boilerplates

Do you plan to build a Progressive Web App with Vue.js? Vuesion has got your back. Described as the “most complete boilerplate for production-ready PWAs”, Vuesion focuses on performance, development speed, and best practices. The code is all yours, ready to be modified and build upon, so that you can implement the things you actually need, without being limited by the template itself.

If you’re looking for a solution to achieve a consistent user experience across your applications, CION might be for you. The design system utilizes design tokens, a living styleguide with integrated code playgrounds, and reusable components for common UI tasks. A great starting point that can be extended to your project’s needs.

To improve prototyping in Vue, there’s the prototyping tool OverVue. It allows developers to dynamically create and visualize a Vue application, implementing a real-time intuitive tree display of component hierarchy and a live-generated code preview. The resulting boilerplate can be exported as a template for further development.

Have you ever tinkered with the idea of using Vue to power a blog? Ben Hong did, and created a dev environment to help you do the same. Optimized for blogging, the VuePress Blog Boilerplate includes default features like RSS feed generation, a list of recent posts, etc. The minimal setup and Markdown-centered project structure help you focus on writing, and, thanks to the Vue-powered engine, you can use Vue components in Markdown and develop your theme in Vue, too.

For handy Vue snippets, little tips, tricks, useful directives, and nice practices, be sure to also check out Vue Snippets collection. A small but mighty collection.

WordPress Plugin Boilerplate Generator

No one likes to repeat unnecessary tasks. That’s why WordPress developer Enrique Chavez built the WordPress Plugin Boilerplate Generator. Every time he started working on a new plugin, he found himself renaming file names, packages, subpackages. The generator automates the task.

All you need to do is type your plugin details in a short form containing plugin name, slug, uri, autor name, email, and uri, and the generator will generate a ZIP file for you with the correctly-named file structure. A great little timesaver.

WordPress Starter Theme

Do you plan to build your own WordPress theme? The starter theme Underscores helps you get started. It’s not meant to be used as a parent theme but as a stable base to kickstart your theme development adventures.

Underscores comes with only minimal CSS so that there’s less stuff getting in your way when building your own theme. It shines with lean, well-commented HTML5, a helpful 404 template, an optional sample custom header implementation, custom template tags that keep your code clean, a mobile-friendly dropdown, and some other nifty features.

Articles on Smashing Magazine — For Web Designers And Developers

0-Shopmate
26 Jul

Free UI Kits To Use For Creating Projects Faster

by TBSCategories: News

Designers love UI kits, due the fact that they allow them to express their creativity, and simplify even the most complex projects they are working on. Still, this is not everything UI kits are good for: they allow designers to sneak peak on their colleagues’ ideas, and skip the part of letting clients do their part of the job (which hardly ever goes fine).

Finally, using UI kits is the trendiest thing designers can do at this time, as there is no fashion or trend that has been skipped by the wise eyes of UI designers.

Instead of wondering whether to use UI kits or not, look at them as the complete solution for your design. They will help both when you’re starting and when you need some extra expertise, and will cover pretty much every aspect of your design.

Useful, Free UI Kits to Speed Up Your Workflow

As it is probably clear by now, UI kits can do many things for the welfare of your design, but what they can certainly help with are prototyping and mobile/web design.

Shopmate

To make things clearer, as fun as you find completely new app interfaces to be, they will challenge you and take plenty of useful time you could otherwise make money with. That’s when UI kits make their first big arrival: half of the work is off your shoulders, and there is enough time to keep up with the rest of your work. In order to explain better what we have in mind, we’ve bookmarked the most popular and must-have free UI kits, and compiled a nice list for you to consider from now on:

UI Kits and Wise Time Consumption

V Avenue

Are you running short or website ideas? Is your brand new mobile app stuck? Are you about to launch a new blog? Change the game? There is nothing that can stop you!

The most common mistake of all designers is investing too much time in developing ideas, because they don’t understand that the more time that goes by, the less inspired they will become.

In order to drill deeper and to take good ideas out, do some sketching. The sketch will present your idea quickly and accurately, and will later on be kept in your prototyping library to help you develop the final skeleton-design to present to clients.

Music App

Obviously, most of us get so creative as to scratch one line and get stuck, but luckily UI kits can always save the day. In fact, there are UI kits designed specifically for indecisive sketchers, ideally intended to help you bring different pieces together, and to obtain a final picture that actually makes sense.

Another thing you’re probably afraid of is that things will eventually get out of control, due to the variety of unpleasant factors and annoying obstacles. When that happens, the project becomes doubly complicated, and you can already wish your extra time farewell.

Fair UI Kit

In the worst of all scenarios, clients will be the ones to notice the bug first, and you’ll find yourself faced with people who paid for good service, waited more than they were supposed to to obtain it, and never got what they wanted. Observed through their eyes, you will be the irresponsible designer who promised more than he could accomplish, because that’s how clients are. They too make mistakes, and fail to estimate time here and there, but they’d never admit it to you.

Time won’t obviously depend on UI kits either, but it will still be more realistic with them than your luck guesswork.

Besides, UI kits were designed to save time, not to prolong it, and that’s exactly why they come packed with premade elements. Your task in the case is to organize their elements, and bring them to the point where they do resemble your brand. A bit of moving and customizing, and the work will be done. Simple, isn’t it?

The Fine Art of Prototyping with UI Kits

Recipe UI Kit

UI kit designers are usually people who specialize in rapid prototyping, and know exactly how to shorten the time in which you mock up the functions needed, check whether your vision is viable with real users, and how appreciated it is by designers, developers, and all other interested parties.

UI kits are therefore your best bet to spot and correct issues while it is still early, instead of progressing to the final stage and wrapping up codes that are both difficult and costly to correct. When it comes to prototyping, it is the fine art of all businesses and designs, and that’s why you must know how to do it properly.

The best mockups you can find for the purpose are the high-fidelity prototypes, which come as close as possible to the final version of the product.

These were a real design revolution, as designing such in the past was the most daunting part of designers’ work, and required unique skills and experience combined with coding and knowledge of specific programming languages.

Max UI Kit

UI kits arrived in the appropriate moment to simplify stuff, as for them you won’t need any programming knowledge whatsoever. More often than not, even new and non-savvy designers will come up with highly professional prototypes, after only dragging and dropping a few widgets to arrive at the desired result. The best part of it is that both the appearance and functionality of the final product are becoming visible, and customers know exactly what they will receive even before receiving it.

Still, if planning to design your prototypes with UI kits, there are a few things you should be aware of:

  • You must have a clear objective. This doesn’t only refer to the final outcome and the design experience you need to obtain it, but also to the business side of it. Will it pay off? Are your clients interested to see something out-of-the box, or simply to upgrade the functionality of their current product? The answers to these questions will make your work more effective, and will let you know how to proceed.
  • There must be a clearly targeted audience. You’re not giving your services away for free, so start thinking which the most appropriate group to make money from is. Pick out most probable visitors from potential ones, and try to figure out what they want to see. Then, start identifying their expectations: which is the action they’d like to perform using your design? If that’s not so clear from now, consider user personas to help you determine at least what the majority of users would need.

With all goals on the table, it will be much easier to think of a good interaction concept, and to find the most appropriate UI kit to help you produce what you envisioned.

Using UI Kits to Create Apps and Websites

Monica Web UI Kit

When designing an app or a website, it is always a good idea to start with a UI kit, because in it you will find all interface elements you need to make the UI more usable and appealing, as for instance layouts, widgets, types, buttons, and even some unexpectedly useful feedback options.

Most UI kits were designed to work with SketchApp and Photoshop, which indicates that any person who has even the slightest knowledge of these programs will get to design in an environment he already knows and manages.

Designing websites and apps with UI kits sounds like, and is an interesting process, but the best thing about it is that it only takes minutes!

Hero UI Kit

All it takes is to pinpoint the right UI kit, open the files using some of these programs, and do your magic. In the meanwhile, begin with a new project where you will have access to all necessary elements, and drag-drop them to the PSD (sketch) file choosing the most appropriate position. Doesn’t sound too complicated, does it?

If you’re there, it means you’ve passed the most cumbersome part of the process, namely coming up with a good structure where you only need to change colors, add some text or images, and the job will be done.

Customization is definitely one of UI kits’ strongest sides, and makes up for the perfect coincidence between the guidelines of your business and your design results. And this is not only possible, but easy too.

Portal UI Kit

Nevertheless, when it comes to mobile apps design, you have to consider two extra aspects: The UX and the UI. In order for your app to be successful, you need to get to know these practices in core, and to test your skills here and there before you’ve actually started with the project.

UX and UI are the core elements when it comes to aligning paper-drawn ideas to genuine user expectations, which means that designers who don’t consider them will very likely cause a real design chaos, and will make interaction dreadful, rather than involving.

Avital Mobile UI Kit

In order to obtain the desired usability, you have to choose an appropriate UI kit and build your high-fidelity prototype, and only then decide whether you’re on a good way to satisfy users with your alpha release.

Finally, what makes UI kits so wonderful and special is that most of them are free, even those that are breathtakingly beautiful. Designers nowadays use their cute freebies to promote creative ideas, and transform them into practical wireframes one can download in seconds, and use afterwards for each of his design projects.
At the end of the day, it is you who is designing, and you get to choose whether using a UI kit is a better option compared to developing a personal framework. What we know for sure is that UI kits make things go the smooth way, save an incredible amount of time, and still keep your designs functional and beautiful.

A Few Great Examples of Free UI Kits

Milestone UI Kit Freebie

Milestone UI Kit

Material Design Widgets Ui Kit

Material Design Widgets UI Kit

Vonn Material Design UI Kit Freebie

Vonn Material Design UI Kit

Portland UI Kit Freebie

Portland UI Kit

Verve UI Kit

Verve UI Kit

iOS 9 UI Kit – Artboards PSD

iOS 9 UI Kit

Drunken Parrot UI Kit Freebie

Drunken Parrot UI Kit

Apple Watch GUI Sketch

Apple Watch GUI

E-commerce UI Kit

E-commerce UI Kit

Blog UI kit

Blog UI Kit

Conclusion

Trend

UI Kits are suits full with design elements that ease designers’ work and save them time. They provide a variety of original app/website ideas, and promote methods proven to suit a large audience. There were many similar concepts that conquered and left the design scene, but UI kits are so good that it doesn’t seem they are going anywhere anytime soon. The focus is on them now, and it is there to remain. You already understand why, don’t you?

Designers can already celebrate the variety of free and amazing UI kits that are going to appear on the market, together with outstanding examples that are already there. A little bit of market research will be enough to find the right kit, and to make it suitable to whatever brand you’re designing for.

As you can guess, not all UI kits are free, but with all free ones being presented to us, we will hardly ever experience the need to pay for one.

The difference is not that immense, and the objective is clearly the same: you transform your UI kit, design realistic and high-fidelity prototypes, and start making money!


Onextrapixel – Web Design and Development Online Magazine

Reasons-to-use-a-UI-kit
29 Feb

Getting Started With UI Kits Fast

by TBSCategories: News

I’ve got a secret. I cut corners a lot.

Nobody likes to admit that, but when you’re coming from a fast moving product background, speed is often the difference between a big launch and a big missed opportunity.

As a developer, I cut corners with ready-made libraries. Awesome chunks of code built ahead of time by folks much smarter and sturdier than me. As a designer, I use UI kits.

What is a UI kit?

If you’re not familiar, UI stands for user interface, which is what we call the visual pieces that make up an application or product. It’s the buttons, headers, dropdowns, layouts—things the user interacts with while using your product.

It’s also the thing that designers spend a lot of time designing. Those tiny nuts and bolts that make your product a delight to use or a total frustration.

A UI kit is a bundled collection of pre-designed matching interface elements, ready to use.

Where can you get one? Glad you asked!

  • Make your own. Lots of teams design and maintain their own internal UI kit. Just like any other library, it grows and evolves as the product does, serving as a base for all future design decisions.
  • Download one. A pre-made UI Kit is a great way to jumpstart a project without spending huge amounts of time on the design up front (especially handy when your project has no designers on staff to begin with).
  • Today we’ll mostly be talking about that second option: what to do when using a downloaded kit. With a bit of elbow grease and some common sense, you can take a free UI kit to polished interface in no time.

Reasons to use a UI kit

While I don’t think anyone would argue that visual design is important (like, really important) to the success of a product, it always seems to have a certain way of derailing the early process.

Time that could be spent interviewing customers or doing research or starting to evaluate architecture is spent pushing pixels. To put it another way:

“Design matters. A great deal. But design doesn’t need to be complicated. It certainly shouldn’t be the thing preventing your startup from starting.”
–Matt Goldman, SmallHQ

Reasons to use a UI kit

Even with a killer designer on staff, there’s value to cutting some corners and getting started with a UI kit. Here’s a few of my main reasons for using them:

  • Save time. Lots of it. The average UI kit includes dozens of screens and even more individual elements. A great UI kit comes with all the bells and whistles: multiple devices (or breakpoints), custom icons, font pairings, colorways—all little things that designers sink countless hours into.
  • Perfect for testing an idea, without getting bogged down with the details of hi-fi design. Don’t get me wrong—I love designing my own visual system. It’s what I do for a living. But sometimes you just need to test the idea. Call it research or prototyping or validation or whatever you want, but just remember there is supreme value in testing your underlying idea separate from the design choices being made.
  • Keep your developers sane. Lots of times during a large build, there are tiny bits we designers forget to mock up, or simply never even thought about. These “surprise” views are a source of real frustration for developers—it’s like being asked to drive somewhere with a clear map. With a UI kit, it’s so much easier to fill in the blanks without stopping development, sending things back to design, and waiting. It’s the reason things like Bootstrap and Material kits exist: so developers can keep doing what they do best—development.
  • To learn from the pros. High-quality UI kits are a great learning tool for designers of all skill levels. It’s like taking a field trip into another designer’s brain. Dig around inside the kit and take note of the structure, layers, document setup, etc. It might not be as sexy as the visual design itself, but being able to crank out a clearly organized file is a skill that designers must have, especially when working with others.

The trick is to look at your fancy downloaded UI kit as a starting point for your project, not the end solution. To get the most out of a ready-made kit, there’s a few important steps you need to take.

Tips for getting the most out of a UI kit

So you’ve browsed around online, picked out a killer kit, downloaded it, and opened it in Photoshop. What’s next?

The jump from ready-made to ready-to-impress isn’t very far. Here’s how I do it:

  • Insert your own brand, colors, and personality. While there aren’t usually rules against it, I’d advise against using a kit purely as-is. And not just because it might look lazy, but because your customizations can bring more value. Even for a temporary prototype, sometimes people can get hung up on little things like the fonts and colors not being correct (despite being told to ignore the little things, like the fonts and colors not being correct). Think of the fresh kit like lorem ipsum—remove the placeholder stuff and insert your real content.
  • Pick and choose the bits you need. Lots of times, especially when your product already has wheels, you won’t need the complete visual system offered by a UI kit. Instead, cherry pick the parts you need and make them your own. That complex dropdown element that just popped up during the last meeting? Grab it from a kit!
  • Check the licensing. Some UI kits come with license-restricted odds and ends, like icon sets, stock photos, and fonts. Heck, sometimes the kit itself comes with certain rules. Before you dive in and start building on top of the system, make sure it’s free and clear of any small print that might bite you down the road. If you can’t tell under what terms the kit is offered, ask! If they can’t tell you, avoid!

Your downloaded kit is a shortcut, not a complete road map. Use it when you’re stuck, use it when time is short, use it when you’ve got bigger fish to fry.

Use it to make sure that design isn’t what’s keeping your startup from starting.

Some of my favorite kits

  • Chat UI, a minimal and bright UI kit focused on communication. Comes with things like conversation views, user profiles, and settings screens.

    • Chat UI

  • Now, an editorial UI kit with cross-platform designs ready to go. Comes with things like article views, index listings, archives, and activity streams.

    • Now UI

  • DO, a versatile to-do focused UI kit for getting things done. Comes with things like item lists, calendar views, and onboarding walkthroughs.

    • Do UI

Let’s kit started!

I hope this post has shed some light on why I like cutting corners so much, and why I use UI kits. Getting a head start on your work isn’t cheating, it’s just making smart use of your time.

And the best part? Using a UI kit to save time early will come full circle when your product takes off, allowing you the chance to do custom design when it really matters.

Featured image credit: 123rf


Onextrapixel – Web Design and Development Online Magazine

×

Powered by WhatsApp Chat

WhatsApp Chat is free, download and try it now here!

× Chat with Us