If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebook or by subscribing to our RSS feed.

0

1

2

3

4

5

6

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week.

LRXD (Responsive)

LRXD

Zone (Responsive)

Zone

Dayrise

Made Together

Muziekpark

Negative Space

Studio MPLS

Heads VS Tails

Being a web designer means you have a tough job. Only the really determined ones make it big in this industry. Between coming up with a design idea, actually doing the work and interacting with those precious clients, designing sites is a real challenge. And besides those 3 steps, there is another less known reason why wannabes fail.

One crucial but not often talked about element in a web designer’s life is that first step when creating a design: gathering inspiration. It’s not enough to simply look at what other designers are doing. Really brilliant designers step it up. They ensure they are surrounded by inspiration.

Their living circumstances are a real-life representation of their design style.

Each designer has his own unique set of preferences, his own style for creating websites. Some like the modern, minimalistic look, others go for a more vintage or grunge style.

That’s why we’ve put together this post. Each of the Web Designer Houses below will appeal to a certain web design style. We’ve teamed up with the guys from Freshome to bring you this selection. They have a daily inspiring selection of apartments, villas and interior design elements, so choosing residences for each web designer wasn’t hard.

1. Grunge Style

Here’s a great example of brutal architecture mixed in with an awesome modern style coming from this veritable web designer loft in London. The high, grunge, “unedited” ceilings combined with unforgiving interior design details will have every hardcore, grunge web designer waking up to a rejuvenated, inspired self.

Resulting Designs:

2. Futuristic/Sci-Fi

One of the less utilised but very appealing design style is the futuristic one. We probably don’t see so many websites designed in this manner because of those (lovely) clients, who aren’t always interested in innovation. Nevertheless, this style addresses the Star Wars fan within each of us. This Madrid based Sci-Fi mansion is a place not only for a futuristic web designer, but for every IT nerd with a passion for Elon Musk’s SpaceX!

Resulting Designs:

0

3 Modern Abstract Style

Designers who work within the boundless area of abstract design often find themselves contained by conventional “housing procedures” (e.g. boring, normal houses). But not anymore. They now have the possiblity of owning this Wave House from Turkish designer Gunes Peksen. Its crashing wave design, all-white decor and spaceship-like interior will increase any abstract designer’s EP-APM (Effective Photoshop Actions Per Minute). Don’t bother to look that one up, I’ve made it up. I love coming up with performance indicator acronyms.

1

2

3

Resulting Designs:

4

5

4. Nature Syle

When it comes to designing websites which call upon Mother Earth, you need an open, natural living environment for inspiration. Preferably somewhere near a river or lake, with a forest nearby. That’s exactly what you get with this Lithuanian Nature Home. An awesome motive to design with an earth color palette in mind and use elements such as leaves and flowers.

6

7

Resulting Designs:

8

9

5. Paper Fanatic Style

Sometimes, the webdesign world finds itself at a crossroad. Either stop the innovation process constantly bubbling within or let go and accept the pioneers who take things further and further. I love web designers who vote for and act on the second option.
A “paper-fanatic” web designer would absolutely do that.

They are web designers who always use paper backgrounds, paper-like effects and usually create a newspaper feel to their sites.

Well, if you are one of those, you’ll be more than happy to take residence inside Don Lucho’s Casa de Karton. A house completely made from paper. And believe it or not, this one’s a bit cheaper than all the others. Just make sure you don’t twist and turn in your sleep. You might get paper cuts or fall through the floor on your downstairs neighbor’s coffee table.

0

1

2

Resulting Designs:

3

4

5

6. Vintage & Retro Style

Who wouldn’t love to travel back in time to see Edison’s experiments? Or even further back, for a little R&R in a Shakespearean Theatre. Vintage web designers appreciate adventures, and by living in this vintage project-apartment from Romania, their imaginary journeys would really come to life. Sadly, actually going on such a journey would also mean the end of their job, as the Internet wasn’t invented until a few decades ago. No worries, the brand-new, state-of-the-art Ford factories are always in need of workers for their up-and-coming Model T. I hear it’s gonna revolutionize the world of transportation.

6

7

8

Resulting Designs:

9

0

1

7. Typography Style

