BlackBerry

Apart from the fact that BlackBerry’s slider content is outstanding and very creative, it also takes the main part of the site making the slider the most important part on the homepage.

Palm

Palm takes the slider component and uses it in a slightly different manner. Instead of being the main focus on the front page, Palm has a smaller vertical slider that is more subtle than the one from BlackBerry.

HTC

You can see a big resemblance between HTC and BlackBerry. HTC uses the slider as the main component on the same page though the style is more clean and with a sketchy touch.

HP

HP takes the content slider a little bit further compared to previous sliders. Apart from the usual navigation, HP adds a play, previous and next buttons and makes the slider static in the first place.

Lenovo

Lenovo is another company that has a big slider on the first page as well. Actually almost all big players from the PC domain have and on Lenovo’s site you can see a simple one with a simple numbers based navigation.

Acer

Compared to Lenovo, Acer has its main page deigned as a big slider with thumbnails position in the bottom right side for navigation. From this selection of sliders it is the one with the strongest presence.

Microsoft

We can’t have this showcase without mentioning Microsoft. On its first page Microsoft has a slider like a horizontal accordion. It is a different approach compared with the rest sliders, it shows the content clearly and I assume it drives good conversion since it is on Microsoft website for quite some time.

IBM

I actually can’t remember IBM’s site without a slider. I think that is because IBM had few updates on the design and that a slider was involved in one way or another. Anyway, the slider looks great because it always has great images and a simple fade+slide in effect for text.

Oracle

What ca we say about Oracle’s slider. Not much actually … it is simple, powered by great images and it has a simple navigation placed in the top right side.

SAP

SAP, Oracle’s biggest competitor has a slider too. The difference is that the navigation is based on thumbnails, in this case faces of important people.

Nvidia

Nvidia relies heavily on the slider to notice the user about latest events and products. Its slides are often small videos that enhance the importance of the slider.

ATI

AMD/ATI has a different opinion on how to use a slider. On their site, you can find 2 smaller sliders – one to promote technologies and another to showcase products.

Intel

Now that we’ve covered AMD, we must cover Intel. And Intel has a slider too, but bigger (no wonder), with blue based images in order to emphasize Intel brand.

AOL

A different segment where content sliders are often used is the segment of portals. And AOL is one of the top portals with a small slider in the center of the page that showcases the most important news.

MSN

MSN falls in the same category as AOL and it has a slider with the same functionality as AOL. But you will notice that MSN has a much more cleaner approach.

NewEgg

The last 2 examples are from e-commerce sites. The first one is NewEgg a great site for electronics that uses the slider component at a lower scale compared to early showcased sites. The main purpose of the slider is to present the latest promotions.

Target

The last item on our list is Target.com. Compared to NewEgg, its slider has a different approach, covering a lot of space but promoting general stuff rather than specific.

As you can see, slider components are widely spread and also are becoming popular. From blogs to corporate websites we find these components scattered across the web. Let us know what you think about this component or other great samples of sliders.

Cheers!

1. Retrospectiva

Retrospectiva is a powerful open-source project management tool, designed towards agile software development teams. It features a solid core with ticket system, code review and milestones, but it also has powerful addons like wiki, blog or agile project management.

http://www.retrospectiva.org/

2. Trac

Trac is one powerful issue tracking tool judging by the fact that WordPress development is tracked using it. Trac is an enhanced open-source wiki and issue tracking system for software development projects. It uses a minimalistic approach to web-based software project management.

http://trac.edgewall.org/

3. Collabtive

Collabtive is web-based open source project management software. It was developed as an PHP&Javascript alternative to commercial project management tools like Basecamp. It features basic project management features and it has a decent and usable user interface.

http://collabtive.o-dyn.de/index.php

4. Teambox

Although it is a rather new player in the project management area, Teambox can be seen as one of the future leaders. It is developed as an open source application and it benefits from a simple and clean user interface similar to Twitter. It supports multiple projects, statuses, document attachments.

http://www.teambox.com/

5. Redmine

Redmine is a great project management tool based on Ruby on Rails and released under GPL v2. It has multiple projects support, news, documents & files management, time tracking and even multilingual support.

http://www.redmine.org/

6. SteberPM

Continuing the open source trend, we will place SteberPM in this list. Teams can easily setup projects and keep track of tasks, issues, bugs, efforts etc – using SteberPM.

