WebDesignJunkies.com

For your daily dose of inspiration

With the recent changes in the economy, a lot of developers are focused on their short-term job prospects. At the same time, it’s important to make sure that you get the most bang for your buck when it comes to taking the time and energy to learn new skills. Here is our list of 10 skills you should be learning right now to make sure that your resume is relevant for the next five years. The list is hardly exhaustive, and there are huge swaths of the industry it won’t cover (mainframe developers, for example). Nonetheless, for average mainstream development, you can’t go wrong learning at least seven of these skills — not only to the point where you can talk convincingly about them at a job interview, but actually use them on the job.

Note: This article is also available as a PDF download.

1: One of the “Big Three” (.NET, Java, PHP)

Unless there is a radical shift in the development world (akin to an asteroid hitting Redmond), most developers will need to know at least one of the Big Three development systems — .NET (VB.NET or C#), Java, or PHP — for the near future. It’s not enough to know the core languages, either. As projects encompass more and more disparate functionality, you’ll need to know the associated frameworks and libraries more deeply. Read the rest of this entry »

30 Beautiful Expressive Portraits

It’s funny how everyone has a different way to express them selves, specially in front of a camera. Expressive portraits are not only beautiful and very inspirational but they speak for them selves and it feels like they are alive, enjoy this great selection!

SEE THE REST HERE

Introducing Flashtuts+

I receive all kinds of suggestions for new Tuts+ sites, but none have been quite so numerous as the requests for us to launch a Flash tutorials site. And with good reason: we cover Adobe Photoshop, Adobe Illustrator and web development, so why not Adobe Flash?

Today we’re pleased to introduce the newest member of the Tuts+ family: Flashtuts+

Go on, open a new tab, check it out, leave a comment, then keep reading to learn more about our plans for the site.

We’ll be publishing a combination of step-by-step written tutorials and screencasts, with preview .SWF files of each effect so you can see the final result of each tutorial before you invest time in it. We’ll be providing Flash, Flex and ActionScript techniques for use in multimedia, web and UI design, games and apps. In most weeks we’ll be publishing 2 - 3 high quality tutorials, so make sure to subscribe to the Flashtuts+ RSS feed so you don’t miss a thing.

If you think you have the skills to create a screencast or text and image tutorial for Flashtuts+, it’s easy to familiarize yourself with the guidelines and pitch your idea. We’re hungry for user contributions and pay $150 USD for an accepted tutorial.

Meet the Editor, Ian Yates

Ian Yates is a British graphic designer specializing in illustration and web design. He’s also a regular Vectortuts+ author with a passion for Flash! Based in Spain, Ian works with clients far and wide and is proud to be part of the world’s growing community of freelancers.

We hope you enjoy Flashtuts+!

Original Post Here

Testing your work with a screen reader, especially if you’re building something that is more advanced than a basic info website, is likely to help you create a more accessible website.

The best thing is to have actual screen reader users test your work, but that isn’t always feasible to do on a day-to-day basis unless you happen to have a co-worker who uses a screen reader. So being able to do some testing on your own is pretty much a necessity.

There are several screen readers to choose from, but one that is particularly appealing is NVDA. It is free, open source, works with Firefox, and has support for WAI-ARIA. The catch is that NVDA is Windows only, so Mac users like myself will need to use virtual machine software like Parallels Desktop or VMWare Fusion to run it. I can live with that.

If you’re wondering why testing with Apple’s VoiceOver screen reader (which is shipped with Mac OS X) is not enough, there are a few reasons. One is that VoiceOver doesn’t have that great support for WAI-ARIA yet, another that it lacks some features that NVDA has, and a third that, just like testing with several different web browsers, it’s good to test with several different screen readers.

To start using NVDA, download the latest development snapshot and then read the NVDA User Guide.

Original Source here

For years, Apple has had a huge impact on designers and graphic artists across the globe. The simplicity and sharpness of the Aqua interface in Mac OS X strongly influenced the way new products were being presented and designed. It’s not only the design of products that makes Apple’s products different, it’s also their appearance on the Web and in print.

No other company has managed to come up with such a crisp and brilliant style of presenting its recent designs as a new breakthrough innovation that will change our lives for a long time. Apple has found an extremely effective way to deliver its message to a wide audience, and Apple’s look and feel has played a major role in shaping that way.

Photoshop Tutorial Screenshot

In this post, we present a collection of beautiful Apple-inspired Adobe Photoshop tutorials. We collected them not because we are religiously in love with Apple, but because you may find these tutorials useful; for instance, if you are developing a new Mac or iPhone application or designing a concept for a new product. In these cases, you may want to consider Apple’s Human Interface Guidelines and our Designer’s Guide To Icon Design For Mac OS X. Please feel free to suggest further tutorials in the comments to this post.

READ THE WHOLE ARTICLE HERE

A while back, Tantek Celik released A Study of Regular Polygons, which used a little-known CSS trick to create non-rectangular shapes such as triangles and pentagons with nothing more than an ordinary HTML element. The experiment is very interesting and really cool, but the practical takeaway wasn’t immediately clear.

Recently however, we’ve been working on building the markup for upcoming jQuery UI widgets, we came across a case that prompted us to take another look at the technique. The tooltip widget design, fairly common in websites these days, uses a small triangular “speech bubble” pointer that is typically created quite easily with a background image. However, we wanted to maintain our commitment to keeping our jQuery UI widgets entirely themable, and using an image for that purpose wouldn’t fit with the flexibility jQuery UI requires. How to solve this problem without any need for images? That challenge led us to the experimental approach using polygonal CSS, shown below.

The Design Approach

The jQuery UI planning wiki page has several examples for the tooltips we intend to build into the library. For this article though, we’re just focusing the following simple tooltip design:

tooltip design example

The challenge in executing this for jQuery UI is that we’ll need to pull it off without relying on images for the triangle shapes, because the jQuery UI CSS Framework enables markup to be entirely re-themable, using an infinite combination of backgrounds, borders, corner radius, and more. Using custom images for the pointer triangles would never match the flexibility and scalability of CSS alone. Since polygonal CSS can create non-rectangular shapes without images, perhaps it can provide the means to achieve our goal.

Polygonal CSS works by setting an element’s width to something small and then setting thick borders on less than 4 sides. To make a triangle shape, 2 of those borders have to have transparent color, essentially masking out the one visible border at an angle in attempt to connect corners.

The concept is easiest explained through a code sample. The following CSS will style a div into a red triangle:

READ THE WHOLE ARTICLE HERE

If you are a smart shopper, it is not that easy to persuade you to actually buy something. There is the science behind how the products are organized, labels are written and sections are ordered to guide you through to making a purchase. That’s a wealth of tricks based on psychological theories and practices that in the end “convert” you from a regular visitor into the buyer.

One of the most powerful methods to appeal to a potential buyer is applying color theory to (e)commerce. Has it ever occurred to you why you feel safer in one store and more energetic in another one? Have you ever noticed that landing on some web page you feel like clicking some button/link and keep browsing the site? While other pages prompt you to stay and keep reading? To some extent, this might be the choice of colors for the page elements.

Color is believed to be one of the most powerful elements of design for web sites, direct mail, ads, and other marketing materials. It carries meaning through associations and/or your body physical response. Color associates can vary from country to country but in Western culture they are basically the same.

So don’t let (online) sellers affect your decision by showing you what you want to see. Let’s see how color choice may affect your shopping behavior and habits - for you to be able to buy with a cool head.

READ THE WHOLE ARTICLE HERE

Since we launched ThemeForest last year and ran our big Web Design Week promotion here on Psdtuts a few weeks later, the site has been growing like wildfire. With some 800 templates and themes now available and top authors earning in the thousands each month, the site is really gaining on FlashDen to be our top marketplace. So today I thought I’d run down some of the best HTML templates and WordPress themes for those of you who may not have seen the awesome files available lately!

Ultimate Animated Portfolio Template 2 Skins

From the Author:This is a complete, fully featured, animated portfolio template that includes two skins, a dark one (black/blue/orange) and a bright one (white, grey, blue). All navigation is smoothly animated, it can have virtually unlimited portfolio items, arrow based sliding for portfolio thumbs and details, multiple item photos as well as lightbox style large image viewer.

$15 - More Details & Preview

Businessus#2 | Portfolio + Blog | HTML Template

From the Author:A stylish design ideal for a webdev company or a designer or a artist. Businessus#2 is a template designed with the intent of being platform for your personal portfolio showcase as well as working blog. The homepage highlight your most recent featured projects. And you don’t need to worry about fonts!

$15 - More Details & Preview

One Page Portfolio Site Template

From the Author:This slick template can be very useful and effective for web designers, graphic designers, photographers and artists. The portfolio items are powered with lightbox gallery viewer and javascript based fade in/fade out effects when mouse is rolled over them.

$15 - More Details & Preview

Businessus | Portfolio + Blog | HTML Template

From the Author:A stylish design ideal for a webdev company or a business. The design can be modified to work with other types of websites, such as a blog.

$15 - More Details & Preview

Slick Animated Portfolio Template 3 Skins

From the Author:This template is based on the single page portfolio concept and includes about, portfolio and contact sections. The portfolio part is based on javascript scrolling (displays x items – 2 by default – and you can use next/prev arrows to browse through the other portfolio items if you click on next, the next two projects will slide into place etc.), jquery style. When you click on a portfolio image, the larger one pops up using lightbox.

$15 - More Details & Preview

Design Portfolio

From the Author:Design Portfolio is an HTML Template meant to be a basic online portfolio site for Designers/Photographers/Artists. It has valid code and a labeled layered PSD .

$12 - More Details & Preview

Portfolium - Showcase your work

From the Author:Portfolium is aimed at creative professionals including but not only : graphic and web designers, photographers, developers and artists of any kind. It puts accent on your work and features a nice jquery slider on the homepage. You also have the ability to display your latest tweets on your homepage or integrate some blogging CMS and display your latest posts.

$12 - More Details & Preview

READ THE WHOLE ARTICLE HERE

40 Logo Design Tutorials

Logo design is a sub-school of graphic design with a very specific skillset. It can seem daunting to know where to start learning about this wonderful discipline. Here we’ve collected 40 fantastic logo design tutorials to help you add this new design skill to your arsenal.

1. Logo Design Video Tutorial

2. Custom Design Logo

3. Planet Logo

4. Skype Logo Tutorial

5. Logo Tutorial

6. Create an Elegant Logo

7. How to Create the Volkswagen Logo

8. Cool Music Logo on a Grunge Background

9. Creating the Sky Logo

10. Making the ATI Logo

The Question of Outsourcing

Outsourcing has been on my mind a lot: I’ve had to turn down a couple of projects lately that I just didn’t have time to do. I keep thinking that if I could have outsourced at least part of those projects, I could have gotten them done — and gotten the paychecks that went along with them.

The idea of outsourcing is pretty attractive on the surface. If you work with another freelancer in your field — perhaps one with a little less experience — you can take on at least a few more projects than you might manage to otherwise. If you work with freelancers in other fields, you can take on bigger projects: a web designer, for instance, might take on the whole development of a website (including the content) and subcontract the writing to a freelancer who specializes in web copy.

As long as you’re the freelancer who went out looking for the project and arranged to bring in other freelancers, you get paid. Even if you only get a small slice of the pie on a project where someone else does the lion’s share of the work, you still get paid.

READ THE WHOLE ARTICLE HERE

Recent Comments