Advertise here with BSA

Symmetry, from the greek word symmetria (measure together), conveys the harmonious sense of proportionality and balance. And we have to agree that symmetry can be beautifully applied in web design, architecture and even photography. That is why today we gathered a few examples of symmetrical photography to inspire you. Parallel lines, reflections, equal spaces and shapes, here you will see a lot of creative and beautiful examples of symmetry in photography.

Click on the images to check out each photographer’s page.

Advertise here with BSA

Here’s another good high-quality vector pack for our WDL Premium Members. These arabesque vectors from GoMedia’s Arsenal will give your designs a stylish look. Arabesque echoes the forms of plants and animals in repeating geometric patterns. These 24 ornaments walk the line between organic and geometric beauty. Enjoy!

Be sure to check out Go Media’s Arsenal for more awesome vectors, brushes, and more.

Here’s a preview.

Download Arabesque Vector Pack

About the Partner

Go Media is a well known design studio with a lot of passion for what they do. This passion definitely comes through in their Arsenal, which is a collection of high quality, hand crafted design elements that they’ve made available through an online store.

If you’re just getting started on social media, you’re in luck. Today, you have more social media options than ever before.

The fact is, for most internet users, social media is the main reason they get online. Chances are that many of those same users are also your clients and potential clients. If your freelancing business is not on social media yet, you’re falling behind.

Whether you’re new to freelancing and want to set up an online social media presence ASAP, or you’re a seasoned freelancing veteran who is just now taking the social media plunge, you’re sure to find a platform that appeals to you.

In this post, I’ll provide a quick overview of each of the major social media platforms and explain why a freelancer might wish to use each.

Ten Social Media Platforms for Freelancers

Here are some of the most popular social media tools that freelancers use:

1. Facebook–Even if you’ve never been active in social media, it’s likely that you’ve heard of this social media site. That’s because as of February 2012 Facebook has over 845 million monthly active users (according to Facebook’s own statistics). You may know Facebook as the network to use to contact your out-of-state cousin or long-last high school friend. But did you know that you can also create a Facebook Fan page just for your freelancing business?
2. LinkedIn–This social networking site differentiates itself by marketing itself as a professional network site. As such, it’s a favorite of corporations and other businesses. For starters, think about it as your online resume, except on steroids. You can list your work experience, links to your work samples, and even invite people to leave references for you. There’s more, though. LinkedIn is also home to hundreds of professional discussion groups.
3. Twitter–Twitter is quick and fun. If you can encapsulate your freelancing business message in 140 words or less, then you can use Twitter. Currently, the site seems to be a favorite of journalists (citizen and otherwise) who use it to broadcast articles and other information. It’s also a favorite among conference organizers since Twitter live blogging an event can generate interest. Others use it as a way to instant message contacts using the DM feature.
4. Quora–Do you have a depth of knowledge in a specific field or fields? Quora is a question and answer site, but prides itself on the quality of the answers that Quora users provide. In fact, the answers on Quora are often article-length and can be quite comprehensive. Not only is Quora a forum for showing off your expertise, it can also be used to research topics. Ask a new question of your own, or browse through the answers to existing questions.
5. Pinterest–This is an up and coming social media site that has shown fast growth and popularity. Basically, it works like this. Users “pin” images of things that they are interested in to their “bulletin boards” on the site so that other users can view and comment on the images. Some freelancers have experimented with using affiliate links or using the images that they share to draw traffic to their website. If you sell a product or need to drive traffic, it’s worth looking into.
6. Google+–The search engine giant is branching out. If you hadn’t noticed, they’ve launched a number of business and consumer-oriented products in recent years. Google+ is an important social media platform–both because it is tied to the powerful Google search engine and because it has shown a healthy growth during its first year. Users tend to be less frivolous than those on other sites. Expect to see even more upgrades and attention paid to this social media tool in coming months.
7. MySpace–In many ways, this is the granddaddy of all social media sites. MySpace was the first of the “mega” social media sites. It was originally founded in 2003 and was once the most visited social networking site in the world. MySpace still gets millions of visitors each month. This social media tool is known for its active music and entertainment industry communities, but there are other communities as well. Don’t discount this one if your prospects are here.
8. Tumblr–Tumblr is a microblogging tool. It allows users to create and share original content of various types. As of the time this article was written, Tumblr was getting over 15 billion page views in a single month (per Mashable). Now, that’s significant! One thing that Tumblr has going for it from a freelancing perspective is that it’s very easy to use. In general, Tumblr users tend to be younger and more visually oriented. If you like to share photos or images, Tumblr might be right for you.
9. StumbleUpon–This is one of a number of popular news bookmarking sites. (There are many others including Digg and Reddit.) Like all bookmarking sites, StumbleUpon gives you the opportunity to mark and share content that you like with other users. Users select the interests that they would like to explore and the shares that they see are tailored to this preference. StumbleUpon also allows you to comment on shares and contact other users.
10. YouTube–No list of freelancing social media tools is complete without YouTube. This is an extremely popular site where users share videos of all types. Not only that, many videos can be embedded in blog posts and on other sites. You’ve probably already watched many YouTube videos. For a freelancer seeking to establish their expertise, YouTube can be an invaluable tool. You can create an interesting video that explains a topic of interest to your prospects.

