About design and nearby

Set of Creative Wallpapers for iPhone 5

Posted: August 27th, 2013 | Author: | Filed under: Creative Process, Design and Decorations, Mobile Design and Development | Tags: , , , , | No Comments »

Can you imagine your everyday life without a cell phone? Not so many people can answer: ‘Yes, we can’. Mobile devices make the lives of people a lot easier and they are always close to you.

Being in love with photography I decided to produce a set of wallpapers for the iPhone 5 based on my artworks (feel free to visit my flickr photosteam to find out more). If you have a keen sense of beauty – you will like them. I would say that any of my artwork contains a piece of my heart.. and now I share it with you, to make the everyday life more exciting :)

Wallpapers for iPhone 5
Read the rest of this entry »

Animated Metro Inspired Welcome Page with Javascript and CSS3

Posted: August 13th, 2013 | Author: | Filed under: Creative Process, Tips and Tricks | Tags: , , , , | No Comments »

Let me introduce to you one more example of using an animated metro inspired design for the responsive mobile-compliant ‘welcome’ page.

Windows 8 Metro Inspired Welcome page
Read the rest of this entry »

Customize Checkboxes with CSS3

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

Sometimes working on the project I feel a lack of customization of form elements, the more if everything is to fit the overall style of website or app. This case the very solution is to use my own images for checkboxes.

I found the way to realize that with the ‘:checked’ pseudo selector – for targeting an element based on its checked or unchecked status.

The HTML:

  1. <input type="checkbox" />
  2. <label>Check box 1</label>

To tie together input tag and label tag, I need to add ‘for’ for label and relevant ‘id’ for input:

  1. <input id="Checkbox1" class="css-checkbox" type="checkbox" />
  2. <label class="css-label" for="Checkbox1">Check box 1</label>

When you click the label it will check the checkbox. The result is:


Read the rest of this entry »

Windows 8 Metro Inspired Tiles with Javascript and CSS3

Posted: February 27th, 2013 | Author: | Filed under: Creative Process, Tips and Tricks | Tags: , , , , | 1 Comment »

After Windows 8 release there is nobody all over the world who is indifferent to the platform interface and functionality. Some people like it, some ones count advantages and disadvantages. And I decide to play a little with the tiles-based interface and produce a sweet design.

You can place any content you need into tiles, actually, tiles represent your app or sub modules.
With css3 and a touch of javascript I produced (I hope) simple, sufficient and responsive solution ))

Windows 8 Metro Inspired Tiles

Styling look & feel:
To stylish tiles I use ‘background-image’ property to create a nice gradient effect, draw borders and box shadow:
Read the rest of this entry »

Smooth Scrolling with jQuery

Posted: December 24th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , | 4 Comments »

If you ever have to read a long document, scrolling all the way through it to find what you need can be annoying. This case a smooth scroller seems to be a solution, it helps with navigation and you enhance usability on the website with sleek navigation controls.

As for my mind, such sweet )) scrolling is fine for pages which list all links at the top and the relevant content – below (FAQ pages, Terms pages) or ‘back to top’ links.

This technique is based on the jQuery library.

There are 2 parts of scrolling script: the first script is for scrolling to the very top of the page and the second one – to scroll to the certain place of the page.

1. Scroll the page to the top

At the body section I defined elements with class ‘anchorLink’:

  1. <a href="#" class="anchorLink">Top &uarr;</a>

When the link with the class ‘anchorLink’ is clicked, the smooth scroll effect is created using the scrollTop function (I set the speed as ‘slow’):

  1. $(".anchorLink").click(function () {
  2.          $("html, body").animate({ scrollTop: 0 }, "slow");
  3.          return false; // prevents the default action of the event being triggered
  4. });

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