http://www.streber-pm.org/

7. Todoyu

This application has a more compact yet visually rich interface compared to previous project management tools. Todoyu features are: manage multiple projects, overview your customer’s data, assign tasks, share files, group calendars and meet deadlines.

http://www.todoyu.com/en/todoyu/

8. OpenAtrium

With one impressive set of features as well as a clean and well executed user interface, OpenAtrium will definitely succeed against commercial tools. It is still in beta and probably when it will be stable, OpenAtrium will make happy a lot of teams.

http://openatrium.com/

9. PlanCake

Probably light is the term that comes into my mind when I see the user interface from PlanCake. It is super light and clean and it provides fast response to your actions. And considering that the project is free, it can make a lot of friends in freelancers.

http://www.plancake.com/

10. myTinyTodo

I’ve left this application at the end because it is one of my favorites. Not because of its features but because of the simplicity and speed. myTinyTodo is as the name says a tiny todo list. The best thing about it is that you are quite productive using it and it serves its purpose: todo manager for individuals and freelancers.

http://www.mytinytodo.net/

Small introduction to TinySlider

TinySlider is a lightweight javascript component – 1.5KB – that can be easily integrated in any website. It is easy to alter it visually through CSS which makes it a perfect component for designers. Another point that needs to be reminded is that the component is cross-browser compatible – yes, IE6 too. You can take a look at the demo from www.leigeber.com.

Download TinySlider Script

To use it you will have to download it, upload it onto your server and link it to your slider page(both the script and CSS styling). To use it with WordPress … follow the next 5 steps.

Step 1 – Analyzing TinySlider

I’ve removed the previous and next button for the posts because you can choose to put them or not, since you have the bullet navigation on top of the slider. Below is the structure of the slider that we will follow in order to create a content slider for WordPress using TinySlider.

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="slider">
	<ul>
	<li><img src="photos/sea-turtle.jpg" width="500" height="300" alt="" /></li>
	<li><img src="photos/coral-reef.jpg" width="500" height="300" alt="" /></li>
	<li><img src="photos/blue-fish.jpg" width="500" height="300" alt="" /></li>
	</ul>
</div>
<ul id="navigation">
	<li onclick="slideshow.pos(0)">1</li>
	<li onclick="slideshow.pos(1)">2</li>
	<li onclick="slideshow.pos(2)">3</li>
	<li onclick="slideshow.pos(3)">4</li>
</ul>

So, after seeing this code, what we want to do is get an image from a blog post and place a link towards that post. To do that we will use a function in order retrieve the first image from the post.

Step 2 – The Thumb Function

This is a very common function that you will find it on numerous sites. All you have to do is – take the code and place it inside the functions.php file, in your WordPress theme folder. If you don’t have such a file, you can create a new one with this name – functions.php.

1
2
3
4
5
6
7
8
9
10
11
12

<?php if ( function_exists('register_sidebar') )
register_sidebar();
 
function the_thumb($size = "medium", $add = "") {
global $wpdb, $post;
$thumb = $wpdb->get_row("SELECT ID, post_title FROM {$wpdb->posts} WHERE post_parent = {$post->ID} AND post_mime_type LIKE 'image%' ORDER BY menu_order");
if(!empty($thumb)) {
$image = image_downsize($thumb->ID, $size);
print "<img src='{$image[0]}' alt='{$thumb->post_title}' {$add} />";
}
}
?>

What this function does when it is called, it gets the first image from your post and you can mention the size of the image (thumb, medium, large). You can set your values in Settings->Media – in WordPress administration.

Step 3 – Retreive Posts’ Images

Let’s assume that we already have some posts inside a category which is entitled – featured. We will use WP_Query in order to get the images from posts within featured category.

1
2
3
4
5
6
7
8
9

<div id="slider">
<ul>
	<?php $sliders = new WP_Query(); 
	$sliders->query('category_name=featured');
	while ($sliders->have_posts()) : $sliders->the_post(); ?>
	<li><?php the_thumb('large');?></li>
	<?php endwhile; ?>
</ul>
</div>

First we create a loop to go through featured category. Then we display the image using the_thumb function. So, for now, we created a list with large images from all featured posts.

Step 4 – Creating Navigation Bullets