I understand the love for beautiful typography. I resonate deeply with it. From Grotesque to Roman typefaces, a typography-fan web designer will find this Real Estate Typography Project pretty funky. It’s basically an optic trick, by which you can read the text from only one position. Although we have yet to find a house which actually makes use of this anamorphic illusion, everything is not lost.

Now that you know it can be done, simply test it by trial-and-error in your current house! Make sure you have enough paint for the “error” part.

2

3

4

Resulting Designs:

5

6

7

That’s it then. No more excuses from now on. Good-bye creative blocks and monsters. You’ve now got the secret to always be inspired, the true Feng Shui of a designer: his house. Your living conditions reflect themselves in your work. But don’t be too hard on yourself if your current house doesn’t match your design style. You can easily fix that by moving into a designer house! I think a reinterpretation of Vicent van Gogh’s most famous quote paints the best picture here.

Here’s what he said:
“If you hear a voice within you say ‘You cannot paint’, then by all means paint and that voice will be silenced.”

And applied to designers today:
“If you hear a voice within you say ‘You cannot design’, then by all means move to another house (and stop hearing voices).”

So which house would you take from all those presented?

Everyone has one. You know who we mean. That one friend who just has to have the latest gadget or gizmo the second it’s available. The guy who waits on line at the Apple store at midnight for the latest iPad, or the Verizon Wireless store when the newest Android phone hits the street. He just loves showing off that he beat you to the punch on the latest gizmo.

Well, we want to help you one-up that friend. As a Web Designer, you know the value of a good font. And with this Mighty Deal from Fontfabric, you’ll be getting an incredible value. By saving 90% off the standard price, you’ll be getting your hands on 24 versions of the Nexa Slab font. That’s 24 reasons to make your friend drool!

Nexa Slab Screenshots

Nexa Slab Highlights:

• 24 Fonts in 1
  With the Nexa Slab font you won’t just get a fresh take on typesetting, you’ll also get a huge amount of diversity, as it comes with a slew of different weights and forms. Each of the 3 basic forms (italics, obliques and uprights) comes with 8 unique weights, giving you a total of 24 different Font variations! Weights include: thin, light, book, regular, bold, xbold, heavy, and black.
• Drawn from Rich Slab Serif Fonts
  Based on classic slab serif fonts like Lubalin Graph, Rockwell and Memphis, Nexa Slab has been designed with some carefully constructed thick and thin bars, containing a low contrast between them. A mix of elegance and strict geometry, Nexa Slab continues the tradition of classic Neo-Grotesque slab serif fonts.
• Style Perfected
  The high-quality Nexa Slab font is as elegant as it is serious. That doesn’t mean, however, that it’s rigid or monotonous. Far from it. This beautiful typeset can be a true work of art when placed in the right designer’s hands.
• Versatile Font
  Not only is Nexa Slab a fantastic font for the Web, but it’s a great choice for print too including T-shirts, logos, posters, and more. It’s also perfect for headings, as it fits in beautifully with both small and large typesetting text blocks.
• OpenType Features
  Nexa Slab includes a number of helpful OpenType features such as:
  • Lining figures (proportional and tabular)
  • The “f” ligature set
  • Alternate characters (a, g, y)
  • Automatic fractions
  • Automatic numerators
  • Automatic denomerators
  • Automatic subscript and superscript
  • Automatic ordinals
  • Extended language support (most Latin-based scripts supported)

Pricing:

The Nexa Slab Font with all its weights and forms normally sells for $99 (Desktop or Web Font versions), but for a limited time only, you can get all 24 versions of the font (either Desktop of Web fonts) for just $9! OR get both the Desktop and Web fonts together for just $16! That’s a whopping 92% off the regular price!

Click the “buy” button to choose your preference and give your text a much-needed makeover.

Steve Simpson is an English born illustrator that currently lives and works in Dublin. He works mainly in the areas of packaging, advertising and illustrating children’s books. His impressive body of work has a unique…

Smaller ecommerce sites have the luxury of not having to follow the pre-defined design styles that many larger corporate stores need to use. They really don’t need to have a content-heavy landing page, a mega-menu with hundreds of categories, or even a section for suggested or alternative products. All smaller stores need for their fantastic products is a great designer that will build a simple and modern site around those items. Of course, a buy-it now button would be helpful as well. Nothing more is needed. Shopping really does not have to be complicated.

