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

Usually, clients can imagine how a design or logo will look like in real world and realistic mock-ups help to overcome this issue a lot.

Webdesigner Depot has teamed up with PSDCovers and giving away a must-have mock-up kit.

Photoshop Mock-up Actions

The kit includes 100 mock-ups as Photoshop actions and there are items for books, brochures, business cards, CDs, bags and more.

All of them come with different views and, once created, you can customize them further with tuning the shadows, colors, etc.

The mock-ups are high-quality and they render up to 12,400 x 9,300 pixels at 300ppi.

10 years ago, icons were all about 3D and being colorful. Then the Web 2.0 effect came and shininess is added.

Right now, it is all about flat icons and, Flaticon, a website that enables us to search them quickly is pretty handy.

There are icon sets created by the developers (Freepik, which is a creative resources search engine) and also by other designers.

Flaticon Photoshop Plugin

It is possible to make a single icon search or browse them in categories or sets.

Flaticon now has a free Photoshop extension that makes searching simpler, right in the image editor we always use.

Using the extension, we don’t have to leave Photoshop and can find the icon + get it inside the canvas quickly.

TemplateMonster is one of the biggest and oldest brands when it comes to website templates.

They have a huge repository of templates for anything, standard HTML, mobile, e-commerce, Facebook and more.

Also, they have WordPress themes (here) + Joomla templates (here) and they are giving away “any selected template” to 5 WRD readers.

Both of them have 1000+ of options to choose from and they can easily be filtered through categories (business, sport, design, etc.) or colors.

TemplateMonster Joomla Templates

How to join the giveaway?

In order to join, you can simply answer “which TemplateMonster template would you like to win?” in the comments.

The winners will be selected randomly with the query below and announced as an update to this post 1 week later (29 Oct 2013).

SELECT * FROM wp_comments WHERE comment_post_id=4707 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 5

Good luck to all.

The winners

Here they are:

  • Wesam Alalem (comment #1279753)
  • Etrimon (comment #1279721)
  • Makarand Patil (comment #1279778)
  • Drake (comment #1279765)
  • mohd (comment #1279709)

Congratulations to the winners and thanks to everyone for joining.

Sometimes, we need to take environment-specific actions while working on web projects.

Device.js is a tiny JavaScript library that simplifies writing conditional CSS or JavaScript that is based on the platform, operating system or browser.

Device.js

The library detects them and adds specific classes to the <html> element, just like <html lang="en" class="android tablet landscape">.

But that’s not all. Device.js has JavaScript methods to detect them too. And there is support for all the major operating systems + browsers.

Single-page scrolling websites are used widely for years and they are very useful on providing information quickly.

On the other hand, the one-page sites where no scroller exists and the page content being changed with JavaScript reached its max. popularity with the Apple’s iPhone 5S website.

jQuery One-Page Scroll

One Page Scroll, a jQuery plugin, simplifies creating such websites so easy.

It requires minimal setup, just create your HTML structure, call the function and you are ready-to-go.

Optionally, the easing function, its speed and looping behavior can be set too. And, it has support for SEO-friendly URLs for each page.

HTML5 video is awesome and makes consuming video on multiple devices so easy.

However, it also has its own problems: the videos run on the native video player in mobile devices which makes interacting with the rest impossible (or displaying multiple videos at the same time) and different versions are required for browser compatibility.

Frame Player

Frame Player is an original method to display video; it uses JSON data (of data URIs) and the video is mimicked by showing the images frame-by-frame.

It is compatible with all browsers, can be customized however preferred and PHP + Nodejs converters are available.

Considering there will be no streaming, it is a good idea to prefer to player on short videos.

Sir Trevor is an open source website content editor which does not presuppose anything about how things will be rendered.

It only uses JSON and Markdown and does not store anything in HTML.

Sir Trevor

The editor uses blocks for content and multiple block types exist by default: text, image, quote, list, video and more. Also, new block types can be created with ease.

Sir Trevor is totally client-side, has options for customization and provides callbacks on every action.

FerroSlider is a jQuery slider for creating full-page sliders (or content/image sliders) of almost any type.

The contents can be placed in a flexible way, horizontal + vertical, and the plugin will simplify browsing through them easily.

FerroSlider

It uses CSS3 transitions for a good performance, works well with responsive layouts and works on mobile too.

The plugin has lots of customization options, has ready to use controls for navigation (arrow, bullet..)and can load content via Ajax.

Rotating text is not a heavily preferred UI pattern but it has its uses, specially for landing pages.

This jQuery plugin, by Pete R., makes such text-rotating so easy and fun.

jQuery Text Rotator

It works by simply storing the “to-be-rotated content” inside a <span> with class rotate and separating them with commas. The plugin handles the rest.

There are multiple rotating effects and the interval can be customized too.

Layers CSS is a lightweight CSS framework that doesn’t emphasize any designs but handles the main structure.

It has support for responsive layouts with fluid grids and simple classes are used for dealing with them.

Layers CSS

There are styles for forms, tables, lists and more but no colors or rounded-corners, customization is totally up to you.

Layers also comes with handy “everyday-use-styles” for clear, floats or hiding.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com