In order to create the navigation, we will need to retrieve the link for each post. And we can do that by creating a loop, but we won’t. We will reuse the first one with the help of rewind_posts().

1
2
3
4
5
6

<ul id="navigation">
<?php rewind_posts(); $i = 0;while ($sliders->have_posts()) : $sliders->the_post(); ?>
	<li onclick="slideshow.pos(<?php echo $i; ?>)">
	<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php $i +=1; endwhile; ?>
</ul>

You can see that our slider will display the name of the post as navigation items. You can change that and for instance leave it empty, and then stylize the bullets as you wish. You can also print i variable and you will have numbers as navigation. The possibilities are endless and it is up to you how the slider will look in the end.

Step 5 – Initialize the Slider

Place this script in the footer of your site – before closing the body tag in order to make this slider work. Also, as stated in the start of the tutorial, link to the script file and CSS stylesheet in the head of your document.

1
2
3
4
5
6
7
8
9

var slideshow=new TINY.slider.slide('slideshow',{
	id:'slider', // ID of the parent slideshow div
	auto:3, // Seconds to auto-advance, defaults to disabled
	resume:true, // Resume auto after interrupted, defaults to false
	vertical:false, // Direction, defaults to false
	navid:'pagination', // Optional ID of direct navigation UL
	activeclass:'current', // Class to set on the current LI
	position:0 // Initial slide position, defaulting to index 0
});

Conclusion

Assemble all these lines, add the styling you want and good luck. Please let me know if for some reason the tutorial is hard to follow or you have other question to ask. Don’t forget to check first Michael Leigeber’s site for more info about TinySlider component.

Cheers!

Iron Man 2 Trailers

Iron Man Creations

In this post I will list some of the most important paths a designer should embrace when designing a user interface or optimizing one.

Make your Call to Action buttons visible

I’ve visited many websites with this problem: Inaccessible or low visibility Call-to-Action buttons. When designing a page, a user interface – the first thing you must consider is the placement of your CTA buttons. In this way you will get the right feedback from your CTA buttons. Then, it matters how the buttons look – usually we should make the buttons stand-out and be easy to identify from the content.

Reduce the number of clicks

I’m not that picky regarding this matter, but when I have to click 7-8 times in order to download a file – that poses as a big problem. As a practice, I tend to keep my clicks in the websites I make – around 3-4. In this way you force yourself not only to create a better user experience, but also to have a good architechture behind your site.

Define a goal

Every website should have a goal. By setting that in the beginning you save precious time both from yourself and the user. Also try and lead the user to the same goal through elements in your user interface. This can only mean less wasted time for the user.

Speed-up your website

Another criteria against wasting users’ time is to have a fast site. This means that the user will focus on finding the content instead of waiting for the content to load. There are numerous resources on how to improve your site speed. So please consider speeding-up your site.

Conclusion

Having these ideas in mind, you will achieve a nice user experience which can be translated into less wasted time and productive interaction. Cheers!

A step into FlairBuilder

For users that are familiar with wireframing tools, FlairBuilder will look close to standard from the functionality point of view. It has a simple user interface focused around the canvas, having the main components, interaction and hierarchy displayed in the right side. In this way you can easily drag your desired components onto the canvas and create your wireframes.

For those of you less familiar with this type of applications, FlairBuilder has prepared a startup project that has most of the functionality enabled. In this way you can learn very fast from examples how to create wireframes and prototypes using FlairBuilder.

Interactive Sketches. Usually, with a wireframing tool all you can achieve is a static result, represented by lines and shapes. With FlairBuilder this changes because you have the ability to add events and make your wireframes interactive.

To add interaction to your wireframe and turn it into a prototype, all you have to do is to drag and drop the component on your canvas. With your component selected you can easily add events in the Event section from the right sidebar. Keep in mind that not all components can have events attached.

Working with FlairBuilder

Now that you know a little about the product, I want to share with you some personal thoughts about the application. For other information, please check www.FlairBuilder.com and you might as well try the online demo of the application.

The Good

Productivity. The first thing that I want to mention is the productivity. Being able to choose from a variety of components makes your life a lot easier and you can rapidly turn your ideas into draft demos.

Easy to Use. FlairBuilder has a simple interface and because of that, you don’t have to be a genius to work with this application. As an estimation, I would say that an average user will get used to the application in 2-4 hours.