Many smaller stores still have the notion that they need to look like one of the big boys. That really is not case as we prove with these 50 ecommerce sites below:

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

One of the greatest aspects of using WordPress to power your website is its ability to run plugins. They easily extend the capabilities of your website and allow it to perform functions that it otherwise couldn’t without some hardcore coding. And since WordPress is so wildly popular, that means there are plugins for just about every type of site enhancement you can think of. Even if there isn’t a plugin available to perform a specific task, odds are you can develop it yourself or hire someone else to do so.

As of this writing, there are currently well over 25,000 plugins listed at WordPress.org’s Plugin Directory. While that ensures that you have a lot of choices, it doesn’t necessarily make the job of finding the best plugin for you any easier.

With that in mind, here are some tips for choosing the right plugins for your WordPress powered website:

General Rules of Thumb

While the functionality and goals of WordPress plugins vary greatly, there are some characteristics that separate the good from the bad.

Good plugins should:

1. Provide clear documentation of how to implement the software into your WordPress install and change settings.
2. Have a dedicated developer who is responsive to user issues. If you’re using a plugin listed in WordPress.org’s Plugin Directory, check out a plugin’s support tab to see if issues are routinely marked as “resolved”. If not, see if the developer at least has a commercially-based support system that will allow you to get help if needed.
3. Updates the plugin on a regular basis to fix bugs and/or add new features. At the very least, the occasional bug fix is much appreciated. It never hurts to check out a version history if one is available. That will tell you how frequently updates are made.
4. Allow users to easily customize the plugin’s look to match their website. Often times, the best plugins have their own set of CSS classes or even a template-based system that is clearly defined in their documentation.  This can aid greatly in getting things setup the way you want. A plugin that doesn’t have this flexibility means you might have to hack away at the software’s code – meaning you won’t be able to update the plugin without losing your changes

Does Popularity Matter?

To a point, I believe it does. Looking through WordPress.org’s Most Popular Plugins list shows a who’s who of big name, well-liked titles. Old standbys like Jetpack, Contact Form 7, All in One SEO Pack, and NextGen Gallery have all been downloaded millions of times. They are popular because they work and have become staples for many designers and developers.

But popularity doesn’t always mean something is really good. New plugins are written for WordPress each day. Some are commercial in nature and aren’t listed within the official Plugin Directory. Depending on the functionality you are looking to add, there could be literally dozens of different choices.

Looking at the number of times a plugin has been downloaded can certainly be a good indicator of how good it is. But just like everything else, popularity can be a fleeting thing for a plugin. Doing a little more research can help determine if a plugin has gone dormant (by checking its last updated date), stripped of functionality due to “going commercial”, or simply surpassed by a competitor.

Commercial or Free?

The old adage of “You get what you pay for” isn’t nearly as relevant as you might think when it comes to WordPress plugins. I’ve personally used free plugins that simply blow away their commercial competition. Then again, I’ve used commercial plugins that were both reasonably priced and constantly being updated/improved.

Take shopping cart software for example. I’ve used a few commercial plugins (I won’t name names) that frankly left a lot to be desired. And I’ve recently tooled around with WooCommerce, which is free (although they do charge for add-ons). Out of the box, I’ve found it way better than plugins I have paid to use.

On the commercial side, I’ve recently fallen in love with a slider plugin called Soliloquy. I like its ease of use compared to some of the free options I’ve tried.

One thing I do recommend is trying out the free alternatives first. Why? Because there is no cost involved and you can at least get a sense if something is going to work. If not, there may be a commercially available solution that will work better.

In Conclusion

With so many choices, it can be difficult to find and choose the right plugins for your WordPress powered website. Ideally, there would be one metric that tells us what works and what doesn’t. While that doesn’t exist just yet, you can simplify the process by doing a little research on things like documentation, support policies/response times and the history of the plugin’s popularity. It also doesn’t hurt to look at user ratings and reviews from both the official WordPress Plugin Directory and other trusted sources on the web.

What do you look for in a WordPress plugin? Any tips for finding the best ones? Leave a comment below!

You might also like…

Many designers are confused about how they should go about making their designs sell their clients’ product or service to potential customers. After all, everyone knows that the whole point of a punchy design is to sell something, right?

