About design and nearby

Creating a Business Logo

Posted: October 24th, 2012 | Author: | Filed under: Creative Process | Tags: , , , | No Comments »

Even if your business is not a cutting edge tech start up, the overall identity should be unified, clean and impressive. Your logo is a visual representation of everything your company stands for, it establishes a brand identity.

To create a high quality logo a designer gathers the information about client’s business (what they do, who their target audience is, what their aims are and how they want to be presented). A well-done logo should express customers and generate a warm feeling for the company, it ties all business’s aesthetics together.

New Zealand classified company logo ideaLong story short, let me use an example from my sweet web designer’s life.

I created a logo for a classifieds company in New Zealand named Adboard. I am to provide a concept, web design (including user interface design) and a logo.

Develop a concept
A design concept is the idea behind a design. Such developing is absolutely an individual process – there are a lot of ways to generate an idea and represent it.
Read the rest of this entry »

Speech Bubbles powered by CSS

Posted: July 11th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , , , , | No Comments »

(*and a little bit of jQuery – just to show more content or hide it)

Speech bubbles are a popular effect and you can create a stunning style using it for testimonials or comments.

speech bubble image

For one of my project I apply CSS powered solution with hide/ show jQuery effects. It helps me to save space (while showing the beginning of my text only) and at the same moment open the whole block if it needs. Long story short, here the source for my example:
Read the rest of this entry »

How to Use Multiple Fonts powered by Cufón on the Same Page

Posted: May 12th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

When I need to use any custom font at my design, my usual choice is Cufon javascript library. Once I was trying to implement 2 different cufon fonts on the same page. The solution is pretty easy, but you should know where to look for ))

  1. <script type="text/javascript">
  2.         $(document).ready(function () {      
  3.         Cufon.replace('.apercu_bold', { fontFamily: 'Apercu' });
  4.         Cufon.replace('.apercu_reg', { fontFamily: 'Apercu Light' });  
  5.         });  
  6. </script>

How do I know that my fontFamily are ‘Apercu’ and ‘Apercu Light’? I’ve generated 2 files for my fonts (apercu_700.font.js and apercu_light_300.font.js). Cufon is getting the registration information with the curve data for each font. So if you view the source, you find how your custom fonts are named – line 29 for me, Cufon.registerFont({“w”:213,”face”:{“font-family”:”Apercu”,…}});

Mobile-friendly jQuery Lightbox Solution

Posted: May 1st, 2012 | Author: | Filed under: Development, Mobile Design and Development, Tips and Tricks | Tags: , , , , | 2 Comments »

Everyone knows jQuery LightBox plugin – it’s simple and elegant, used for handling images through the power of jQuery’s selector. It’s perfect for image galleries, portfolios (for example, try my portfolio page >> view full size images).

The plugin works perfect, just one day while testing a client’s website for mobile devices, I found a bug – every full size image appeared at the very bottom of my page and was hidden for the very first sight, I had to scroll down the page to see it.

After setting up alerts and trying the result )) the solution for Lightbox v2.05 (by Lokesh Dhakar) was found – see line 245 or nearby:

if ((navigator.userAgent.match(/HTC_/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ||
  1.         navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/blackberry/i) ||
  2.         navigator.userAgent.match(/Windows Phone OS 7/i) || navigator.userAgent.match(/webOS/i))) {
  4.             var arrayPageScroll = document.viewport.getScrollOffsets();
  5.             var lightboxTop = arrayPageScroll[1] + (100);
  6.             var lightboxLeft = (jQuery(window).width() / 2 – document.viewport.getWidth() / 2);
  7.             this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
  9.             this.changeImage(imageNum);
  10.         }
  11.         else {
  12.             // calculate top and left offset for the lightbox
  13.             var arrayPageScroll = document.viewport.getScrollOffsets();
  14.             var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
  15.             var lightboxLeft = arrayPageScroll[0];
  16.             this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
  18.             this.changeImage(imageNum);
  19.         }
  20.     },

Note: I used navigator.userAgent.match(/HTC_/i) because navigator.userAgent.match(/Android/i) had no result for my HTC.

You can load Lightbox v2.05 with my changes.

Related post: Your Mobile Website: be Up-to-Date!

How to Disable Button until Input Fields Have Values (powered by jQuery)

Posted: March 21st, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , , | No Comments »

One [working] day I was in need of a disabled submit button until my input fields have value. It’s a typical solution if you propose any service only after signing an agreement by your users (as it was at my case).

I had a form with input fields and a submit button on my page, I would like to have the feature that the ‘submit’ button is disabled until there are values on input fields. This button should be clickable if and only if there are values input in all fields.

I decided to implement this with jQuery (so I included the jquery library at the head section firstly).
Read the rest of this entry »

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

Let's discuss your project now