Great Feedback and Support. Even though FlairBuilder is a young application, the feedback and support is almost beyond reproach. I’m saying “almost” because it is a one-man-show application and not all requests are integrated, but all requests are considered.

The Bad

Inconsistent UI. Although FlairBuilder is an application dedicated primarily to designers, the user interface has some glitches. It has a feeling of inconsistency. Probably in the near future the UI will have a bigger priority since the application is stable and it has a lot of features.

…and the Conclusion

To summarize this review, we can say that FlairBuilder is a good alternative in the wireframing industry and a possible leader in the prototyping area. With constant additions to the functionality, the application can only expect positive reactions from the wireframing and prototyping users.

FlairBuilder Home Page: www.FlairBuilder.com
FlairBuilder Demo: http://www.flairbuilder.com/demo/
FlairBuilder on Twitter: http://www.twitter.com/flairbuilder

I would also like to say Kudos to Cristian Pascu, the creative developer behind FlairBuilder. Make sure to check the website for promotions and giveaways. For December you will get a 20% discount. Cheers!

1. Warcraft 3

You can’t say game trailers without mentioning Blizzard Entertainment. It is the company that practically made the transition from simple announcements to cinematic experiences. And the first trailer that I will always remember is Warcraft 3.

2. Starcraft 2

The second title in is the next Starcraft installment from Blizzard Entertainment. And although there isn’t much action and involved in this trailer, the result was astonishing.

3. Halo 3

Master Chief running and some kind of shield are the main attraction points in this opening clip for Halo 3. Awesome work even with this short trailer.

4. Halo Wars

“This is Spartan Group Omega. If they want war, we’ll give ‘em War”. Great line and also some nice graphics involved in this trailer.

5. Neverwinter Nights 2

Another good action trailer is the Neverwinter Nights 2 trailer. A nice battle between a wizzard and some kind of monster. Very well handled and executed.

6. Warhammer Mark of Chaos

This is another trailer that has a well developed story and also the visual effects are crazy. Watch both movies contained in this video.

7. Assassins Creed 2

Everyone wants great stuff in this second installment of Assassins Creed. And it all starts with a realistic trailer.

8. Hellgate London

Creatures, glowing swords and a lot of action – Hellgate London is a great trailer indeed.

9. World In Conflict

This one is a nice war trailer but it gives me the chills. And the last aerial view is totally apocalyptic.

10. Diablo 3

I couldn’t let Diablo series behind. After all Diablo 2 had some great videos at that time. Diablo 3 follows the same recipe though it has more of a movie feeling.

Not many comments for these clips because each trailer speaks for itself.
Enjoy and Cheers!

1. Gmail

By far this is the first thing that I go to when I open my browser. I think I’m not the only person since checking your mail in our days is crucial to any professional.

2. Google Analytics

Yes, my name is Andy Gongea and I have a stats addiction. So, the next thing that I usually do is to verify Graphic Rating’s stats.

3. Blog Comments

This action is somehow related to the first one, since all comments are sent as an email. But, there are also the tweets that are counted and any activity on Twitter must be supervised.

4. Techmeme

By far the first news stop for me. It has the latest news from the tech world and as far as I know I’m kinda involved in that world.

5. BoxOfficeMojo

As I’ve told you I love stats and I also love movies. And what better destination than a site about new movie earnings. You can pick any one of my favorite movies and I can tell you how much it cost or the entire gross.

6. Smashing Magazine

One of the best web design stops ever. For me it is definitely a source of learning and sharing information.

7. Twitter

What can I say, this “hottie” is not in the first spots on my list. I like to tweet but with moderation. At first I was the excitement but now it is just a simple visit.

8. Techcrunch

I know that Techmeme is listed in the upper side of the post but Techcrunch remains the site for latest news about startups and technology.

9. WordPress.org

This is somehow related to my projects. Lately I’ve been working with WordPress a lot. In this case the site has become a constant destination every day.

10. Compete

This proves what I was saying about stats. Daily I’m back to Compete in order to see the stats for a particular website.

Bonus: Bing/Google

In the end, searching for information is a daily vital step. For this last stop Google and Bing are both great destination for reaching the information needed.

Now, it is your turn. What are your top daily web stops?
Cheers!

Sponsors:
- WPBest – The Best Premium WordPress Themes, Pugins and More
- WordPress Themes – WPStyles.org

Cheers!