Design, CG Graphics & Inspiration

Web Design Digest No.2 (27 — 05 April 2013)

This is weekly Web Design Digest No.2. Оnce a week, we will publish a digest of the latest news, useful tools for web developers, freebies and many more cool stuff from the world of web design.

Top 5 Posts

Retinize It

The best Photoshop actions for preparing designs for iOS or optimized for Retina-display websites

Map Icons Designer

Map Icons for Google Maps Suitable for Map Applications

Vertical Timeline

This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list.

Turn Your Web Application into a Firefox OS App in 5 Minutes

Let’s say you have a responsive, well-written website/app and you want to let Firefox OS users experience your work as a first class app; the following few steps will help you make those Firefox OS app dreams a reality.

3D Inset Parallax Effect

The following is a guest post by Joshua Bader. Joshua noticed that certain 3D effects on the web could benefit from adjusting perspective as the web page is scrolled. I’ll let him explain.

Design

LivIcons

Truly animated icon pack with power of scalable vector graphic for clean and perfect look at any devices.

Sync Google Fonts to your Desktop with SkyFonts

We are proud to have teamed up with Google to offer desktop versions of their popular Google Fonts free of charge. Offered for use in print, these fonts are delivered using SkyFont’s patent-pending font delivery technology and can be used anywhere.

Hyundai Motor – Showroom Product Guide Design Case Study

Check out the production case study for the Hyundai Motor group

Interactive insect field guide-

Content application for ipad, which allows digital text reading – a transformation from the printed content to digital media. The app will allow exploring and experiencing the world of insects in a new interactive way.

Hexels

Hexels is a brand new, grid-based art program for Mac and PC that lets you paint with shapes.

Jony Ive paints a fresh, yet familiar, look for iOS 7

The new interface is said to be “very, very flat,” according to one source. Another person said that the interface loses all signs of gloss, shine, and skeuomorphism seen across current and past versions of iOS. Another source framed the new OS as having a level of “flatness” approaching recent releases of Microsoft’s Windows Phone “Metro” UI.

How to radically simplify your user interface

How is it that some software lets you accomplish just as much as competing software, all while maintaining a much simpler interface? Basecamp, by 37signals, is a great example. With just a few features—each with a simple interface—you can complete all the same tasks as more complicated project management applications.

Retinize It

The best Photoshop actions for preparing designs for iOS or optimized for Retina-display websites

Infinite Scrolling: Let’s Get To The Bottom Of This

Infinite scrolling promises a better experience for users. However, the good is often accompanied by the bad and the ugly. Once we understand the strengths and weaknesses of infinite scrolling, we can begin to use it to enhance our interfaces.

How To Create an 8-Bit Pixel Character in Illustrator

If you’re a regular reader of my blog you’ll know I love creating artwork in Illustrator using simple or basic shapes. This tutorial takes that idea to the extreme by using nothing by the rectangle tool to create a simple 8-bit style pixel character. Pixels are usually associated with Photoshop, but the great thing about Illustrator is your artwork is 100% vector, so unlike Photoshop you can scale your design to any size while retaining those blocky 8-bit characteristics.

Fresh and Creative Examples of Business Cards

Business card is something that expresses your individuality and reflects the idea of what you are working with. And who said that the first impression is false? The way you display yourself and attract everyone around you lets people know how you present yourself in a business world. So, in case you have decided to get yourself a business card and you have no idea of what is it going to look like, we would like to inspire you with our collection of 40 Creative Examples of Business Cards.

Interview with Designer: Fred Nerby

Fred is another one of the well known faces within our industry thanks to a few of his projects getting very popular on online communities especially Behance. He is a great inspiration for many – including myself – as his skills are simply breath taking.

Web Development

Hot in web standards: March/April 2013

Lea Verou on the latest developments at the W3C, including plans to unify testing resources, native lazy loading discussions, CSS Overflow and a new Working Draft of SVG 2

Editr

Editr – HTML, CSS, JS playground

Bootstrap Toolbox – Tools, Utilities, Generators and Templates

In this collection, we have put together some of the best Bootstrap resources. Nay! We have tried to create the ultimate Bootstrap resource page: utilities, generators, templates… and much more! So go ahead, check ‘em out, and have fun creating miracles with Bootstrap!

How to mark up subheadings, subtitles, alternative titles and taglines

