Screen Shot 2013-11-25 at 11.48.55 PM

Feminine and Cute Design Website

Pretty and cute is definitely my cup of tea.  I love butterfly, flourish background, cute icon and illustration thing. In this post, you will be able to see some very beauty and  extremely cute website design.  Hope they can bring some inspiration to your life.

Feminine

RedVelvetart online Shop that sells hand craft staff.

Screen Shot 2013-11-26 at 12.12.19 AM

Pip Studio one of my favourite brand.

Screen Shot 2013-11-26 at 12.24.59 AM

Stephanie Ryan

Screen Shot 2013-11-26 at 12.21.35 AM

Darling Tree Personal Website for Joanna klima

Screen Shot 2013-11-26 at 12.06.50 AM

Freepeople online fashion boutique

Screen Shot 2013-11-26 at 12.13.42 AM

Susannah Conway Personal website of Susannah Conway

Screen Shot 2013-11-25 at 11.58.59 PM

wallpapaers-creative-gallery-content-description-author-wallpapers_for_desktop

Photo gallery websites for inspiration

Sometimes or maybe most of the time, we are looking for something can inspire you, but when you walk the same road everyday, meet the same the people and do the same things you have done million times. Where do you find something really inspiring. Travelling is always a way to get inspiration. But when you don’t have the budget.
No budget no problem I always go to the new places and discover the secrete corner in the city I live, thanks god I live in London!

When the weather is not good. which happens a lot here. Staying at home, make nice food that you never border to do during the week. Choose my precious tea that I hide in the cupboard. Then turn on my computer. I almost Google everything and half of the time I’m on-line like most of the “young people”. I always spend time browsing those website to get some inspiration.

Pinterest

Screen Shot 2013-11-26 at 12.29.54 AM

The Design Inspiration My friends website. Provide all sorts of design ideas and resource such as creative pictures, logo, business card, website, fonts, illustrations and etc. Great work, tony and ray.

Screen Shot 2013-11-26 at 12.35.44 AM

Photography Served – Gallery for commercial photography, product photography and portraiture.

Screen Shot 2013-11-26 at 12.36.24 AM

Flickr – It’s become my daily routine now.

Deviantart – community of artists and those devoted to art. Digital art, skin art, themes, wallpaper art, traditional art, photography, poetry / prose. Art prints. Lots of free resouce avialble on the site as well. e.g. background, photoshop brush, vector file, icon, photoshop action and etc.

favim.com, image gallery of the most awesome and the prettiest pictures on the Web to be the storehouse for your inspiration. You can search them by color tag. You can also edit images on the website.

Screen Shot 2013-11-26 at 12.38.06 AM


We heart it – we heart it – get inspired by what people love, and show them what inspires you.

Screen Shot 2013-11-26 at 12.37.56 AM

 

illustrator

Greatest Illustrator artworks I love Part One

Yukio Miyamoto – Masters of Adobe Illustrator

Yukio Miyamoto has been using and abusing Adobe Illustrator since the biginning of time (well, since the late ’80s at least.). Professional Artist Yukio Miyamoto’s artwork is showcased and sample throughout the book.Yukio’s artwork has appeared in a number of books, from design books. Yukio has trained thousands of people in all areas of graphics for the Mac and win.

His illustrator works for instrument and object are amazing. The result looks like photo effect which is hard to believe is made by vector illustration.

His mucha are also sooo beautiful. If he could make a Tarot card, I will definitely collect it.

Image source from google image search

Max Kostenko

A very talent illustrator lives in Moscow, Russia. He creates a lots of stunning cartoon characters which you can’t forget after seeing them.

Image source for www.behance.net

Sveta Dorosheva

Her beautiful fairy-tale and Calligraphy illustration just stole my heart.

Image source for www.behance.net

Andreas Krapf

a super talent illustrator from German.

His works always shows a very interesting stories. He tweet’s some fairy tale story into his version which gives them a new life. Very creative !!!

Image source for www.behance.net

WYLS_002020_r1_c1

COLOURlovers

To be brave to put some colours that you will never think to put them together. But you know what they will surprise you. Think hard in your head is not gonna work, you need to get a tool.

