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

Archive for the ‘Design’ Category

Once you understand the basics of CSS it’s natural to move onto more detailed subjects. Animation is one such area which has been quite complicated until recently. CSS3 allows frontend developers to animate subjects without any JavaScript whatsoever. SVG images can be used with CSS3 to create stretchy and vectorized animations. The following tutorials should get you on the right track towards mastering SVG animation with CSS.

Christmas Lights

animated svg christmas lights

SVG Files in Illustrator

exporting svg from adobe illustrator

Read the rest of this entry »

Most modern web browsers support the latest CSS3 properties and have seen a growing adoption by audiences around the world. Web fonts are quite popular and only getting easier to include in a typical HTML5 website. But one of the best solutions with this newer technology would be icon web fonts.

Web designers can include fonts made with icons to embed scalable icons into any layout. This gallery below includes 15 free open source icon web fonts you can download and use in any project(s). New icon fonts are released every year and it has become a very popular means of achieving clean user interface design.

Captain Icon

captain icon github open source webfont

Read the rest of this entry »

Teams are no longer popular and it has been found that working in one can be unproductive sometimes. When you need to stay in contact with an individual for one process, as well as with another individual for a different one, it can be difficult to have a fast process of delivering the product to your client.

It is for this reason why web designers who are based in solution orientated processes are now focusing on a role that involves being a one-man operation. This can be achieved via themes that revolve around multipurpose techniques and these involve layouts that are pre-made and which make everything better and faster.

How a multipurpose WordPress theme can help you with your productivity

In the modern day and age there are many good web designers, so competition is fierce. This means that designers are often fighting for the same set of clients, as well as the same type of attention and technology.
Read the rest of this entry »

  • Tags:
  • Filed under: Web Based
  • Transitioning from digital design to print design is no easy task. It requires a fundamental understanding of the print medium along with the underlying software. Although learning the fundamentals of CMYK and paper quality is just a matter of reading, you’ll need to do quite a bit of practice to master print design software.

    If you want to get into print design then please take a look over these 20 InDesign tutorials. They range from beginner to intermediate with something for everyone. Whether you want to design magazines, CD covers, or style guides, these tutorials can get you there.

    eBook Cover Design

    indesign ebook cover howto

    Read the rest of this entry »

    Every designer would agree that typography is a huge part of web design. But the process of choosing which fonts to use can be a hassle. Thankfully there are several free online webapps to help you decipher online font families, pick your favorite(s), and design text in a way to match your layout. Take a gander over these tools and see if any can help you launch that next kick-ass project.


    typecast typography online webapp tool

    Read the rest of this entry »

    As new UX and UI tools come on the market, many of them have new and improved features that can make your design efforts faster, easier, and with more satisfying results.

    Nearly all of the highly-rated tools listed below have powerful rapid prototyping features. Most of them make it easy for you to share your work with others, and several of them are especially suited for use by widely dispersed project teams. Our listing also includes UI design resources. Stay tuned and check-out the newest and perhaps the best UI and UX tools and eesources on the market. performs many of the same functions as do many of the other tools in this list, but this tool takes the art of rapid prototyping to the next level. It is especially adept at giving you valuable insights as to what your final product will look like and how it will perform, while you are still in the early stages of design. Thanks to its extensive and comprehensive UI library, has made the use of static mocks and hotspot prototypes obsolete.
    Read the rest of this entry »

  • Tags:
  • Filed under: Software & Tools
  • Although JavaScript is seen as a reliable language for animation CSS3 has also become a great choice. Transition effects can be used even in browsers where JavaScript has been disabled. But the greatest opportunity comes with a combination of both CSS3 and jQuery using fallback methods.

    This post includes a handful of brilliant CSS3 animation libraries using transition effects. Many of them are based solely on CSS3 while others utilize a jQuery fallback. You’ll also find a small heap of open source code snippets which implement the same functionality with animated transitions.


    css open source jquery plugin animition

    Read the rest of this entry »

    The popularity of Google Material Design has engendered a new era of user interface conceptualization. Both mobile applications and websites can be affected by Material Design precepts. This gives every type of interface designer a new style guide to follow.

    In this gallery I’ve organized 15 handy resources for designing with Google Material. These include animations, buttons, CSS libraries, and a whole lot more. Take a peek at the examples in this post and see if anything can prove useful in future work.

    Material UI

    material ui design google open source

    Read the rest of this entry »

    Dynamic websites often utilize preloading screens to guarantee that all resources are loaded before the page fully renders in the browser. Preloading screens date back to old Flash websites but have made their way into HTML for resource-heavy layouts.

    These tutorials and plugins offer a pool of knowledge for crafting your own preloading screens. The technique requires JavaScript to track HTTP requests and hide the loading screen once all the resources have completed. You won’t find this technique useful on every website but it does come in handy on large dynamic websites.

    Codrops Preloading

    codrops preloading screen tutorial open source

    Read the rest of this entry »

    Not every designer loves prototyping but it is a huge part of the creative process. Learning how to prototype on paper can be a great start, but it’s not always the easiest method. Software and webapps have been created to make the process easier for wireframing interfaces and drafting prototypes or storyboards digitally.

    Take a look at these tools and see if anything catches your attention. Getting started with prototyping is much easier than you would think! Just like any skill it requires patience and lots of practice. Some of these products are free while others offer a free demo/trial account. But even if you don’t like prototyping on a computer you can always go back to drafting on paper.

    Frame Box

    framebox lightweight wireframing tool

    Read the rest of this entry »

    Uptime Robot