Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Design’ Category

There are many frameworks out there which mimic the user interface of iOS but not much exists for Android

Fries is a solid HTML-CSS-JS framework for creating Android-like UIs both for real-world usage and prototyping.

The framework has all the major components like forms, action bars, lists, buttons, spinners or tabs.

It is also optimized for PhoneGap and can be easily converted to a native app.

Android UI Web Framework - Fries

We use labels on many parts of web design like providing information about images, form elements, videos..

Label.css is a simple-yet-useful set of CSS rules that provide a global label usage.

Label.css

Each label can be attached to any element, positioned how we want (right, left, top, bottom, inside, outside) and can be animated with float or fade effects.

It works by adding pre-defined classes to the elements and the content of the labels are stored inside the data-label attributes of each element.

Simply, a good addition to any stylesheet (or CSS framework).

Skel.js is a tiny JavaScript framework (~6kb gzipped and minified) that simplifies building responsive layouts very much.

It has a JavaScript-powered and 12-column grid system that can handle any type of complex layouts + has easy-to-understand rules.

Managing breakpoints is just about adding the width ranges in the options of the skel.js‘ main function.

Skel.js

There is a plugin system for extending it further (a UI plugin is mentioned to be released soon).

Also, many helpful options exist like the ability to applying reset.css or normalize.css and defining the box model instantly.

CSS frameworks are great to save time from recreating rules for typography, forms, tables, etc.

However, they are not that great for everyone. There are many designers/developers that prefer to recreate such stuff from scratch so that each of their work looks/feels different. Or, many others have their own CSS snippets that fasten the development.

Fitgrd

If you are one of these designers/developers and looking for only a grid system but nothing more, Fitgrd can be a good fit : ).

Fitgrd is a responsive grid system with 12 columns and no strict sizes for the min-max widths.

Each column has 2 percent of margin on both sides and everything works with percentages.

For designs created to be displayed on iOS or any other Retina-Display device, we need to create high quality version the right way.

Retinize It is a set of 2 free Photoshop actions where one of them slices the selected layer (or group) and the other for slicing +  scaling it by 200%.

These actions are a time-saver for anyone that regularly creates designs for websites in Photoshop. Simple-yet-handy.

Retinize It

Map Icons Designer is a free set of 200+ icons that are designed to be used in maps.

The set is available in 2 formats: PSD (vector shape) + PNG and includes items for transportation, hotels, restaurants, animals and much more.

There are also 10 different-styled location pins where all look great.

And, the set is completely free to be used in both personal + commercial projects.

Map Icons Designer

A beautiful font can easily turn a standard text into a good-looking title, logo, etc..

Solomon Font Family is definitely one of the most exciting font packs out there with 6 decorative fonts in 6 different weights (12 fonts total).

It has a well-finished geometric design with optimized kerning and looks elegant without being too much flowery.

Solomon Font Family Discount Deal

The fonts have support for characters of 50+ languages so they can easily be used in multilanguage projects.

They are normally priced $279 but discounted for $9 at MightDeals. You can choose to get the desktop version or the web font version for the price (or get both for $18).

Many web designers and developers use code sharing websites like jsFiddle or Codepen.

Editr is a simple and self-hosted app (that doesn’t use any server-side code) for creating a similar interface for editing/improving and sharing any HTML-CSS-JS projects.

Code Playground - Editr

Sharing can be done by simply embedding an instance on it (this is done with jQuery) to any web page.

The app uses the beautiful Ace Editor which can be themed with ease and offers a great experience while editing code.

Web Colour Data is a web service to easily find out “which colors are used on a web page”.

It works by simply submitting a URL and the service auto-extracts + analyzes the colors in it.

The color palette is presented with a breakdown in percentages and hue distribution.

Also, it is a good source of color inspiration as palettes used in many popular websites are displayed as well.

Web Colour Data

  • Tags:
  • Filed under: Colours, Design, No License
  • 1 Comment
  • You received an e-mail and want to share it with others without e-mailing them (as you don’t have their e-mails or there are lots of people to share with and e-mailing would be hard).

    Litmus Scope is a free service that works with the help of a bookmarklet and converts e-mails into hosted previews (supports all major web-based e-mail clients).

    Litmus Scope

    The service provides a unique link for the generated previews and the preview works in all major devices.

    Also, it is possible to create a free account for saving these previews for a longer period and editing them.

    Uptime Robot
    feed-holder
    FeedBurner
    HotScripts Marketplace
    PSD2HTML.com