Photocopa – to create a color palette from the picture you like.

Not bad!  It’s just a small part of COLORlovers.com

Create a color palette yourself,

then you can create patten by using these palette.

If you can’t find the pattern you like, you can create your own pattern.

wptheme

Hand-picked best free wordpress theme

Sight

Sight is a professional WordPress theme which was made in a modern minimalistic style and best suits for Blogs & Magazines. Layout is made using Golden Grid and it gives you a choice of information publishing – grid view or standard blog view. 

Screen Shot 2013-12-13 at 5.35.11 PM
Extra ability of showing most important information content via big image slider on the top of the page allows you to improve your web-site’s presence and attract new visitors. It is important to be noticed that Sight is already Search Engine Optimized, so you don’t need to care about, just start and get love from Google.

Theme info:

  • Current Version: 1.0.1
  • Release date: 11/25/2010
  • Theme Type: Blog, Magazine
  • Requirements: WordPress 3.0+

 

Features
jQuery Powered Featured Post Carousel
A custom homepage featured slider to showcase particular posts, all powered by jQuery.

Pagination types
Choose your personal pagination type from a standard (Prev – Next) or a trendy Twitter-style “Load More” powered by jQuery.

post view types
Your blog navigation is now much easier with 2 types of post views. It’s powered by jQuery and user’s cookies will remember the choice at any time, so your visitor will always see the chosen type.

Custom Widgets
Custom Widgets add flexibility to a flexible as it is template.

Custom Menu Locations
For your convenience we prepared two locations for the Menu which you can check out and choose at standard WordPress function.

Theme Options Page
Options Panel will make your work with template even easier.

Google Analytics Ready
You don’t have to be lost in code now! Just paste a ‘google analytics’ code with one click.

Logo Customization Options
Easy Logo Upload allows you to adjust a template for your unique site.

Search Engine Optimized
We love Google, so we made our best to make Google loves yours.

Built in support for Social Bookmaking
Built-in social bookmarking buttons allow users to share links to your site in a single click.

Threaded Comments Support
Now all discussions are carried out quick and easy.

View Demo  download

 

Inuit Types:

This is a rare gem – a simply stunning theme that’s half blog, half magazine site.

Features:
* Custom translations of all blog areas
* SEO like nowhere else – seriously – try it and you’ll see
* Big Fat ‘About my Blog’ Area
* Simple Pagination
* Header / Footer Scripts Management
* Fully Widgetized Sidebar
* Left or Right-Hand Sidebar by your choice
* Featured Entries
* One or Two column entries on front-page
* WP 2.7 full comaptibility

View Demo     download

Over Stand

overstand themeA fabulous magazine-style layout, Overstand is free from clutter and highlights content beautifully using a combination of white space, large slugs, neat headlines and thumbnail images.

Orange and grey are the predominant colours and the layout ranges across three columns.
The theme takes a little bit of extra work in set-up but the results can be worthwhile.

View Demo      download

 

AutoFocus

A unique wordpresstheme. AutoFocus is a beautiful free WordPress theme built specifically for photographers looking for a simple way to showcase their work online.
autofocus theme
The theme features a unique homepage layout with autosized images and large full-width images on the individual article pages. An optional single-column version of the homepage is also available.

AutoFocus makes great use of typography considering its photo-centric focus. Also, mousing over any of the images on the homepage or the category pages reveals an excerpt of the post content, which is an attractive touch.

Perhaps best of all, no custom fields are needed. Images are uploaded using the Media Uploader, and resizing is handled automatically. The theme grabs the images directly from the article, making this a great theme for a less experienced user.
View Demo    download

DePo Square

DePo Square ThemeDePo Square is a beautiful, simple WordPress theme that provides Tumblr-like capacity to post photos and videos in the stream of your posts.

Designed by well-known web identity Derek Powazek, DePo Square is a minimalist-looking theme with elegant typography and effective functionality.

To use the theme ala Tumblr, you simply map your categories so as to allow you to use five pre-defined post types — Post (default), Status, Quote, Link, or Photo — and your content will be displayed in a format special to those types.

Just select your category mappings by visiting the “Current Theme Options” under “Appearance.” No CSS or other formatting is necessary.

