Web Design

Friday, April 29, 2016

Are you interested in doing user interface design? This is quite easy if you utilize the right tools. What used to be confusing and complex is now quite effective and very simple; this is all due to an app called Sketch.

What is Sketch?

Sketch focuses on user interface design exclusively and, unlike similar product Photoshop, you will not have to worry about editing photos and the plethora of other settings that make it difficult to use a simple application.

Sketch is an excellent alternative to Photoshop because everything is already in vector. This means that you won’t have to worry about designing for multiple devices. In addition, the plugins for Sketch help make this tool even simpler and more efficient to use.

Why Should I Use The Sketch App?

Sketch 3 comes with many impressive new improvements that make this app faster and more stable than ever before. In addition, many of the problems that have been annoying designers have been solved.

With this latest release of the Sketch app, you are given the ability to design more efficiently using an improved user interface. Also, the other functions that are loved by designers work as beautifully as before.

Interested in Sketch plugins for this amazing app? Check out some of the its popular plugins used by designers.

CSSketch – CSS for Sketch 3

CSSketch is a Sketch 3 plugin that enables you to modify your designs quickly by attaching it a stylesheet to it that you can use to lay out your designs, change colors and shadows quickly, etc. It supports Sass and {less} stylesheets, which means you can put functions and variables in your stylesheet to make your workflow even more efficient.

Select Similar Layers

Inspired by Illustrator’s “Select Similar Objects” feature, Select Similar Layers is a Sketch plugin that selects the other layers with the same attributes as the one you’ve currently selected. It works with fill color, border color, border thickness, font, opacity or blending mode.

Sketch Constraints

Sketch Constraints is a plugin that integrates constraints in Sketch to lay out layers. These constraints are relative to the parent, either a group or an artboard, and they are linked to layer names, so every layer with the same name will have the same constraints applied to it.

Sketch plugins by Cemre Güngör

Frames Animate

Sketch plugin that let’s you animate your artboard in browser.

Sketch Divider

A plugin for Sketch to equal division layers by container.

Sketch Proportional Replicator

This plugin takes the selected layer and create new copies of proportional size to the original. You choose the proportion by specifying the multipliers for the width and height of the selected layer.

AnimateMate Plugin For Sketch

You know feeling when you just need a simple animation for your awesome concept and you realize that it’s a huge process to move all assets into some other application? That’s a lot of hassle!

Scaled Export for iOS

Sketch plugin, which makes assets exportable for iOS project depending on original Sketch project scale.

Sketch Text Tools

This plugin eases working with typography in Sketch. It enables displaying font metrics, aligning text-layers to text-layers or other layers relative to baseline, x-height and cap-height. Baseline grid reference layers can be extracted from text-layers or build with custom configurations. Text-layers can be split into several columns with specific gutter widths.

Unsplash It Sketch Plugin

A plugin to quickly include great looking images from Unsplash in your Sketch projects. Because being able to quickly iterate on UI is important but also having great photography as placeholders is not that bad.

Content Generator for Sketch

Sketch app plugin for generating dummy data such as avatars, names, photos, geo data etc

Sketch Xcode: Automatically Exporting Assets from Sketch into Xcode

Many people use Sketch in their Mac and iOS development workflow. Previously, the process involved making changes in Sketch, exporting them, moving them into Xcode Asset Catalogs, then running. However, with SketchTool, this can all be done automatically.

Color Contrast Analyser for Sketch

A Sketch plugin that calculates the color contrast of two layers and evaluates it against the WCAG. The test may pass AAA, AA or fail because of a lack of contrast. And even when you do not need to meet those requirements, you can get a feeling for the contrast when you get used to the values. This might help you design accessible content.

Day Player: A collection of Sketch Plugins for creating placeholder images

Style Inventory for Sketch

Design requires free, sometimes chaotic exploration. But design also means organisation and structure. Sketch can be good in both aspects, but moving from exploration to structured layouts with text styles and unified colors is hard.

Either you start clean files from scratch, or you use what you have and try to tidy it up. The Style Inventory is meant to help you with that. It gives you an overview of all your used styles and helps you to merge styles of similar layers into one.

Random Opacity Sketch plugin

Sort Layers

Sorts the selected layers or artboards. Note: This plugin will also reorder the layers in the layer list to match the visual order. For best results, group your layers before sorting.

Sketch Measure

Set Line Height Plugin for Sketch

Plugin that allows you to set the line height of a text layer as a multiple of the font size. It’s like using em in CSS. By default, ⌘ + L will trigger the dialog, but you can change the shortcut in the first line of the plugin.

Random User: inserts random user data

A SketchApp plugin that inserts random user data into your Sketch documents.

AEIconizer: resize artwork for iOS app icon

After creating icon in any square sized artboard, select any layer (or nothing if that’s the only artboard on page), then run this plugin to generate all of the needed sizes for iOS (and watchOS).

Plugin replaces all generated artboards every time it runs, but it will never delete your original artboard.

Plugins aimed towards working with horizontal/vertical grid layouts and typography

Sketch Plugin Scripts

A library of Sketch Plugins aimed towards working with horizontal/vertical grid layouts and typography. There are also some additional plugins for generating typographic scales and generating colour palettes.

Sketch Scripts

Plugins for Bohemian Coding’s Sketch

Sketch Icon Stamper Plugin

Dynamic button plugin

Select child layers

Blade: generate HTML automatically

Sketch CSS Sprite Mixin

Generate a code of mixin for scss, less and stylus in Sketch 3. Code is copied to the clipboard when run the plugin. Sprites name are group layer name of top-level, and the Sprite image name is an Artboard name.

Skrx: exports a selection of elements to Apache Flex MXML or FXG description

Skrx ( ~skreecks ) exports a selection of elements (for now only the rectangles) to Apache Flex MXML or FXG description, and copy it to clipboard.

Other plugins worth mentioning:

Source: http://ift.tt/1vgpt6a

With digital marketing on the rise, social media has become one the most significant channels of advertising. We all know that social media is a great way of attracting visitors to a website. If used properly, it will help you increase your brand awareness and your overall online presence.

Because social media is so widely used, almost all websites have on their homepages links to their social platforms. Web designers sensed this trend and started creating free social media icons, either as images or as CSS3 social media buttons. Attractive, clean and varied, these CSS3 social media buttons will help you grow your social media presence in no time!

We selected below free 25 CSS3 social media buttons. Some of the items in this list also come with comprehensive tutorials you can follow and learn how to create CSS3 social media buttons yourself!

Here they are.