About design and nearby

The Sweet Drop Down Javascript Menu

Posted: September 5th, 2011 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

Drop down menu is the common element of today’s web design. It’s very flexible and takes up less space than the usual one, all what you do need is make over your menu for your own needs. With Javascript drop down menu comes more interactive or at least gets animation that improve user interface. With help of CSS it’s pretty easy to customize the look and feel.

After googling I found Sexy Drop Down Menu (by Soh Tanaka), but it didn’t quite suit me. The menu tabs were opened after clicking the relevant button. And I was looking for the hover effect. So my decision was to do over its javascript for my need.
Read the rest of this entry »

Using Cufón.js with jCarousel (How to Fix)

Posted: July 2nd, 2011 | Author: | Filed under: Tips and Tricks | Tags: , , , | 2 Comments »

Using Cufón with jQuery jCarousel, I get a bug: after the first rotation my texts (powered by Cufon javascript) disappear – and the rest of slide is shown. The Carousel has three items and rotates them circularly. I find the way to fix it via refreshing Cufón:

  1. function carouselAnimateStart()
  2.             {
  3.                 Cufon.refresh();
  4.             }

and

  1. jQuery(document).ready(function () {
  2.                 jQuery('#mycarousel').jcarousel({
  3.                     auto: 3,
  4.                     scroll: 1,
  5.                     wrap: 'circular',
  6.                     initCallback: mycarousel_initCallback,
  7.                     itemVisibleOutCallback:
  8.                     {
  9.                         onBeforeAnimation: carouselAnimateStart
  10.                     }
  11.                 });

Note: using such fix leaks the memory (because your script is refreshed every time).

Live example: check the example >>

Related post: Using Non-standard Fonts with Cufón.js
Related post: Cufón.js and Hover Effect

The Top Reasons to Hire a Freelance Designer

Posted: May 8th, 2011 | Author: | Filed under: Creative Process | Tags: , , | 1 Comment »

Sometimes outsourcing your business needs is the best way to a cost cutting, also that frees you up for more (or less)) important tasks. And the question is – who is more preferable for hire, a freelance individual (or a small firm) or a large company.
reasons to hire a freelance web designer

I see the main reasons for hiring a freelancer as:

The cost.
A Common Freelancer inhabits at home, he has not overhead costs like office rent and additional bills (in case if you’re hiring an agency, the rates includes the cost of employing staff who do other things that may not be relevant to your project).

Direct communication and Speed.
Dealing directly with a freelancer shortens the project duration, because he is the very person who is working for you. As the communication between you both is clear and easy, you will be able to get your job faster (being a freelance web designer I work irregular hours to compete, often more than 8 hours a day and 5 days a week – enough coffee is a must!) and according to all your amends.
Read the rest of this entry »

Input Box with Text Inside

Posted: March 20th, 2011 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

HTML forms are used to pass data to a server and depending on the designer’s plan they may take one look and feel or another. Usually to create a text box (or input box) coders use the <input> tag and the type attribute – “text”:

  1. <input type="text">

The common usage of the input tag looks like

Your text: 

Sometimes you need to go another way – to implement some designer’s concepts or just because you have no enough spare space at all.. Or you can find that it’s necessary according to the last design’s trends ))

For me the solution was (sure, without inline styles):

  1. <input type="text" name="#" id="#" value="your text"  style="padding-left:5px;" maxlength="50" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>

Or more cute variant –
HTML:

  1. <input type="hidden" name="#" value="#" />                    
  2. <input type="text" name="#" id="Text1" value="search" maxlength="50" class="one" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
  3. <input class="sec" type="submit" value="" />

Styles:

  1. .one { width: 193px; height: 16px; float:left; padding-left:5px;}
  2. .sec { background: transparent url('/images/search_button.png') no-repeat; width: 20px; height: 20px; border: none; cursor: pointer; margin-left:19px; margin-top: 3px; top:21px; position: relative;}

Result:




Pretty easy and why don’t ))

Grunge Style Inspiration

Posted: January 11th, 2011 | Author: | Filed under: Creative Process | Tags: , | No Comments »

Grunge is a stylish design trend. It looks a little bit ‘dirty’ and faded, but helps to create less structured and ‘free form’ designs.
Grunge poster

To fit grunge look and feel you have to use textured backgrounds, ragged edges, worn and faded graphics, hand-written elements and be inspired by urban lifestyle. For such kind of design your colors should be subdued – brown, beige, grey, black (well, that’s not the rule for advertising types of photos, but I’m not going to sell Big Macs). The more bright colors make the impression less evident.

Nowadays designers mix styles to achieve the best result. Well, for web designing I prefer to use some grunged elements – to make the result more sweet :) The only grunge style in is too specified, however it may suit some music bands.

I was inspired to make a poster. The hardest point of this work was to put together the whole wide range of different elements… hope, you like that too.

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now