The theme also has a neat widget space in the top header, allowing site owners to mix navigation with updates from Twitter and Flickr.
View Demodownload

Imbalance

Screen Shot 2013-12-13 at 5.35.41 PMImbalance is an excellent choice for any online magazine, blog or portfolio websites. This free wordpress theme designed with a contemporary modern vibe in a minimalistic style. By the use of Imbalance theme, you can easily fresh-up your project whether it is a blog or i-magazine. In consideration of additional features and flexible layout it is a very user-friendly theme that can attract new visitors to your web-site.

Theme info
Current Version: 1.19
Release date: 08/08/2010
Theme Type: Blog, Portfolio
Requirements: WordPress 3.0+

Features

Custom Homepage
Unique homepage design allows you to use the template for different goals whether it is a professional Portfolio or a personal Blog.

Clean typography
Less noise makes your site easier to read.

Powerful jQuery-powered header
Special drop-down Menu adds some originality and convenience to your template.

Theme Options Page
Options Panel will make your work with template even easier.

Search Engine Optimized
We love Google, so we made our best to make Google loves yours.

Logo Customization Options
Easy Logo Upload allows you to adjust a template for your unique site.

View Demo     download

Urban Free WordPress Theme

Urban is a free WordPress theme from Paul Bennett, based around the idea of having posts displayed in a timeline. It features a scrolling timeline, inline loading of posts, pages, images and Youtube videos, realtime search that displays results as you type, tracking of your recently viewed pages, and other footer modules including twitter updates and last.fm recently played tracks.

Please read some usage instructions when you install this theme.

View Demo     download

Realtex

Realtex is a free news WordPress theme with featured content option and options page. Supports post thumbnails. Suitable for any niche, especially for news or magazine sites.

Features
Options Page
Post Thumbnails
Featured Content
125×125 banners ready (easy editable from admin options)
468×60 Header Banner ready (easy editable from admin options)
Three columns
Gravatar on Comments
Compatible with latest WordPress versions
Widgets Ready
SEO Optimized
Fixed width
Logo .PSD file and font files are included in theme folder.
Tested and compatible with all major browsers: IE, FF, Safari

View Demo     download

gimp-02

GIMP

GIMP is an acronym for GNU Image Manipulation Program. It is a freely distributed program for such tasks as photo retouching, image composition and image authoring.

gimp screenshot 1 gimp screenshot2 gimp screenshot3

It has many capabilities. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc.

GIMP is expandable and extensible. It is designed to be augmented with plug-ins and extensions to do just about anything. The advanced scripting interface allows everything from the simplest task to the most complex image manipulation procedures to be easily scripted.

GIMP is written and developed under X11 on UNIX platforms. But basically the same code also runs on MS Windows and Mac OS X.

Find more about GIMP, click there.

Download from download page.

csstrick

Some CSS Tricks

Some small and common css trick to remember, by the way I gave up on IE6 now, so don’t really care whether the style it will work on IE6 or not.


1. Fixed on the left, and scrolling on the right

The inspriation is from http://www.nuyustore.com/ .   I like the way nüyu display the content.  this is very simple to do by using CSS.

CSS:
[cc lang="css"]
#col1 {
float:left;
margin-right:30px;
position:fixed;
width:260px;
}
#col2 {
float:left;
margin-left:300px;
width:650px;
}
[/cc]

HTML:

[ccie_html]<div class=”col1″>fix position content, for example navigation menu</div>

<div class=”col2″>scrolling content, for example main content</div>

[/ccie_html]

See some examples of the fix navigation

2. footer always at the bottom of the page

This is an very classic problem for lots for front end developer.  My method is based on Matthew James Taylor’s post.

CSS:
[cc lang="css"]
#wrap{ min-height:100%; position:relative, background-color:#fff; width:1000px; margin:0 auto;}
#header{ width:948px; padding:0 26px;}
#main{ width:948px; padding:47px 26px 165px 26px; overflow:auto;}
#footer{ position:absolute; bottom:0; height:165px; background-color:#666; width:100%; padding-top:35px; }

/*If IE 7 & IE6*/
#main {height:100%;}