Well, wrong. Your designs aren’t technically meant to sell anything. In fact, it’s actually almost impossible for them to do so if the viewer has never seen them before. We’ll go over what you’re really supposed to be doing as a designer, and just what role your designs play in your client’s sales funnel.

First Impressions

Your viewer’s first impression of your content does not need to result in a sale. It’s nice if it does, but your client and even you may not know what your design is actually doing. What your main goal is as a designer is to make a memorable impression. Your design should stop your viewer in their tracks and compel them to go on to the next page, image, or piece of copy.

Basically, your design has to seize your viewer’s eyeballs, and hold them for long enough that they move on to the next visual cue. Like a street patrol officer waving a flag that directs traffic, your design must be eye-catching and invite curiosity about what is going on.

Stop, Look, and Listen

It’s a common piece of conventional wisdom in copywriting that the purpose of your first sentence is to get someone to read the next sentence, and so on until they get to the end and you’ve made a sale. Design is the same way, and works alongside copywriting to achieve the same effect. Selling is a process that usually doesn’t happen immediately.

[Image Source]

People have to get to know your brand and whether or not it’s relevant to them specifically. You can only do that through telling a compelling story that’s written in their language. To start the process, they have to be willing to listen to what you’re saying.

Don’t Ruin The Story

As a business owner, your client has a story to tell his or her customers. That story is probably longer than a logo or a banner ad. To be compelling enough for customers to want to buy, the story must be told gradually. Any other method cheapens the whole experience and sours your prospect against any potential sale.

Image Source: End Movie Screen via Shutterstock.

Think about the last time you went to the movies. What if, rather than letting the film play for the audience, the filmmaker simply popped up on the screen and told you a quick summary of what happens. You’d be furious. You came to see a story, not some random guy telling you a bunch of spoilers. Your prospective viewers are the same way. They don’t want to be inundated with the quick and dirty details of the story before they’ve had a chance to experience the entire thing unfold organically.

Let Them See Themselves

As consumers, we like to see ourselves reflected in any marketing materials directed toward us. This means that, if I’m a 30-year-old mother of 2 looking for a fun game I can buy for my kids, I do not want to see images that aren’t relevant to my exact situation. I don’t want to see 20-year-old college students, or 70-year-old seniors, or dogs, or babies or zebras or teddy bears. I want to see women in my age range with children around the same age as mine, enjoying the product I’m looking for. If I don’t see this exact combination, I’m out of there.

We all look for stories that we can relate to – those stories that closely mirror our own and provide a solution that would be appropriate for us. The bigger the purchase, the more important this becomes. You would never purchase a luxury car from an ad that was aimed at a completely different demographic from your own.

Targeting a niche is especially important in this day and age, when there are so many choices out there. If I don’t find what I’m looking for in one place, I can go to 50 others just like it. As a designer, it’s your job to make sure I know that those 50 other businesses are not just like your client’s. Your client’s business is different. It’s just for me. Your job is to tell me why.

In Conclusion

It’s worth mentioning that, while the purpose of your design may not be to directly make a sale, it still plays a vital role in the overall sales process. Without your design, no one would bother looking at your client’s product or service offering at all. Just like you’d be less likely to want to go see a movie based on a text-only description, rather than a full-color poster or trailer, your viewers are dying to see what story you can entice them to want to listen to.

What Do You Think?

How do your designs help draw in your client’s target audience? Have any ideas for how to enrich the storytelling process we as designers engage in with our work?

You might also like…

You could also browse our Freelance category, or view all of the articles from Addison Duvall.

Are you a web designer who hates taking PSD files and converting them into HTML and CSS? Would you rather focus on creating the designs and leave the coding part to someone else? Maybe you have too much on your plate to complete the job on time? We have a great giveaway for you! Five lucky winners will receive $200 for PSD to HTML coding from PSD2HTML.com.

PSD2HTML offers a crazy wide range of services. They follow the hottest web design and development trends and always have some amazing offers. Now, if you need a Responsive Layout for your website, you get the HTML5/CSS3 markup option coded for free! You just send your PSD files their way, and they will turn them into a valid fast-loading code. Their team will make sure it looks good in all popular browsers and mobile devices of your choice.