What Do You Think?

Of course, these are just overviews of some of the most popular social media tools that freelancers should consider using. There are many other social media tools available.

If you’re a veteran freelancer who has already been using social media for a while, what tool have you found to be the most useful? Share your answers in the comments.

It’s all JavaScript once the page runs, but the frameworks take different paths to get there. Raphaël is written directly in JavaScript, but Paper.js uses PaperScript, and Processing.js uses its own script. They all support Firefox, Chrome and Safari, but Internet Explorer is an issue — Paper.js and Processing.js use the canvas tag and thus require IE 9.

PaperScript is a JavaScript extension that makes it possible to write scripts that don’t pollute the global namespace. This cuts down on JavaScript conflicts. PaperScript also supports direct math on objects such as Point and Size: you can add two points together as if they were numbers.

Processing.js is based on a framework named Processing, which runs in the Java Virtual Machine. You define int and float instead of var, and you can use classes with Java-style inheritance. While the Processing.js script looks a little like Java, it’s more like JavaScript and doesn’t require many of the more complex features of Java.

Using all three libraries is easy if you have some familiarity with JavaScript.

Getting Started

Start by importing each library. The process for setting each up is a little different.

Setting Up Paper.js

<head>
<script src="paper.js" type="text/javascript" charset="utf-8"></script>
<script type="text/paperscript" canvas="paperCircle" src="paper_circle.pjs" id="script"></script>
</head>
<body>
<canvas id="paperCircle" class="canvas" width="200" height="200" style="background-color: white;"></canvas>

Paper.js specifies a script type of text/paperscript and the ID of the canvas tag that you’ll draw on. It uses that ID to know where to draw.

Setting Up Processing.js

<head>
<script src="processing.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<canvas width="200" height="200" class="canvas" data-processing-sources="processing_circle.java"></canvas>

Processing.js uses the data-processing-sources attribute of the canvas tag to import your drawing. I use a .java extension for Processing’s source file so that my editor color-codes it properly. Some authors use a .pde or .pjs extension. It’s up to you.

Setting Up Raphaël

<head>
<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael_circle.js" type="text/javascript" charset="utf-8"></script>
</head>

Raphaël is imported like any other JavaScript file. It works well with jQuery’s ready function or any other JavaScript framework.

Now we can start drawing.

Object-Oriented Drawing

Both Paper.js and Raphaël use object-oriented drawing: you draw a circle and get back a circle object. Processing.js draws the circle and doesn’t give you anything back. The following simple example makes it clear. Let’s start with a circle in the middle of the screen at point 100,100.

Paper.js:

var circle = new Path.Circle(new Point(100, 100), 10);
circle.fillColor = '#ee2a33';

Raphaël:

var paper = Raphael('raphaelCircle', 200, 200);
var c = paper.ellipse(100, 100, 10, 10);
c.attr({'fill': '#00aeef', 'stroke': '#00aeef'});

Processing.js:

void setup() {
   size(200, 200);
}

