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!

1. Social Network Icon Pack

Designed by Rogie King from Komodo Media, the Social Network Icon Pack contains 80 refined, amazing social networking icons for the top networks around: Twitter, Facebook, Delicious, StumbleUpon etc. I’ve used this pack to create my spreading buttons and so far they’ve achieved their purpose.
Sizes: 16×16 and 32×32
Where to use: Blogging.

2. Function Icon Pack

One of the most comprehensive yet compact icon pack, and definitely one of the most used is Liam McKay’s Function Icon Pack. This guy is brilliant and his work is absolutely awesome. Function Icon Pack contains 128 icons that are suitable for multiple tasks related to blogging and web design.
Sizes: 48×48
Where to use: Web Design, Blogging.

3. Bright! Icon Set

Developed by the guys behind Icon Eden, Bright! is a great set of icons that can be used in various situations since it comes as a vector file. It has nice colors, 148 icons, great perspective and room for your creativity to put the icons at best use.
Sizes: all
Where to use: Web Design, Blogging.

4. 32px Mania

With 179 slick icons, 32px Mania is one of the best icon packs dedicated to user interface designing. All icons have a nice Apple-ish touch and can be easily integrated in designs. Of course you can use this pack not only in UI but in other task that you’ll find it usable.
Sizes: 32px
Where to use: User Interface Design, Blogging

5. Led Icon Set

This pack is the only mega pack presented in this list. I usually don’t like big packs because most of the times they contain duplicate icons. This is not the case with Led Icon Set design by Marcis Gasnus because LED has 512 great icons that will cover all areas without being redundant.
Sizes: 16px
Where to use: User Interface Design

6. Project Icon Set

This one is a small package that contains no more than 18 icons. The main advantage of Project Icon Set is that it can be applied in multiple areas even if it represents project management related icons. Cheers to Deziner Folio for providing this nice icon set.
Sizes: all
Where to use: Web Design, Blogging

Conclusion

I didn’t enter my Quartz Icon Pack here because it isn’t mature enough. Maybe after 100.000 downloads . Kudos for all designers making designing a better activity and cheers to all icon designers!

Tutorial Requirements

1. Launching Pencil

In order to start Pencil Addon, you must start first Mozilla Firefox. After that, you must select from the Menu Bar the Tools section and then find and press Pencil Sketching

2. Setup Page

After you launch Pencil, you will see a blank page with certain width and height that are relative to your screen size. To set your page the way you want you can Right Click on the Untitled Page tab and select Properties. Here you can customize the width, height and title of the page.

3. Analyzing Twitter Layout

Twitter is built onto a 2 columns layout. In the top side of the layout (header) it has a logo and a navigation menu. In the left side it has a big input text element and the tweets, while in the right side (sidebar) it has the mini-profile and different other links.

Our task is to create a simple wireframe with Pencil that will look like Twitter from the structure perspective. So basically we will use only block elements that will represent each of the user interface components. That is the main idea behind wireframing – creating an outline that will be used as guideline in the design process.

4. Creating the 2 Columns

In order to start our wireframe, we will need to drag a rectangle element from the left sidebar onto the canvas (page). In the standard form it has a blue fill color. We will have to Right Click on the rectangle and change the Properties to a white rectangle with a 1 pixel solid black border. Then, we will set its size for the left column and then we will copy&paste it in order to create a smaller column for the sidebar.

After creating these 2 rectangles your canvas should look like this:

5. Creating the Header

Now, we will have to create 2 new elements that will serve as the header: logo and navigation. As I’ve told you, we will use just block elements so the logo will be represented by a rectangle as well. So in this step we will make the same action as in the previous step: copy rectangle elements and shape them and place them properly as logo and navigation.

In addition we will add some text inside the rectangles that will tell us what element is there. For the logo we will use … logo and for the navigation we will actually write similar menu elements as Twitter.

To insert text inside the rectangles we will have to Double Click on them. After we enter the text that we want, we can Right Click on the element and select Properties. From here we can go to the Text tab and change the way the text is displayed – color, font, size.

These elements are common in most pages on Twitter – profile page, reply page, direct message page. So in order to boost our productivity, we will create new pages that will have the background our current page. In this way on the other pages we will add only the particular elements.

6. Creating an Finalizing the Main Page

From the top right side of the canvas we can press New Page button in order to create a new page.

The only difference compared to the first page screen is that now we will set the background as our Twitter page. Now all we have to do is to add the rest of the elements to the stage. Keep in mind that the elements from the background can only be modified inside the background page.

After adding all the other element from the page using rectangle, text and line elements, here the final wireframe of Twitter created using Firefox Pencil Addon.

Conclusion

Overall, this addon is quite useful and after half an hour inside Pencil you will know most of the functionality. Cheers for the developers behind this project and have fun working with Pencil. Cheers!

We will start by saying KUDOS to all web developers that are constantly creating mind blowing Firefox plugins. They are the real force behind the Firefox phenomenon along with the guys from Mozilla Foundation. And now let’s start sharing some information on Bulletproofing your Firefox for Web Design

1. Firebug

Firebug is “the” extension for Firefox. You can easily say that Firebug is one of the sources of popularity for Firefox among web designers and web developers. That’s because it is simply the best web development tool that lets you edit, change and visualize the changes in real time. It has a ton of features and it will save you time on debugging and enhancing your work.

2. Web Development Toolbar

Web Developer Toolbar is the second extension that I always install. It has some very nice features that are complementary to Firebug and some similar but more effective. Together these 2 will make web development painless.

3. YSlow

This addon is actually a plugin for Firebug. It is a tool developed by the guys from Yahoo!. It has very nice features and tips that will tell you how to make your site faster. Also, Smushit is now a part of YSlow, which helps you to compress your site images.

4. Colorzilla

There are numerous times when you want to pick a certain color from a website. Colorzilla takes the pain of editing a screen shot in order to find the code of the color. Now, while you browse you can easily get a color using the eye dropper from Colorzilla addon.

5. Fireshot

Annotation and collaboration on designs are now possible with the help of FireShot. FireShot is not only a Firefox addon but also a standalone product. It is simple to use and very effective. Just add your notes, save the image and send it.

6. Pencil

The wireframing task is now possible inside Firefox. I know that this sounds pretty amazing and it actually is. Firefox is a great platform and now because of that, now you can find multiple addons that are competitors to standalone commercial applications.

7. IE View / Opera View / Safari View Win / Chrome View

These plugins allow you to open the current web site in one of the following browsers: Internet Explorer, Opera, Safari and Chrome. There is one small requirement for these plugins. That is to have all the mentioned browsers installed.

8. CodeBurner

This plugin provides an easy access to HTML and CSS reference information and code samples. It is easy to use and you may gain time by using it instead of surfing randomly the web.

Conclusion

That’s it! You can debug sites, you can make wireframes, you can collaborate, you can test for cross browsing, you have access to quality reference. This is life, from time to time you have to open Photoshop to complete visual tasks. Hopefully this will help you in your web design career. Cheers!