With their expansive resources of over 370 employees and 8 years of experience, PSD2HTML guys can handle a project of any type or complexity. They have pros in WordPress, Joomla!, Drupal, Shopify, Magento development, mobile or responsive websites, newsletter templates or anything else you can think of! They are trusted by thousands of freelancers and companies, including Smashing Magazine, Buy Sell Ads, Toyota, Excite etc. and have completed over 72,600 projects to date. Just check out their awesome portfolio and examples of code they created!

How To Enter

By entering you get the chance to win one of five prizes, each worth $200 to spend at PSD2HTML.com on any services they offer.

All you have to do is:

• Leave a comment below
• Tweet about this contest and post a link to your tweet in the comments section

This giveaway will run for the next 7 days, ending on July the 22nd, 2013.

Winners will be randomly selected and contacted via email within a couple of days after the competition ends.

Good luck to everyone!

Over the last couple of years, with the advancements in web technologies, we have seen a rapid rise in the number of sites that have broken away from using typical and boring layouts. No longer is choosing the number of columns your only option. Nowadays you can easily have a layout that cleverly and seamlessly arranges content into a grid (masonry), or a parallax scrolling layout, or even a layout that allows you to define a custom path for users as they scroll through pages.

At first glance a site with fancy animation effects may seem tricky to build. But that is not the case, as you will discover from collection of jQuery plugins we have for you below. So, break off those shackles and with the help of these plugins go and have fun and build a truly dynamic layout in your next project.

jQuery Scroll Path is a plugin that, as its name states, lets you define your own custom scroll path. The plugin uses canvas for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initializing the plugin.

Scrolling with Scroll Path can be done with either the mouse-wheel, up & down arrow keys or the spacebar. It also allows for full page rotation, using CSS transforms.

jQuery Scroll PathGitHub

Powered by TweenMax and the Greensock Tweening Engine, SuperScrollorama is a popular plugin for creating scrolling and animated presentations.

SuperScrolloramaGitHub

Setting it to scroll either vertically or horizontally, fullContent.js will dynamically position a container within the width and height of the browser window, and will smoothly scroll between each container. It is an easy to configure plugin that gives you a nice presentation style layout.

fullContent.jsGitHub

PageSlide is a jQuery plugin which slides a webpage over to reveal an additional interaction pane, that usually contains secondary navigation, a form, or any additional information.

PageSlideGitHub

Stellar.js is a very easy to use plugin that provides parallax scrolling effects to any scrolling element.

Stellar.jsGitHub

Powered by Scrollorama, scrolldeck.js is a plugin for making scrolling presentation decks.

scrolldeck.jsGitHub

Packery is a JavaScript layout library that uses a bin-packing algorithm. In other words it fills all empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.

PackeryGitHub

Inspired by the jQuery Masonry plugin, Shapeshift is a plugin that will dynamically arrange a collection of elements into a column grid system similar to Pinterest. It has the ability to drag and drop items within the grid while still maintaining a logical index position for each item.

Shapeshift v2.0GitHub

Similiar to Shapeshift (above), Gridster is a plugin that allow you to build intuitive draggable layouts from elements spanning multiple columns. You can also dynamically add and remove elements from the grid.

gridster.jsGitHub

jQuery Nested is a plugin that will create a gap free, multi column grid layout experience.

jQuery NestedGitHub

0

Stalactite is a plugin that slowly and lazily packs the contents of an element. Unlike most packing libraries that try to do all the math and sorting up front, Stalactite takes a lazy approach and sorts each child element sequentially.

StalactiteGitHub

1

Freetile is a plugin for organizing your content in an efficient, dynamic and responsive manner. It can be applied to any container element and will attempt to arrange it’s children in a layout that makes optimal use of the current screen space, by “packing” them in a tight arrangement.

Freetile.jsGitHub

2

Columnizer is an easy to use plugin that will automatically layout your content in newspaper-style column format. You can specify either column width or a static number of columns.

ColumnizerGitHub

3

And, of course we finally come to the plugin that has inspired many of the plugins on this page: jQuery Masonry. Developed by David DeSandro, the very popular Masonry is a dynamic grid layout plugin that will arrange elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

jQuery MasonryGitHub