void draw() {
   background(#ffffff);
   translate(100, 100);
   fill(#52b755);
   noStroke();
   ellipse(0, 0, 20, 20);
}

Each code snippet draws the same circle. The difference is in what you can do with it.

Paper.js creates the circle as a path object. We can hold onto the object and change it later. In Paper.js, circle.fillColor = 'red'; fills our circle with red, and circle.scale(2) makes it twice as big.

Raphaël follows Paper.js’ object-oriented model. In Raphaël, we can change the color of our circle with circle.attr('fill', 'red');, and scale it up with circle.scale(2, 2);. The point is that the circle is an object that we can work with later.

Processing.js doesn’t use objects; the ellipse function doesn’t return anything. Once we’ve drawn our circle in Processing.js, it’s part of the rendered image, like ink on a page; it’s not a separate object that can be changed by modifying a property. To change the color, we have to draw a new circle directly on top of the old one.

When we call fill, it changes the fill color for every object we draw thereafter. After we call translate and fill, every shape will be filled with green.

Because functions change everything, we can easily end up with unwanted side effects. Call a harmless function, and suddenly everything is green! Processing.js provides the pushMatrix and popMatrix functions to isolate changes, but you have to remember to call them.

Processing.js’ no-objects philosophy means that complex drawings run faster. Paper.js and Raphaël contain references to everything you draw, and so the memory overhead created by complex animations will slow down your application. Processing.js contains no references to drawn elements, so each shape takes up a tiny amount of memory. Memory overhead pays off if you need to access an object later, but it’s overkill if you don’t. Paper.js gives you a way out of this with the Symbol object and by rasterizing objects, but you have to plan ahead to keep the app running fast.

The object-oriented versus no-objects philosophy has implications for everything you do with these libraries. It shapes the way each library handles animations.

Let’s Make It Move

Rotating circles aren’t very interesting, so we’ll make a square rotate around a circle.

Animation in Processing.js

Processing.js supports animation with the predefined setup and draw functions, like this:

float angle = 0.0;
void setup() {
   size(200, 200);
   frameRate(30);
}

void draw() {
   background(#ffffff);
   translate(100, 100);
   fill(#52b755);
   noStroke();
   ellipse(0, 0, 20, 20);

   rotate(angle);
   angle += 0.1;
   noFill();
   stroke(#52b755);
   strokeWeight(2);
   rect(-40, -40, 80, 80);
}

The setup function is called once when the application starts. We tell Processing.js to animate with a frame rate of 30 frames per second, so our draw function will be called 30 times every second. That rate might sound high, but it’s normal for making an animation look smooth.

The draw function starts by filling in the background of the canvas; it paints over anything left over from previous invocations of the draw function. This is a major difference with Processing.js: we are not manipulating objects, so we always have to clean up previously drawn shapes.

Next, we translate the coordinate system to the 100,100 point. This positions the drawing at 100 pixels from the left and 100 pixels from the top of the canvas for every drawing until we reset the coordinates. Then, we rotate by the specified angle. The angle increases with every draw, which makes the square spin around. The last step is to draw a square using the fill and rect functions.

The rotate function in Processing.js normally takes radians instead of degrees. That’s why we increase the angle of each frame by 0.2, rather than a higher number such as 3. This is one of many times when trigonometry shows up in this method of drawing.

Animation in Paper.js

Paper.js makes this simple animation easier than in Processing.js, with a persistent rectangle object:

var r;

function init() {
   var c = new Path.Circle(new Point(100, 100), 10);
   c.fillColor = '#ee2a33';

   var point = new Point(60, 60);
   var size = new Size(80, 80);
   var rectangle = new Rectangle(point, size);
   r = new Path.Rectangle(rectangle);
   r.strokeColor = '#ee2a33';
   r.strokeWidth = 2;
}

function onFrame(event) {
   r.rotate(3);
}

init();

We maintain the state of our square as an object, and Paper.js handles drawing it on the screen. We rotate it a little for each frame. Paper.js manages the path, so we don’t have to redraw everything for each frame or keep track of the angle of rotation or worry about affecting other objects.

Animation in Raphaël

Animations in Raphaël are written in standard JavaScript, so Raphaël doesn’t have specific functions for handling animation frames. Instead, we rely on JavaScript’s setInterval function.

var paper = Raphael('raphaelAnimation', 200, 200);
var c = paper.ellipse(100, 100, 10, 10);
c.attr({
   'fill': '#00aeef',
   'stroke': '#00aeef'
});

var r = paper.rect(60, 60, 80, 80);
r.attr({
   'stroke-width': 2,
   'stroke': '#00aeef'
});

setInterval(function() {
   r.rotate(6);
}, 33);

Raphaël is similar to Paper.js in its object-oriented approach. We have a square, and we call a rotate function on it. Thus, we can easily spin the square with a small amount of code.

Interaction

Raphaël shines when you need to enable interactivity in a drawing. It provides an event model similar to JavaScript’s, making it easy to detect clicks, drags and touches. Let’s make our square clickable.

Interactions With Raphaël

var paper = Raphael('raphaelInteraction', 200, 200);
var r = paper.rect(60, 60, 80, 80);
r.attr({'fill': '#00aeef', 'stroke': '#00aeef'});

var clicked = false;

r.click(function() {
   if (clicked) {
      r.attr({'fill': '#00aeef', 'stroke': '#00aeef'});
   } else {
      r.attr({'fill': '#f00ff0', 'stroke': '#f00ff0'});
   }
   clicked = !clicked;
});

The click function in Raphaël works like jQuery, and you can add it to any object. Once we get the click event, changing the color of the square is easy. Raphaël has more functions to support dragging, hovering and all of the other user interactions you expect from JavaScript.

Interactions With Paper.js

Paper.js has a different way of managing interactions, but it’s still pretty easy:

var hitOptions = {
   fill: true,
   tolerance: 5
};

function init() {
   var point = new Point(60, 60);
   var size = new Size(80, 80);
   var rectangle = new Rectangle(point, size);
   r = new Path.Rectangle(rectangle);
   r.fillColor = '#ee2a33';
}

function onMouseUp(event) {
   var hitResult = project.hitTest(event.point, hitOptions);

   if (hitResult && hitResult.item) {
      if (hitResult.item.clicked) {
         hitResult.item.fillColor = '#ee2a33';
      } else {
         hitResult.item.fillColor = '#f00ff0';
      }

      hitResult.item.clicked = !hitResult.item.clicked;
   }
}

init();

Paper.js deals with mouse gestures through a concept called “hit testing.” A hit finds the point under the mouse cursor and figures out which object it lies above. Hit options enable you to define how the hit works: you can set options for such things as how close the mouse has to be, and whether the middle of the object counts or only the edge. We can extend this hit test to any object or group of objects in Paper.js.

The Paper.js team added object-level events similar to Raphaël’s a few weeks ago. The events should show up in the next release.

Interactions With Processing.js

Processing.js makes detecting mouse clicks tricky. It doesn’t support object-level events or hit testing, so we’re pretty much on our own.

float bx;
float by;
int bs = 20;
boolean bover = false;
boolean clicked = false;

void setup() {
   size(200, 200);
   bx = width/2.0;
   by = height/2.0;
   noStroke();
   fill(#52b755);
   frameRate(10);
}

void draw() {
   background(#ffffff);

   // Test if the cursor is over the box
   if (mouseX > bx-bs && mouseX < bx+bs &&        mouseY > by-bs && mouseY < by+bs) {
      bover = true;
   } else {
      bover = false;
   }

   translate(100, 100);
   rect(-40, -40, 80, 80);
}

void mousePressed() {
   if (bover) {
      if (clicked) {
         fill(#52b755);
      } else {
         fill(#f00ff0);
      }
      clicked = !clicked;
   }
}

Once Processing.js draws the square, it forgets about it. We want the color of the square to change when we click on it, but the script doesn’t know that, so we have to do all of the calculations ourselves. The draw function detects the mouse cursor’s position and does the math to determine whether it lies within the square.

The code is not too bad for the square, but our circle would need πr<sup>2</sup>. And more complex shapes such as ovals, curves and compound shapes would require even more math.

No Clear Winner

Each framework has its advantages. Between them, the features make for cool demos and even cooler applications.

Showing Off Paper.js

Paper.js excels at manipulating complex shapes. It can turn, twist and transform any object in hundreds of ways. These transforms make it easy to convert objects based on interactive gestures. The new Google Music Tour, which makes colored lines beat in time to music, shows how one can make complex changes on simple shapes.

The other wow factor in Paper.js is its support of raster graphics. Paper.js can completely change the way images are drawn — including by turning them into spirals and Q*bert boards.

Showing Off Processing.js

Processing.js’ biggest feature is speed, making it possible to draw complex animations on slower machines. Many examples are out there, but the fluidity of Processing.js animations shows up best in Ricardo Sánchez’s koi pond.

The swishing of the tails and waving of the bodies make the koi look very natural. Processing.js makes this easy, with support for curves and customized animations.

Processing.js also supports complex drawing elements such as shading, lighting and 3-D transforms. If you want to create complex animations in canvas very quickly, then Processing.js is the clear winner.

Showing Off Raphaël

The best feature of Raphaël is its support for Internet Explorer 7 and 8. If your application has to run on older browsers, then Raphaël is the only option.

The other big feature of Raphaël is its community. Raphaël is older than Paper.js and Processing.js and thus has had more time to build examples, tutorials and user support. It has built-in support for easing, animation transforms and the event handlers that we saw in the interaction example; it also has a comprehensive charting library.

Raphaël also has the best tooling support.

The Tools

If you’ve worked with Flash, the lack of tools for these frameworks will disappoint you. Many of the frameworks will edit SVG images, but none of them offer a drag-and-drop method for creating applications.

A few simple tools are out there, but they are more like proofs of concept than actual products. Adobe is working on a tool named Edge, but it has a long way to go.

If you want to drag and drop, then Web animations aren’t for you yet. Right now, this method of drawing is more like video-game programming. Writing code to draw a circle is tougher than clicking and dragging, but it scales to more complex applications and some fun stuff.

Let’s Build Something Real

So far, we’ve looked at some simple examples, seen the best features of each platform and looked at how to choose the right one. Each framework has pluses and minuses, but judging them is difficult until you create an actual application.

To compare each framework, I’ve drawn some gears. Each gear is made up of two circles, with a set of teeth around the outer circle.

When the shapes are all given the same color, they look just like a gear.

Every gear will rotate a little with each frame of the animation. The first gear will be given a speed, and the rest will move relative to it. The gears will arrange, mesh and rotate together with a crazy amount of trigonometry. Put them together and you’ve got a complex gear system.

Paper.js:

Processing.js:

Raphaël:

Well, that wasn’t quite Raphaël. The rotate function work different in Raphaël than it does in Paper.js and Processing.js. Raphaël doesn’t support rotation around a fixed point. Instead, the teeth of the gears are drawn and redrawn independently, and they fly through the air instead of rotating around the center. The only way to really turn the gear would be to draw the entire gear as a single path, and that takes more math than I’m willing to write. If anyone wants to give it a try, everything is open source.

The Future Of Web Drawing

We gamble on every new technology that we learn: we hope that it catches on and that our investment pays off. Technologies rise and fall on their respective merits, but other factors comes into play, such as vendor support and business uses. The future of our industry is almost a guessing game.

Right now, Flash looks like a bad investment. Flash has great tools, years of development and a large community, but even Adobe is moving away from it.

SVG is in a similar situation. Browsers support it now, but it isn’t getting a lot of attention.

Every browser vendor is working hard to render canvas faster, to use hardware acceleration and to better support libraries such as Paper.js and Processing.js. All mobile devices support canvas, and their developers are working to improve it.

(al)

In fact, one need only look around the web to find some stunning examples of these elements being deployed with fantastic results. Or one can look at the showcase we have assembled for you below. We have already done some of the leg work for you. The sites we gathered have all used textures or patterns in their website designs, and in such stylish fashion that we felt our spotlight should shine their way.

Textured Web

Rockatee is a dark design with a geometric patterned header and footer and two different textures. Both brilliantly installed in the background, one of the main content area, and a subtler one above the header.

Create Digital Media has a beautiful open, expansive website, and the minimal design is complemented by the light textured background.

Celebration Invitations has a large header that uses a light texture to really make the space pop and not feel at all underused. The patterned background adds an extra touch of style to the site.

Stedesign is a vintage styled site in which the design uses a number of textures to really pull the look off with flawless execution.

Stephanie Walter has a lovely design with a texture running all the way down and through the site. Subtle and stylish.

HD Live is another site with an extra subtle background texture that adds a richness to the open design.

The Threepenny Editor has a unique and stylistically retro look and feel, with the patterned background tying the design together in a light, graceful manner.

Alex Catalan has a site design that uses a slight patterned background to give the minimal, oversized style a depth that works wonderfully. The soft texture in the footer and the header also complement the website’s design.

Steely M Music Production uses a lined pattern to pull the somewhat unconventional layout together.

PunchTab has used a delicately textured background to set off the over-sized buttons and content areas. Very nicely paired with the rest of the design.

the Buffalo Lounge has a dark themed site with a wood grain patterned background that gives the entire design the perfect edge.

Adrian Tingstad Husby – Portfolio design is another expansive site layout that adds a touch of attitude and grunge to the otherwise clean style with a patterned background.

Decadent Cakes uses both a colorful pattern and an extremely subtle textured background to give the site a combination of class and vintage style.

Qasim Aziz Portfolio is a simple design with a lightly grained texture in the background for that added punch to the site’s look.

VUURR uses a pair of simple patterns in their website to pull off a design that is big and bold and anything but simple.

Rob Davis uses a delicate texture in both the header and footer, along with a slight patterned background to make this minimal design stand out from the pack.

Holistic Designs has a touch of grunge in their site via a textured background that really catches the eye, but does not steal away focus as the content scrolls across it. Perfectly balanced.

Launch Factory uses a combination of textures, in the background, throughout the content headers and titles, and more for a pitch perfect design full of grunge.

Agenciart has another big and bold design that is brilliantly complemented by the subtle texture in the background.

rtraction is the website for a creative design agency and their use of a light texture in the background works to set off the over-sized content and images. Though the areas where the texture is omitted ends up feeling somewhat less visually comfortable, though the colors could have something to do with that. However, it does seem the texture would soften their slightly harsh feel.

Chriswi is an example that stands out from the last, as it uses the texture down throughout the site (except for the footer) and the colors that might otherwise feel somewhat harsh on the eyes have a softness it seems the texture adds to them.

Valpo Creative uses a delicate texture in the background which does work nicely, though the site would seem better suited to have the content displayed against this lightly textured background rather than the box it sits in.

Danger Brain uses both a pattern for the background and a light texture in the header. The pattern seems like it could be visually overwhelming, but with the content box relegating it to a smaller perimeter it makes it very complementary to the tone of the site.

Open Hand Type has a couple of less than subtle textures employed in the somewhat compact design making their bold look stand out perfectly. Giving the site a certain character.

Oven Bits has a huge header whose open space is lightly textured giving it a softness and retro style. The footer has a matching texture that balances the site wonderfully.

That finishes off this showcase, but feel free to leave us your thoughts in the comment section below. Also drop us a link on a site that you feel we overlooked, and should have included in this collection if you are so inclined.

(rb)

Advertise here with BSA

Savvy tech consumers are slowly adapting to a world where smartphones and tablet PCs are commonplace. With these new devices comes a revolution of mobile software which we have never seen before. Mobile dev studios are popping up everywhere to showcase and market their latest app ideas.

In this article I’d like to go over the concepts behind working in a creative studio. How will projects differ when we’re planning for app development? Mobile labs and studios are like any small business with big aspirations. And the most exciting part is that anybody can start! Many studios run with only 2-4 employees working full time.

Why Design for Mobile?

The mobile marketplace has been thrown together in just a few short years. The original iPhone began development going back as early as 2005 and still commands a large share of the mobile OS devices. Android was originally released later in 2007 and is trailing behind as a close second, followed up by Windows Mobile and Blackberry phones.

You should take mobile development into consideration only if you have a personal interest in the area. If you have ideas for apps you should take it upon yourself to build them. Websites are cheaper now and easier to setup with open source CMS solutions such as WordPress. But mobile apps are still fresh and the market has barely been touched.

This is why mobile studios are currently growing so rapidly. If you can release one or two good ideas then it’s very easy turning a profit through Apple or Google.

Selective Markets

Unless you are an expert in Objective-C and Java programming it’s unlikely you can publish for both Android and iOS together. Mobile studios who are just getting started should pick an app store based on their own preferences.

If you have a team of knowledgeable developers you can get together and build apps much more quickly for all devices. This can include tablet PCs as well. Not every situation will be so lenient, but if you can pull it off I recommend submitting to both of the App Stores for a larger audience. The popular task management software Wunderlist immediately comes to mind.

From what I can gather the iPhone/iPod Touch/iPad App Store has a much higher demand for developers. There are simply more devices to build for and users are more willing to spend money for apps. But you can’t go wrong sticking to either marketplace. Pick an idea and just start building!

Speedy App Distribution

Another facet of developing mobile apps is the speed at which you can churn out new ideas. Programming is definitely extensive and requires a lot of dedication for newcomers. However once you’ve completed your first idea you’ll be edgy to jump onto the next one.

Many app studios will choose between one of two paths for development. They’ll either focus on a single idea and expand it onto many devices, or alternatively they’ll launch a slew of many smaller apps with less maintenance. If you consider a studio like Cultured Code they have done an excellent job with the former dev environment crafting Things for all iOS devices.

When you plan your studio’s creative schedule make sure you consider all of these ideas. Will you and your team be working on many smaller apps or focusing to sell one solid brand? It’s a smart idea to split up tasks based on design and development skills. You’ll find product development to move tenfold when everybody is working on the same page.

Hungry Customers

Mobile apps may be some of the most in-demand software from consumers going into 2012. Almost anybody can setup their own web host and it takes a lot more work to build for mobile devices. As such these smaller studios are getting a ton of attention and reaping the benefits.

When you have a consumer base who is frequently shelling out cash for new apps it’s the perfect time to capitalize. Even many of the free applications for iOS and Android are still making money through advertisements and upgrades. You’ll find much less work in the realm of freelance app development. But some higher-end studios are offering freelance services and this trend may pickup when more wealthy companies grow interested in a mobile presence.

The Future for Mobile Labs

The outlook on the horizon is bright for mobile app studios. Developers can earn a small living off just a couple of catchy ideas. And mobile apps are so quick to produce that you can work part-time on a project while still holding down your day job.

Compared to the number of design agencies there is still room for growth in the mobile arena. The App Stores are just heating up and already boast quite a considerable number of competitors. If you are dedicated and have ambition then mobile apps are easily the best opportunity for a young developer. If possible try putting together a small team of developers and designer(s) to expedite the workload.

Conclusion + Showcase

In addition to the examples above I want to share some more wonderful mobile lab studios. Developers are hard at work all over the world churning out these apps for your smartphone device. Creative studios have always been popular and now we’re seeing a shift from print & web work into mobile. Let us know your thoughts and if you run a mobile studio please share your link with us in the comments below.

iPhone App Lab

Ecliptic Labs

Ninja Lab Studios

Tapbots

AppThat

Milk Inc.

Gideros Mobile

Sophiestication

Robocat

Halfbrick

Second Gear

Glasshouse Apps

tap tap tap

OneLouder

Nibirutech

App Cubby

jChicken

SayCheezzz

Tangorang Labs

Fusionlab

Apptivity Lab

Smule

PoweryBase

TapMates

Wandake Game Studio

9magnets

Vemedio

Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how big should you make them to give the best ease of use to the majority of your users? Many mobile developers have wondered this, and most have turned to the user interface guidelines provided by the platform developer for the answer.

(Image credit: ogimogi)

What the Mobile Platform Guidelines Say

Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.

While these guidelines give a general measurement for touch targets, they’re not consistent with each other, nor are they consistent with the actual size of the human finger. In fact, their suggested sizes are much smaller than the average finger, which can lead to touch target problems for users on mobile devices.

Small Touch Targets Lead to Big Problems

Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they’re trying to hit. Users use the fingertip to hit small touch targets because it gives them the visual feedback they need to know that they’re hitting their target accurately. But when users have to reorient their finger, it slows their movement down, and forces them to work harder to hit their target.

Not just that, but small touch targets can lead to touch errors. When small touch targets are grouped near each other, users can accidentally hit neighboring targets and initiate unintended actions. This is because the user’s finger overlaps on to the neighboring buttons. And if pressure is not carefully applied in the right spot, it’ll trigger the wrong action. It’s easy for users to make these errors with their index finger. But it’s even easier for them to make these errors if they use their thumb, because their thumb is much larger than the target. Sometimes users will tilt their thumb sideways and use the thin side to hit a small touch target. But this is a lot of unnecessary work.

Thumb use among mobile users is popular. Some users won’t always have two hands free when they’re on their mobile device. Many prefer the convenience of using only one hand and their thumb. Users shouldn’t have to switch from using one hand to two hands, or from their thumb to their index finger to hit a target accurately. And more importantly, the size of a target shouldn’t cause them to make touch errors. Small touch targets make things harder for users, where a finger-friendly target does not.

Pixel Width of the Average Index Finger

An MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest.

A touch target that’s 45 – 57 pixels wide allows the user’s finger to fit snugly inside the target. The edges of the target are visible when the user taps it. This provides them with clear visual feedback that they’re hitting the target accurately. They’re also able to hit and move to their targets faster due to its larger size. This is consistent with Fitt’s Law, which says that the time to reach a target is longer if the target is smaller. A small target slows users down because they have to pay extra attention to hit the target accurately. A finger-sized target gives users enough room to hit it without having to worry about accuracy.

Pixel Width of the Average Thumb

There are many users who use their index finger to tap mobile targets. But there are just as many users who use their thumb as well. The big difference with the thumb is that it’s wider than the index finger. The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels.

For users who use their thumbs, 72 pixels does wonders. They’re easier and faster to hit because they allow the user’s thumb to fit comfortably inside the target. This makes the edges visible and easy to see from all angles. This means that users don’t have to reorient their thumb to the very tip to see it hit the target. Nor do they have to tilt their thumb to the side to hit it. One tap with their thumb pad is enough to do the trick.

A Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices found that user errors declined as the target size increased. Users were able to tap the target faster without having to make intentional physical accommodations to increase accuracy such as reorienting the thumb, which would have slowed performance.

Another study on Touch Key Design for Target Selection on a Mobile Phone also found that the number of errors decreased as the touch key size increased. In addition, it was provided that the larger the touch key size, the higher the success rate and pressing convenience.

Finger-Sized is Ideal, But Not Always Practical

As many benefits there are to using finger-sized targets, they’re not always practical in every situation. On a mobile device, you’re working in a limited space. This means when you have many finger-sized targets together, they can take up more space than your screen can afford. However, when you have a few finger-sized targets together, that’s when you can fit them all on your screen without trouble. You will need to measure the size of your screen and touch targets to know exactly how big of a touch target you can afford. If you can’t afford finger-sized touch targets on your interface, use the guidelines the mobile platform gives you instead.

Finger-sized targets are much easier to apply on a tablet than a mobile device because there is more screen space available. You can use them liberally without the fear of taking up too much space and improve tablet usability instantly. However, mobile devices are where users have the most trouble hitting touch targets. And that’s where finger-sized targets are needed the most. The challenge for designers is to figure out how to make the most of finger-sized targets on the mobile screen. This might require using less touch targets than you normally would. But this is a plus because it forces designers to keep their navigation simple and minimal.

Thumb-Sized Targets for Gaming Applications

Another thing to think about is when to use a thumb-sized target over an index finger-sized one. It’s difficult to know whether most of your users will use their thumbs or index fingers on your application. However, if your application is a game, it’s likely most users will use their thumbs to play instead of their index fingers. This is why thumb-sized targets are particularly useful for gaming applications. By making your game control targets thumb-sized, users can play the game with better handling and control. They’re able to see the game control targets as they move their thumbs, and the game will feel more adaptive to them.

It is without a doubt that matching your touch target sizes to the average finger size improves mobile usability for many. Whether your application is a game or any other, touch targets are designed for users to tap. If the user has to take their attention away from using your application to the way they move, orient or arc their finger to tap a target, it degrades their experience of your application. With this new-found insight, you can create applications that are truly finger-friendly. Finger-friendly design isn’t reserved for the few. It’s a new design standard for mobile applications to follow everywhere.

(al)(fi)

Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how big should you make them to give the best ease of use to the majority of your users? Many mobile developers have wondered this, and most have turned to the user interface guidelines provided by the platform developer for the answer.

(Image credit: ogimogi)

What the Mobile Platform Guidelines Say

Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.

While these guidelines give a general measurement for touch targets, they’re not consistent with each other, nor are they consistent with the actual size of the human finger. In fact, their suggested sizes are much smaller than the average finger, which can lead to touch target problems for users on mobile devices.

Small Touch Targets Lead to Big Problems

Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they’re trying to hit. Users use the fingertip to hit small touch targets because it gives them the visual feedback they need to know that they’re hitting their target accurately. But when users have to reorient their finger, it slows their movement down, and forces them to work harder to hit their target.

Not just that, but small touch targets can lead to touch errors. When small touch targets are grouped near each other, users can accidentally hit neighboring targets and initiate unintended actions. This is because the user’s finger overlaps on to the neighboring buttons. And if pressure is not carefully applied in the right spot, it’ll trigger the wrong action. It’s easy for users to make these errors with their index finger. But it’s even easier for them to make these errors if they use their thumb, because their thumb is much larger than the target. Sometimes users will tilt their thumb sideways and use the thin side to hit a small touch target. But this is a lot of unnecessary work.

Thumb use among mobile users is popular. Some users won’t always have two hands free when they’re on their mobile device. Many prefer the convenience of using only one hand and their thumb. Users shouldn’t have to switch from using one hand to two hands, or from their thumb to their index finger to hit a target accurately. And more importantly, the size of a target shouldn’t cause them to make touch errors. Small touch targets make things harder for users, where a finger-friendly target does not.

Pixel Width of the Average Index Finger

An MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest.

A touch target that’s 45 – 57 pixels wide allows the user’s finger to fit snugly inside the target. The edges of the target are visible when the user taps it. This provides them with clear visual feedback that they’re hitting the target accurately. They’re also able to hit and move to their targets faster due to its larger size. This is consistent with Fitt’s Law, which says that the time to reach a target is longer if the target is smaller. A small target slows users down because they have to pay extra attention to hit the target accurately. A finger-sized target gives users enough room to hit it without having to worry about accuracy.

Pixel Width of the Average Thumb

There are many users who use their index finger to tap mobile targets. But there are just as many users who use their thumb as well. The big difference with the thumb is that it’s wider than the index finger. The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels.

For users who use their thumbs, 72 pixels does wonders. They’re easier and faster to hit because they allow the user’s thumb to fit comfortably inside the target. This makes the edges visible and easy to see from all angles. This means that users don’t have to reorient their thumb to the very tip to see it hit the target. Nor do they have to tilt their thumb to the side to hit it. One tap with their thumb pad is enough to do the trick.

A Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices found that user errors declined as the target size increased. Users were able to tap the target faster without having to make intentional physical accommodations to increase accuracy such as reorienting the thumb, which would have slowed performance.

Another study on Touch Key Design for Target Selection on a Mobile Phone also found that the number of errors decreased as the touch key size increased. In addition, it was provided that the larger the touch key size, the higher the success rate and pressing convenience.

Finger-Sized is Ideal, But Not Always Practical

As many benefits there are to using finger-sized targets, they’re not always practical in every situation. On a mobile device, you’re working in a limited space. This means when you have many finger-sized targets together, they can take up more space than your screen can afford. However, when you have a few finger-sized targets together, that’s when you can fit them all on your screen without trouble. You will need to measure the size of your screen and touch targets to know exactly how big of a touch target you can afford. If you can’t afford finger-sized touch targets on your interface, use the guidelines the mobile platform gives you instead.

Finger-sized targets are much easier to apply on a tablet than a mobile device because there is more screen space available. You can use them liberally without the fear of taking up too much space and improve tablet usability instantly. However, mobile devices are where users have the most trouble hitting touch targets. And that’s where finger-sized targets are needed the most. The challenge for designers is to figure out how to make the most of finger-sized targets on the mobile screen. This might require using less touch targets than you normally would. But this is a plus because it forces designers to keep their navigation simple and minimal.

Thumb-Sized Targets for Gaming Applications

Another thing to think about is when to use a thumb-sized target over an index finger-sized one. It’s difficult to know whether most of your users will use their thumbs or index fingers on your application. However, if your application is a game, it’s likely most users will use their thumbs to play instead of their index fingers. This is why thumb-sized targets are particularly useful for gaming applications. By making your game control targets thumb-sized, users can play the game with better handling and control. They’re able to see the game control targets as they move their thumbs, and the game will feel more adaptive to them.

It is without a doubt that matching your touch target sizes to the average finger size improves mobile usability for many. Whether your application is a game or any other, touch targets are designed for users to tap. If the user has to take their attention away from using your application to the way they move, orient or arc their finger to tap a target, it degrades their experience of your application. With this new-found insight, you can create applications that are truly finger-friendly. Finger-friendly design isn’t reserved for the few. It’s a new design standard for mobile applications to follow everywhere.

(al)(fi)

So we have prepared an inspiring showcase of not only photographs which highlight the colors of spring, but we’ve also created color palettes from the pics of spring flowers and foliage. So take a look below, and fill up on the palettes and creative energy that Spring has to offer. We hope you enjoy these colors of renewal.

Colors of Spring

spring by zaclab

Spring is coming by Eredel

spring by miyavik

Untitled Nature I by mindCollision

Floral Bells Blossom and Ring I by johnchan

… colours of spring … by pho-t-ographic-s

Spring Flowers V by BreeSpawn

Spring Bee by firelupe4ever

ROSE by Uthatsir

Spring by Thomas Quine

Spring by Nha Le Hoan

Spring Garden – April 2011 – Exotic Tulip with Bokeh by Gareth Williams

Spring Pine Cones by FlackJacket2010

spring blossoms by Craig Cloutier

Spring!!! by Benson Kua

Spring by Claire

Spring has Sprung by Steve Jurvetson

Spring Tree by Maciej Lewandowski

Spring by chema.foces

TWO HUNDRED + SEVENTY SEVEN by abrupt-downfall

Redbud Romance by kohaku-dono

The seeds of spring by Yoonett

Sprig of Flowers by liquidnonsense

Spring Flowers IV by BreeSpawn

Spring 0001 by Goppo713

Spring Greeting by Parvin

First Day of Spring by Amanda Slater

Spring Gentian by Alexandre Duret-Lutz

blue-spring-flowers by Forest Wander

Spring has stepped into my little patch… by S Pisharam

(rb)

Advertise here with BSA

When a website doesn’t call for a lot of content, it might be a good idea to go with the single page approach – where all of the content lives on the home page and the navigation, in most cases, allows the user to jump from one section to another. In the past few years, we’ve seen a steady increase in popularity of these types of sites, mainly partly because the use of jQuery can make for some nifty transitions and effects. For you’re inspiration, we gathered some really nice examples of websites that use only one page to show all their content.

From minimalist layouts to colorful ones, from plain and simple menu navigations to parallax scrolling, you will find plenty here to inspire you. Take some time and check them all out, and let us know which one is your favorite.

Rodesk

House

iamcreative.me

Valentine Favre

wit creative

Pipe Digital

dj Xeeder

Valerie

Matt Brothers

Grind – Work Liquid

Revolver Design Studio

Design Embraced

Free Range

Jeremy Mansfield

Demi Creative

dangers of fracking

Launch Factory

Grayden Poper

rtraction

jlern

HatBox

vysagh.in

two fish illustration

One Page Love