Advice is now provided in the HTML spec on how to mark up subheadings, subtitles, alternative titles and taglines using existing and implemented HTML features.

Image Sprites VS Web Icon Fonts

There are a bunch of ways to increase the performance of your website. Many today are using image sprites and/or icon fonts. They help add a visual flair to your website, but also help decrease load times. This is all great, but you shouldn’t just jump into using either of these solutions without first knowing what their advantages and disadvantages are.

Launchlist – Your one stop website checklist!

The product was born out of frustration. For too long we had been using archaic methods to conduct pre-launch testing and the web was an obvious choice to do it better.

noBackend – build data driven apps without thinking backend.

noBackend is a new approach to build data driven apps without thinking backend.

Turn Your Web Application into a Firefox OS App in 5 Minutes

Let’s say you have a responsive, well-written website/app and you want to let Firefox OS users experience your work as a first class app; the following few steps will help you make those Firefox OS app dreams a reality.

9 Ways to Optimize Your Front End Performance

As our browsers implement more and more features and the web moves more and more toward mobile devices, the need to keep our front end code compact and optimized becomes more important. What’s great about the front end is that there are many simple strategies and code conventions we can use to to ensure optimal front end performance. This post aims to provide you nine of these code tips, tips you could probably implement on your existing sites in matter of minutes!

Turbulenz Engine Goes Open Source

We’re excited to announce that we have released the Turbulenz HTML5 game engine as open source under the standard MIT license. The open source project is available on GitHub

Mixing HTML Pages Inside Your WebGL

Wouldn’t that be cool if we were able to mix normal web pages in our webgl? To interact with them as we usually do? to view them, to click on them… To scroll, to hover or even to type in input tags. Oh yeah it would be so great! We, webgl people, are currently an isolated Island in the web world. Being able to mix with normal page would give us access to so much interactive content. In this post, we gonna see how to do exactly this: how to seamlessly mix normal DOM elements in our webgl scene. They will actually appear as part of the 3d scene. Don’t worry it is surprisingly easy with three.js.

3D Inset Parallax Effect

The following is a guest post by Joshua Bader. Joshua noticed that certain 3D effects on the web could benefit from adjusting perspective as the web page is scrolled. I’ll let him explain.

Fixed Background Scrolling Layout

A simple scrolling layout with fixed background images using background-attachment: fixed and a navigation. The page will scroll smoothly to the selected section.

Vertical Timeline

This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list.

Structure

A minimal Sass and Compass web structure for responsive design and development.

CSS

CSS Animatable Properties

Rodney Rehm made tests to check the browser support of all the CSS animatable properties as part of his epic article CSS Transitions — Thank God We Have A Specification! This is a summary of the test results.

Defensive HTML and CSS

When it comes to rendering on somebody else’s DOM, you can’t naively write HTML and CSS like you might for your own self-contained web application. You’ve got to think carefully about how preexisting CSS and JavaScript code might affect your application.

20 Exceptional CSS Boilerplates and Frameworks

CSS frameworks have been the foundations of web projects for many years. However, in the age of responsive design, a framework has even more benefits. A well-built CSS framework or boilerplate can streamline the design process, save huge chunks of development time and ensure your website scales properly on all devices.

Vanishing Acts: The CSS :empty Selector

CSS writers are the blind swordsmen of web development: we pen declarations and throw them at HTML documents hoping that something might stick, but rarely are we aware of the specific content of a selected element: the question of how many words are in a paragraph, or if it contains any words at all, has traditionally been the responsibility of JavaScript, PHP, and other languages.

SASS Triangle Mixin

If you’re not already using a CSS preprocessor then you should probably start now. They make writing CSS much more fun. I started out with LESS shortly after starting at Fi last year but have now moved over to SASS. They’re both pretty similar but SASS has slightly more features.

Circuler Tooltip (SO)

Tooltips like a circul. CSS only.

Really Simple, Organized, Media Queries with Sass

Breakpoint makes writing media queries in Sass super simple.

CSS Slider

Pure CSS, not a script to be found

Automatic Figure Numbering with CSS Counters

Learn about CSS counters, the figure element and how to combine both for automatically numbering figures in a web page.

20 Responsive Web Design Tutorials for Web Designers