[/cc]
HTML:

[ccie_html]
<div id=”wrap”>

<div id=”header”>…</div>
<div id=”main”>….</div>
<div id=”footer”>…</div>

</div>
[/ccie_html]

3.Min height/Width & Max Height/Width for IE7
[cc lang="css"]
#{

max-height:400px; /*for Firefox and other broswers*/
width: expression(this.height> 200 ? “200px”: true); /*for IE only*/

}

#div{

min-height:600px;  /*min height work for all browsers */
height: auto !important;
height: 600px;

}

[/cc]

4.reset CSS style
[cc lang="css"]

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

[/cc]

5. To show the hr with image background use

CSS:
[cc lang="css"]

div.smldivider

{

clear:both;
width:100%;
background-image:url(../Images/dotted-line.jpg);
background-position:left center;
background-repeat:repeat-x;
height:5px;
border:solid 0px #f2f2f2;

}

div.smldivider hr

{

display:none;

}

[/css]

HTML:

[ccie_html]<div><hr/></div>[/ccie_html]

6. locate the elment in middle horizontally

CSS:

[cc lang="css"]
#sec_nav
{

width:950px; /* the width must be defined */
margin:0 auto; /*auto can make the sec_nav location in the middle or in the middle of some container */
text-align:center;
height:25px;

}
[/cc]

7.Conditional Comments for different version of IE browsers

[ccie_html]
<!—[if IE 6]>

<link rel=”stylesheet” type=”text.css” href=”ie6.css”>

<![endif]–>
[/ccie_html]

8.p: before and p: after and the property of content , for example:

[cc lang="css"]
p:before, p:after
{ content: “” ”; color: gray; }
[/cc]
or
[cc lang="css"]
{ content: url(para.gif) }
[/cc]

<p>This is a quote.</p>

Result:  “ This is a quote. ”

9. Get ride of the link border
[cc lang="css"]
a:link{ outline-style:none}
[/cs]
But keep in mind the outline may be very important for user who use the keyboard to browser the website.

10.IE White space bug

There is a white space under the images in IE

Solution: add <div> wrap the link and image <img src=”images/test.jpg” alt=”test image”></div>

11. Some CSS selectors

[attribute^=string] – This looks for the string at the Beginning of the Attribute.
[attribute$=string] – Looks for the string at the End of the Attribute.
[attribute*=string] – Looks for the string Anywhere in the Attribute.

12. CSS hack for Safari only
[cc lang="css"]

/* To target a safari browser issue */

@media screen and (-webkit-min-device-pixel-ratio:0){

Element{
}
}
[/cc]
13. Bicubic Image Scaling

You’ll love this one. Does the bad image scaling in IE bothering you? If you compared other browsers and IE, IE’s rescaled image doesn’t look as good as other.

Adde this in the css : img { -ms-interpolation-mode: bicubic; }  to make the image look smooth in IE

…More to come

piggy-bank

Voucher and Coupon Websites

This is very important.  Before you buy any thing online, there are some websites you should checkout first. They may be able to provide you some discount or free delivery.

http://www.myvouchercodes.co.uk/

http://www.retailmenot.com/

http://www.hotukdeals.com/

http://www.feedmedeals.co.uk/

http://www.techhead.co.uk/hot-deals

http://www.discountshoppinguk.co.uk/

http://www.groupon.co.uk/

As I live in the UK at the moment, so I am not sure about the best website for voucher and coupon in the other country.

9adb8b4b00264f8482a701d576720386_7

Popular Tutorial Blog

1. Tuts + Network is the most comprehensive tutorial blog.   You can find almost every aspect of  tutorial from graphics to web development , audio to video.

tuts plus

  • Photoshop & Graphics
  • Web Design & Development
  • Vector & Illustration
  • Music & Sound
  • AfterEffects & Motion
  • Flash Tutorials
  • Computer Graphics Photography

2. Smashing Magazine is the first blog impressed me by providing such a great amount of  free information and resource about web development and design.  I have learned a lot by reading their post.  They deliver useful information, latest trends and techniques, useful ideas, innovative approaches and tools.  Each of the post are master piece. Reading their most already become one of my daily event.

  • Wallpapers, Icons
  • Photos, Showcases
  • CSS, Javascript, WordPress
  • Photoshop, Fonts Freebies
  • Software Tutorials

