Web Design

Thursday, October 2, 2014

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.

Content Generator for Sketch

Sketch Xcode: Automatically Exporting Assets from Sketch into Xcode

Color Contrast Analyser for Sketch

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

Sketch Framer: export Sketch.app documents into FramerJS

Style Inventory for Sketch

Random Opacity Sketch plugin

Sort Layers

Sketch Measure

Set Line Height Plugin for Sketch

Random User: inserts random user data

AEIconizer: resize artwork for iOS app icon

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

Sketch Plugin Scripts

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

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

Other plugins worth mentioning:

Sketch Plugins for splitting shapes

Sketch.app plugin for generating animated GIFs from a sequence of artboards

Tiny Sketch.app plugin for zooming to Artboard of currently selected object

Crop Artboard for Sketch App + Skala

Quickly duplicate any Colourlovers palette in your sketch project

Generate Android assets in Sketch

A plugin for quickly creating Lorem Ipsum text in Sketch

Plugin for clearing all layer style properties

Sketch.app plugin for generating an Apple Icon Image

A collection of script commands

A dummy plugin to quickly switch between pages using shortcuts.

This command is a recreation for Sketch of the Photoshop Generator functionality

Sketch.app plugin for syncing current / local .sketchplugins with their master raw version at GitHub

Sketch.app plugin for swapping the fill and border color for all selected layers

Export assets for Android, iOS, Windows Phone and the Web in Sketch.

Generate dummy text for thaana layouts

A port to Sketch.app of Photoshop’s Duplicate and Nudge feature

A plugin to upload the current Sketch.app artboard to CloudApp with a keystroke.

A Sketch plugin that lets you preview your current artboard in the Dock.

You will definitely like these articles

The Recently Released Webdev Resources You Would Need

Tools For Photoshop To Improve Your Workflow And Quality Of Your Designs

Random Apps And Tools For Designers And Developers

Great New jQuery Plugins And Other Resources For Web Designers

Tools, jQuery Plugins And Resources For Web Designers

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

Wednesday, October 1, 2014

Style guides, or pattern libraries, are living documents of code that detail the different elements and coded modules for your website and/or applications. Besides being used to consolidate front end code, style guides also document the visual language (e.g. color palettes and header styles) of your site.

They are an essential, all-in-one referencing tool for everyone on your website development team; especially when making changes or iterations.

Style guides are very useful when it comes to website development, but they aren’t easy to maintain in HTML/CSS. Thankfully, there are a variety of front end style generators that can help you create a dynamic style guide.

Honestly, it will take some time and effort to create your perfect style guide, but it is worth it; this style guide will be an essential reference guide for future use. For example, if you team happens to change or grow over time, new members can simply refer to the already created style guide for the exact styles that they should be using; this will help make the build times for new pages and/or sections faster.

Another benefit of a style guide is the ability to standardize the CSS; this keeps it smaller and ensures that it will load quicker. Therefore, when using the pattern library as an inventory of code and modules, your website designers and developers can use it to immediately determine if any new designs are different from already established standards. This will help the team decide if expanding their code base is worth it or something’s that is already written should be extended.

Style guides help you maintain design consistency because it provides your website designers with an all in one location that lets them easily reference the components to make sure that the website’s design is seamless. This function is essential for any large team of designers or website developers because it helps keep the codebases smaller?

Need help generating your style guide, check out our list of handy front end style generators below.

ElementCSS