Today, we’re featuring 20 tutorials on Responsive Web Design for web designers. These will aid you to learn how to design fluid grid website layout easily.

A Look Into: Cubic-bezier in CSS3 Transition

This article is part of our “HTML5/CSS3 Tutorials series” – dedicated to help make you a better designer and/or developer.

CSS3 Geometry Blog

CSS3 playground originally inspired by geometrydaily.tumblr.com, curated by Lara Swanson

Text Opening Sequence with CSS Animations

A simple and fun text opening sequence effect with blurry letters using CSS animations.

JavaScripts

I know jQuery. Now what?

I gave this talk: I know jQuery. What now? at jQuery UK 2013, but instead of my usual approach of post-it explosion on my desk, I wrote a post first, and created the slides from the post. So here is my (fairly unedited) quasi-ramble on how I used jQuery, and how I’m looking at where I’m using native browser technology.

jQuery Annotated Source

Read the jQuery source like a book like a boss.

JavaScript Patterns Collection

A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns (upcoming).

Sweeten your JavaScript

Sweet.js brings hygienic macros from languages like Scheme and Rust to JavaScript. Macros allow you to sweeten the syntax of JavaScript and craft the language you’ve always wanted.

MixItUp

MixItUp – A CSS3 and JQuery Filter & Sort Plugin

iio – is an Open Source Initiative

The iio Engine was created to streamline the process of developing HTML5 applications. The ownership of the iio Engine rests in the hands of the open source community. Contributions to the core library and additions to its collection of extension packages are always welcome.

Fantastic WYSIWYG editor on jQuery

Create word-processed text on the web using a reliable, fast and unbelievably beautiful editor.

Kartograph

Kartograph is a simple and lightweight framework for building interactive map applications without Google Maps or any other mapping service. It was created with the needs of designers and data journalists in mind. Actually, Kartograph is two libraries. One generates beautiful & compact SVG maps; the other helps you to create interactive maps that run across all major browsers.

Even Better In-Browser Mockups with Node.js

Designing in the browser has all sorts of benefits, like producing more accurate, comprehensive results and removing the extra step of converting from image file to markup and CSS. But even sites designed in a browser still require pasting in content, faking interactions with the server, and creating placeholder JavaScript that isn’t usable on the live site.

Your First Backbone.js App – Service Chooser

Backbone.js is a library that gives structure to web applications by providing models, collections and views, all hooked up together with custom events. It connects your application to your backend via a RESTful JSON interface, and can automatically fetch and save data. In this tutorial we won’t be using the advanced features of the library – everything will be stored client-side. Backbone does not replace and does not depend on jQuery, but the two work together nicely.

Sco.js

A twitter bootstrap javascript extension

Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js)

In this article, I’ll share the techniques I employed in creating this plugin, techniques that can make your lightbox much faster and easier to use, whatever the device being used.

WATable

WATable – a jQuery table plugin with sorting, paging, filtering…and other good stuff. Try it! It’s easy!

Freebies

FreeTypography

FreeTypography – The best free fonts, typefaces and typography

Map Icons Designer

Map Icons for Google Maps Suitable for Map Applications

19 Nature Silhouettes Trees & Grass Brushes

This was one of the first sunny day this spring. Bike trip with camera and here you have – a nice pack of 19 Nature Photoshop Brushes.

33 Pretty Swirl Brushes for Free Download

Here are the 33 Pretty Swirl Brushes for Free Download. This kind of brushes is applicable to any design project as this list also includes not just the smooth swirl brushes but also the grungy, spiky and floral ones.

40 Free Elegant Fonts for Your Inspiration

In the following round-up we have collected well-designed, elegant Fonts.these all fonts are highly responsive.We have collected engaging Fonts during this post for you to utilize. Take it slow and check these out for you to pick out those that you just like and you’ll be able to transfer them. Enjoy the list of 40 Free Elegant Fonts for your inspiration

100 Free PSD Business Card Templates

Today we are sharing a mega collection of psd business card templates. All of them are absolutely free to download.

Top 20 FREE PSD Website Templates

This is a collection of top 20 FREE Website Templates PSDs. They can all be easily edited because are fully layered and they also have pixel perfect designs.

SHARE THIS POST

The article has been written by the Zfort Group, an IT Outsourcing Services Company. Zfort Group specializes in top-notch IT outsourcing services since 2000.

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.