3. Tutorial9 is a brilliant website for photoshop tutorial, photography tutorial and web/blogging tutorial.  I have been reading and trying many of their articles and come out with great results.  Their tutorial are well explained and structured.  All their lessons post online are free.

  • Photoshop Tutorials
  • Photogrpahy Tutorials
  • Web/ Blogging Tutorials
  • Freebies, Resources

Web Resources provide free web resource for web developers about Javascript, CSS, Design Resource, and free software. Tons of Juery plugin and example which will give you inspiration of your website design and development.


Onextrapixel
is a very comprehensive blog for website  designer and developers.
Screen Shot 2013-12-13 at 5.42.51 PM

Tutcandy – with Many video design tutorials.

Tutorial/Adduzeedo – include many Graphic Design Inspiration and Photoshop Tutorials

PSDFan – Tutorials for Photoshop

2a8fce0c96a04b70ab171c66604dae7a_7

Little excitement after shopping in Oasis

Haven’t shop in Oasis for ages.  Today I walked pass by, and the big sales sign dragged me in. (It’s the same reason I went to Zara-to grab a bargain)  After 5 mins scan in the sales rows.  I gave up and start looking at the new collection.  Puff sleeves, strips, shoulder pads is every where.  I absolutely love the new trend.  As a very efficency shopper,  6 outfit is chosen in 10 minutes and that’s why I like go shopping on my own.  To be honest, all the clothes I picked are looking good on me.  This make my heart start bleeding (I will be bankrupt).    This is one of the clothes I picked at the end.  Trust me, you will look very slim in this top.

For more look, please visit Oasis Online Shop

By the way,  for someone if you haven’t used and heard about Polyvore website. You should start to us it now specially when you are not sure how the different clothes match to each other. This is for you plus it’s fun to use. Check out the Explore-Polyvore.

Screen Shot 2013-12-13 at 6.12.44 PM

images3

IE tester

Test your design in different version of IE can be a pain. IE tester is excellent tool to test your design from IE5.5 to IE8 under Window 7, Visa and XP. The software works like other broswers, but give you the option to open a browser under certain version of IE. Most important it’s free.

http://www.my-debugbar.com/wiki/IETester/HomePage

Apart from the main function, it also provide DebugBar and Companion.JS for web development purpose.

DebugBar features
The toolbar :

  • Menu to customize the DebugBar and check updates.
  • Toggle the Development bar
  • Alert on javascript errors
  • Send page screenshot by email
  • Color picker
  • Resize IE window
  • Zoom page
  • View source code
  • View MSHTML integrated ActiveX source code

The Development bar :

  • View HTML DOM Tree
  • View original ad interpreted source code
  • View tab attributes
  • Edit tab attributes
  • View HTTP and HTTPS headers
  • View page cookies
  • Validate html code for main page and frames/iframes
  • List all javascript functions
  • View javascript function code
  • Execute javascript code in the currently loaded page
  • Get information about currently loaded page

DebugBar is free for personal use.
Companion JS

  • Detailled javascript error reporting (call stack and real file name where the error occured).
  • “Firebug”-like Console API feature.
  • Javascript console feature useful to inspect javascript objects at runtime.
  • A toolbar icon to open the Companion.JS panel.

TeraCopy

TeraCopy is a compact program designed to copy and move files at the maximum possible speed, providing the user a lot of features:

* Copy files faster. TeraCopy uses dynamically adjusted buffers to reduce seek times. Asynchronous copy speeds up file transfer between two physical hard drives.
* Pause and resume file transfers. Pause copy process at any time to free up system resources and continue with a single click.
* Error recovery. In case of copy error, TeraCopy will try several times and in the worse case just skips the file, not terminating the entire transfer.
* Interactive file list. TeraCopy shows failed file transfers and lets you fix the problem and recopy only problem files.
* Shell integration. TeraCopy can completely replace Explorer copy and move functions, allowing you work with files as usual.
* Full Unicode support.
* Windows 7 x64 support.