agosto 18, 2010

46 Captivating Examples of Extremely Colorful Web Designs

The importance of colors can be described by only one sentence – “Color to life is like salt to food”. Colors can change your mood, determine your attitude, whenever you see color you can feel its pleasing effect within your soul. In other words, in life colors express a lot of meanings without saying anything.

Today we have collected some captivating examples of elegant colorful web designs for your inspiration. Have a look.

Colors are not only important to our personal life but it is very significant in every field of life, like in web designing. Excellent use of colors scheme in designing a website can make your website highly noticeable, it is all about impression, if your website has elegant color scheme then it will give a delightful impression to your visitors which will make them visit again.

1. WeareHughes.com

wearehughes

2. Rareview.com

rareview

3. Havaianas.com

havaianas.com

4. MattSalik.com

mattsalik

5. PixelCool.com

pixelcool

6. ILoveColors.com.ar

ilovecolors

7. CuriousGenerationGroup.com

curiousgenerationgroup

8. MarcosXotoko.com

marcosxotoko

9. K4Lab.info

k4lab

10. Tanq.cl

tanq

11. Duirwaigh.com

duirwaigh

12. NybbleTech.com

nybbletech

13. The Red+White Sale

theautumnfilm

14. Boomerang TV

Boomerang TV

15. Nokia Trends Lab

Nokia Trends Lab

16. Brasil Cine

Brasil Cine

17. SheridanandCo.com

sheridanandco

18. CocaCola Website

CocaCola Website

19. Fidelity

Fidelity identity & web design

20. Bebiko

Bebiko

21. Dreft

Dreft Promotional web site

22. Colorful Design by JenniElfi

Colorful Design

23. Smudge design

Smudge design

24. Paperclay Holderisms layout

Paperclay Holderisms layout

25. SolidGiant.com

solidgiant

26. WebDesignerWall.com

webdesignerwall

27. WebDesignerDepot.com

webdesignerdepot

28. RotaCups.com

rotacups

29. LifeMusicFoundation.org

lifemusicfoundation

30. JasonBradbury.com

jasonbradbury

31. AdaptD.com

adaptd

32. Garamiz.hu

garamiz

33. GetMeFast.com

getmefast

34. Beautiful2.com

beautiful2

35. Twenty2Designs.com

twenty2designs

36. Giancarlo-Fajardo.com

giancarlo-fajardo

37. DesignFabrika.com

designfabrika.com

38. Creative Sessions | Tuts+

sessions.tutsplus.com

39. TutCandy.com

tutcandy.com

40. Pampaneo.es

pampaneo.es

41. DivVoted.com

divvoted

42. CubeClub-Chemnitz.de

cubeclub-chemnitz.de

43. DouglasMenezes.com

douglasmenezes.com

44. CtlOnline.org

ctlonline.org

45. JulioSilver.com

juliosilver.com

46. Burubundi.es

burubundi.es

We hope you enjoyed this inspirational article. You thoughts?

agosto 18, 2010

10 Essential Free E-Books for Web Designers

book design image

While many may still prefer print for long-form reading, e-books are gaining popularity as a worthy digital alternative. Aside from all the usual benefits of digitizing a book (faster searches, less page-flipping, linked pages, additional resources, etc.), e-books are a huge help to digital and online professionals.

There are now e-books available on almost every aspect of design, from planning your business and managing your time, to designing web applications. This post highlights 10 of the best free e-books for designers, with selections available as PDFs or in HTML.

Whether they’re meant to inspire or educate, let us know if you can recommend any other free e-books aimed at designers in the comments below.


1. Taking Your Talent To The Web


talenttoweb image

This detailed, intelligent guide is a how-to on transitioning from print to web by Jeffrey Zeldman. It was written for print designers whose clients want websites, print art directors who’d like to move into full–time web and interaction design, homepage creators who are ready to turn pro, and professionals who seek to deepen their web skills and understanding.

Even though it was written in 2001, much of the advice about transitioning from print to the web still holds true, and print designers and art directors are still scrambling to move into web and interaction design.


2. Web Designer’s Success Guide


success image

Web Designer’s Success Guide is the definitive resource for starting your own freelance web design business. Written by Kevin Airgid, a recognized designer who runs an interactive studio, the book offers step-by-step instructions on topics like transitioning from full-time to self-employment, marketing your freelance business, managing projects and pricing yourself appropriately.


3. Designing For The Web


designforweb image

A Practical Guide To Designing For The Web aims to teach core web development techniques based on the principles of graphic design. Written by recognized designer and author Mark Boulton, it is a stand-out amongst web design books with the right balance between practical and inspirational.

It features five sections: Getting Started, Research, Typography, Color and Layout. The focus is on learning graphic design theory, which you can then easily apply to your own designs.


4. Design Your Imagination


design imagination image

Design Your Imagination is a complete and comprehensive guide on website design for those new to the industry, although it may also prove helpful for experienced web designers as well. Almost every aspect of website design is exemplified in this e-book, which aims to help beginners hone their creativity.

This book features more than 28 chapters that deal with a broad array of subjects, from the history of web design through web design principles, planning, and more, all illustrated with practical examples.


5. Time Management For Creative People


creative people image

Compiled from a series of posts published on Business of Design Online by writer and creativity coach Mark McGuinness, this is an easily digestible guide to help professionals in the creative sector maximize their time and productivity.

Subtitled “Manage the Mundane – Create the Extraordinary,” this book is designed to help you maintain your creative focus while dealing with your other commitments. It includes plenty of practical time management tips tailored specifically for creative types.


6. Getting Real


getting real image

Getting Real is the business, design, programming, and marketing philosophy of 37signals, a developer of web-based software used by over one million people and businesses in 70 countries. With short, value-packed chapters, this book is an excellent guide for building web-based applications in a smarter, faster and easier way.


7. The Woork Handbook


woork handbook image

The Woork Handbook is focused around web design and programming and primarily deals with CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design.

It is an excellent reference book on a range of subjects all drawn from a wealth of excellent articles published on Woork.


8. A Practical Guide To Web Typography


web typography image

Robert Bringhurst’s book, The Elements of Typographic Style, is on many a designer’s bookshelf, and is considered to be a classic in the industry. The renowned typographer Hermann Zapf calls the book “a must for everybody in the graphic arts, and especially for those just entering the field.”

In order to allay some of the myths surrounding typography on the web, this book has been structured as a walk through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. Practicality is ever present with workarounds, alternatives and compromises for less able browsers.


9. Integrating Accessibility Throughout Design


accessible design image

This e-book is a practical guide with advice on how to improve your websites, software, hardware, and consumer products, all with an eye on accessibility and avoiding future snags. Written by Shawn Henry, an outreach coordinator who promotes web accessibility for people with disabilities, it’s a straightforward and engaging resource.

The book covers the basics of improving accessibility in design projects with tips for comfortable interaction, having accessibility in a user-centered design process, examples of accessibility in user group profiles, personas, scenarios and much more.


10. Web Style Guide


webstyle guide image

An in-depth resource that offers information and instruction related to several areas of web development, including interface design, information architecture and usability.

The book explains established design principles and illustrates how they apply to projects whose primary concerns are information design and efficient search and navigation.

Beginner and advanced designers will find this to be one of the most practical guides available.


More Dev & Design Resources from Mashable:


12 Beginner Tutorials for Getting Started With Photoshop
40+ Web Design and Development Resources for Beginners
10 Free and Fun Twitter Bird Icons for your Website
11 Ways to Speed Up WordPress
10 Free Wireframing Tools for Designers

Image courtesy of iStockphoto, iamspartacus9

More About: accessibility, book, design, designers, developer, e-book, help, how to, List, Lists, resource, web design, Web Development

For more Dev & Design coverage:


agosto 18, 2010

20+ Beautiful and Inspirational Business Card designs

image

Business cards are one of the most popular personal marketing tools for anyone who is meeting a lot of people in a professional context, and it’s no wonder – they’re portable, affordable, versatile and people actually expect you to use them!  Yet more than 90% of business cards wind up in the trash the day they’re received.  What a waste!

Business card design is more than just the look of the card, although that’s important – it includes the text on the card as well.  And to get the most mileage from business cards, you should also design them with marketing in mind.

Long gone are the days when you simply handed over a white piece of paper with your name and contact info on it to potential clients. Nowadays, who do you think clients will call first, the guy with his name on a sheet of paper or this other one with her name engraved in this colorful plastic wonder?

In this collection we present more than 20 beautiful business card designs for inspiration, we hope they’ll give you some ideas and inspiration for your next design project!

 

1. Business Card Design Concept Render by Stephan Florquin

Business Card Design Concept Render by Stephan Florquin

2. Business card idea by mitch2004

Business card idea by mitch2004

3. Business Card Design by R3M1X3D

Business Card Design by R3M1X3D

4. .:Indus Tuesdays:. by MolefaceNZ

.:Indus Tuesdays:. by MolefaceNZ

5. Business Card Design by Popcorn Initiative

Business Card Design by Popcorn Initiative

6. E kwiat by RadASS

E kwiat by RadASS

7. Sorin Bechira and Adrian Labos

Sorin Bechira and Adrian Labos

8. Osram Invitation by mohamedsaleh

Osram Invitation by mohamedsaleh

9. Flisky do net business cards by flisk

Flisky do net business cards by flisk

10. Business Card Design by Hidden Creative

Business Card Design by Hidden Creative

11. Sketchbot biz card by Sketch guy

Sketchbot biz card by Sketch guy

12. acidGFX business cards by AC-1D

acidGFX business cards by AC-1D

13. .:xplicit business cards:. by 7UR

.:xplicit business cards:. by 7UR

14. business cards by kpucu

business cards by kpucu

15. Muymra business cards by loc0

Muymra business cards by loc0

16. Just Creative Design Business Card by Jacob Cass

Just Creative Design Business Card by Jacob Cass

17. Viewzi by SuperWindy

Viewzi by SuperWindy

18.ODD BUSINESS CARD VERSION 2 by MolefaceNZ

ODD BUSINESS CARD VERSION 2 by MolefaceNZ

19. akira business cards render by daan-rutgers

akira business cards render by daan-rutgers

20. Business Card Design by XTR Design

Business Card Design by XTR Design

21. pfd business cards v3 by crezo

pfd business cards v3 by crezo

22. Jason Woan

Jason Woan

Author : Roldan O. Roldan

Feed provided by tripwrire magazine, Visit this post here: Permalink

marzo 25, 2010

12 Great jQuery Plugins to Fully Control Styling of Your HTML Form Elements

12 Great jQuery Plugins to Fully Control Styling of Your HTML Form Elements

HTML Forms are essential for inviting visitors on a site to provide input, giving information about themselves, sharing opinions and so on. The information will on most cases be very valuable for the owner of the web site why making the forms more accessible and better drawing visitors attention is a key objective.  This post provides a list of jQuery plugins that makes it simple and allows you to cake full control of the look and feel of your HTML forms.

Uniform

Introducing Uniform, a plugin for jQuery that lets you style select, radio, and checkboxes however you desire.

jqueryforms

prettyCheckboxes

This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.

jqueryforms

How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

jqueryforms

Justify Elements Using jQuery and CSS – Tutorial

When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing the width of labels. But what if you don’t want to use tables and you want to align input elements according to the width of the longest label? This small jQuery tutorial shows you how.

jqueryforms

Highlight

Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify.

jqueryforms

Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

jqueryforms

jqTransform

This plugin is a jQuery styling plugin wich allows you to skin form elements.

javascript-frameworks

jquery.Combobox

An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.

jqueryforms

Make image buttons a part of input fields

If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.

Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.

jqueryforms

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

jqueryforms

mcDropdown

mcDropdown allow users to select from a complex hierarchical tree of options.

jquery-form-enhancements

Geogoer VChecks

Avery user friendly way to show checkboxes.

javascript-frameworks

Related posts:

  1. 30+ jQuery Plugins to Improve Usability and Look and Feel of HTML Forms Forms are essential for communication online and they are…
  2. 75+ Top jQuery Plugins to improve Your HTML Forms jQuery makes it easier and simpler to provide your…
  3. 10+ jQuery Form Enhancement Plugins Easy user interaction and data collection is really a…

Related posts brought to you by Yet Another Related Posts Plugin.

marzo 5, 2010

30 Design Blogs You Have to Subscribe To

We all have our favorite blogs that we visit every day, being from Informative Articles, Interviews, Resources, Tutorials and even Inspiration. I also have a list of Blogs that I favor to visit whenever they have posted new content. In this article I will be rounding up my List of 30 Blogs I think you have to Subscribe to and follow. If they aren’t already making a difference in the industry they will be very soon.

marzo 4, 2010

40 Exclusively Reviewed And Criticized Deviantart Designs

1-portfolio-v2-web-design-deviantart-inspirationI bet you all are a little bit tired of classic list posts so this time I really spent my time to bring some value into this inspirational article. I gathered here 40 really unique and trendy web designs from Deviantart, all of them are fresh, created in February, 2010. But this time instead of just listing them all, I did a step forward – I tried to analyze and criticize each design, point pros and cons you should give some more attention to. For me design never is complete, there is always space for improving, but it takes serious experience to notice those small mistakes.

If this idea will raise some discussion and attention I am sure I will make more comprehensive research so we all could improve ourselves actually in the meantime.  I am quite excited, how about you? Let’s get started!

You may take a look to our other Deviantart Inspiration based articles made in past as well:

1. World Comics magazine by RadziuPL

Interesting blog using brown, red and few more subtle tones. I like overall design, nice mouse over effects – to main navigation, to RSS button, but something seem a little bit strange to me. For example that bird in header and funny icon in “Comment/ Continue reading” section in post. While blog is created for world comics, I think all icons (RSS,newsletter,search icons) should be funny, logotype maybe too?

And yet again some good points – notice all polished buttons, sections, little embossing, glossing effects, which make design look really professional.

World-comics-web-design-deviantart-inspiration

2. Sense Design V1 by webdesigner1921

Design home page for germany web agency. Could turn out as amazing Flash page, great photomanipulation type website.

Sense--web-design-deviantart-inspiration

3. Sense Design V2 by webdesigner1921

Second version of Sense Design website – beautiful 3D effects just buy me to love this website! I don’t even dare to criticize here, fell in love with colors! Which is your favorite design?

Okay, if I need to tell something then I think white color is too bright in second screenshot. I understand on bright background it’s hard to put readable text, but this isn’t the best case. On text I would try slightly darker monochrome color as well as darker box behind the text. What about navigation?  Maybe something bright and big text could get attention to the right place as well?

Would love to hear your opinions, this is a really hard case.

Sense-portfolio-v2-web-design-deviantart-inspiration

4. Company Portfolio Web 2.0 by princepal

Interesting, yet clean and professional website design. I like especially header where featured slideshow is beautifully executed from original design point of view. Only I think company will definitely need to update their logo to fit it with this beautiful design.

Company-portfolio-web-design-deviantart-inspiration

5. MobileSoup by yehsper

Very fresh and trendy designs using just blue and black color variations throughout whole design. Close to simple perfection, though not aligned “Attention please” note confuses a little bit and footer should need more tweaking I think.

Mobile-soup-web-design-deviantart-inspiration

6. Designer portfolio by preet618

Site uses green as main bright color to get attention, black color is used just to define navigation and footer, but I don’t quite like black to white gradient in background of slideshow. Also logo looks quite good, but typeface used with it I think isn’t quite suitable.

I love this design, but it’s interesting to analyze and find some little points which could take this design to even higher level!

Designers-portfolio-web-design-deviantart-inspiration

7. Empati Tasarim by SencerBugrahan

This artist also has full gallery of amazing works – very dark website yet great for image based website. Notice also beautiful 3D effects, glossing and shining borders. I am confused only about background stripes – resembles web 2.0 type designs a little bit and footer lacks little white stripe which all other blocks have.

Empati-studio-web-design-deviantart-inspiration

8. WhitePress by SencerBugrahan

One more great design using only light, subtle colors. For me the most succesful seems header and left content area. I would love to have something similar on my own blog. From marketing point of view though I would like to have bigger RSS and Twitter buttons, also no one would buy sponsor ads if they would lie so far from “Above the fold”.

It’s very hard task to create successful blog design and yes, I see countless bad design executions in my own site as well.

White-press-blog-web-design-deviantart-inspiration

9. HeyU by yehsper

I wanted to bring attention to this design as well! Seems everything put so random, but in the same time here you will find great color and alignment hierarchy! Check out also cool looking left sidebar with nice embedded effects. I would only find some confusion in header, logo face seems to be too small and main branding item simply disappears in whole loud design!

Hey-you-web-design-deviantart-inspiration

10. TwoPulse by jk9o

Simply pointed – less is really more, perfect color harmony. I just love blurred contours at the back of logo and little innovative text on the main circle.

2pulse-web-design-deviantart-inspiration

11. LimoTaxi by VictoryDesign

No comments, simply amazed about interesting and unique design though while it looks good I am not sure if it will not hurt text readability and usability as whole.

Limo-taxi-web-design-deviantart-inspiration

12. Producer Portfolio Business by designresource

Wow, for this design I simply couldn’t find words to tell any critique. Beautiful accent in above the fold field (featured slideshow), light design, perfectly aligned and executed. I am watching and learning.

Producer-portfolio-business-web-design-deviantart-inspiration

13. AVG – SkyRide by AntoniaVG

“The site focuses on skydiving, hot air balloon rides, hang gliding, gliders, warbirds and biplanes.”

Designer tries to put really big amounts of information here and I think he did great job! Great inspiration where successfully are added several photographs in background. Only confusion for me is left top section “Welcome to 1800Skyride” – all other sections has it’s own boxes but here text is just lying in the air. I am not sure – maybe it’s good thing, welcome text got my attention, but main text is a little hard to read. Analyze this site design yourself, you’ll find many more beautifully executed small things.

Skyride-web-design-deviantart-inspiration

14. C.E. – Flash Layout by detrans

Interesting approach to hybrid/futuristic type of design. I am curious to see how this site will look live in Flash, notice all little points, glossing, gradients, shine.

Ce-flash-layout-web-design-deviantart-inspiration

15. Paper Portfolio by deadlinesdesign

No comments from my side is needed here – very unique and very well executed website design idea. Notice importance of well picked typeface, size and color as well, red color is used very well to get necessary accents – lovely.

By the way did I mention, designer is only 17 years old?

Paper-portfolio-web-design-deviantart-inspiration

16. Design Creator Blog by deadlinesdesign

Interesting blog execution. I just love light designs and this structure would be great for small blog, though if content amounts grow in future, there would be problems with categories and sidebar, where I would add more choices for visitors to click.

Design-creator-web-design-deviantart-inspiration

17. Box – Web Layout by detrans

Trendy design, very good colors for easy reading and interesting idea about boxes opening while navigating between different business plans.

Notice also unique “more” button and how navigation is emphasized with really subtle effects. I have one confusion though – why “Login” button on top right side isn’t in the dark field, but somewhere in the middle? Small point, but I am sure just inattention mistake. Interesting to find little points right?

Box-layout-web-design-deviantart-inspiration

18. Rigid Modeling by alighandour

Eye candy – modern colors and execution.

Rigid-modeling-web-design-deviantart-inspiration

19. Colormix by gdnz

Very unique website, everything is tied together literally! I don’t know for what purpose this website is created but could turn out great portfolio or css (or whatever) showcase site!

Colormix-blog-web-design-deviantart-inspiration

20. Oxymore by miko434

Maybe not one of the most user-friendly websites, but you cannot deny – definitely grabs attention! Exercise for yourself – what’s so special in this design, what makes it to look professional, not cheap? I think this is great solution for product based websites where you don’t need to deliver big amounts of information.

Oxymore-web-design-deviantart-inspiration

21. Watercolor Blog by deadlinesdesign

I just keep finding more hand-drawn type trendy webdesigns from this author! Great inspiration to look how you can create modern yet a little bit playful type of design. I don’t know why, but only thing I would like to fix in this design is that dark border around featured images in articles. From my point of view more brighter or exactly opposite – lighter color would suit there a lot better.

Notice beautiful watercolor header and cute RSS, Twitter icons.

Watercolor-blog-web-design-deviantart-inspiration

22. Design Development Firm by manujg

Professional, perfectly aligned website using subtle white and blue colors. Could turn out as great corporate website, by the way it is for sale.

Now, cons I am noticing is – I love that popular mac window, but description under “Mission Statement” is simply unreadable don’t you agree? I also don’t understand why “Twitter Feeds” section has icon, but all other ones have not? Design would look a lot better with icons on each category I guess.

Put your attention to header navigation, which is very interesting and eye catchy, phone icon also get good attention, exactly how it was intended.

Development-firm-web-design-deviantart-inspiration

23. Freedom Church by alivepixel

Just beautiful design – I was surprised there are so many colors used –  blue, orange,brown,white, green, even red, but it all together looks just outstanding! Here’s some impressive inspiration!

Freedom-church-web-design-deviantart-inspiration

24. New Portfolio by dustinstreeck

Very interesting retro type web design in the meantime looking very modern. I enjoy the use of subtle textures and monochromic colors – just plain black and white!

Dustin-streeck-web-design-deviantart-inspiration

25. VoiceKraft by pcholewa

Well executed design showing how to display huge amounts of information in good way. Impressive 3D effects work throughout whole design, only I think company now definitely needs a new logo design.

Voice-craft-web-design-deviantart-inspiration

26. Shop Layout by razr-designs

Extreme website, T-shirt shop design executed in really good way, I think it’s very relevant, colorful, in the meantime looking very harmonic and aligned. Logotype is great and those stitches throughout whole design are relevant to T-shirt (stitches in fabrics) and give design it’s uniqueness.

Get-your-stuff-web-design-deviantart-inspiration

27. inFocus WordPress by designresource

This website is very polished, I suggest to visit it as great inspiration. By the way this theme is on sale in Themeforest, where you can actually see live version of this website. Great work. Check out live demo on Themeforest.

Infocus-wordpress-blog-web-design-deviantart-inspiration

28. Beauty salon 2 by webdesigner1921

Very interesting design concept, great for product/image based websites. This one is for SPA salon.

Beauty-salon-web-design-deviantart-inspiration

29. Mood Template by badboythemer

Website for sale by the way and what I like in this template to so much is colors, logo approach (though typographic template one, but still nice) and placement. Interesting concept behind mood template – light grey at the header and pitch black at the footer.

I am not sure though about gradients in buttons, they seem to disappear and become blurred in design, and yes – concept is good, but for me that pitch black gradient seems to be too strong. White text on black background isn’t the favorite color scheme for eyes.

Mood-template-layout-web-design-deviantart-inspiration

30. Eshop Template by Honya

This design caught my attention with it’s unique and interesting top navigation. While website should require a lot of tweaking to work as real sale shop, color scheme and item placement is really great.

Eshop-template-web-design-deviantart-inspiration

31. New Grunge Portfolio by misht

Trendy and unique website design, I enjoy all the arrows to point and get smiling attention to necessary sections. While header, sidebar and content section are very polished at least for me footer looks too short, text in footer too big to be harmonic. Other than that – great design concept!

Grunge-portfolio-web-design-deviantart-inspiration

32. CompanionFinder.eu by luqa

Website design for company CompanionFinder – Adult friend finder. Girl definitely grabbed my attention, so header is purposely and well done I presume. Color selection is interesting and very harmonic and easy for eye to look at and read.  Polished site, my attention grabbers were header with girl, and then textures in background making look design transparent and professional.

Companion-finder-web-design-deviantart-inspiration

33. AIQOON by kaan-arts

As I mentioned several times before already, it’s really hard task to process huge amounts of information in user-friendly and harmonic way. One more great inspiration with good concept and well thought through small section placements.

Aiqoon-web-design-deviantart-inspiration

34. World Creative by mhmoodzaidan

Simply great eye-candy. No more comments needed here I presume.

World-creative-web-design-deviantart-inspiration

35. Blue Portfolio by ParadigmTradition

Interesting color contrasts – site is using just blue and monochromic colors to achieve everything. Definitely grabbed my attention as unique design.

Blue-portfolio-web-design-deviantart-inspiration

36. Mazikeen by QwibbleDesigns

Great corporate website design, actually for sale. Click to image to see it full view, many small details are nicely done there.

Mazikeen-magazine-web-design-deviantart-inspiration

37.Misz.com by misz000

Simply amazing, very clean and professional design here!

Misz-web-design-deviantart-inspiration

38. WordPress – IcePress Theme by detrans

Amazing water/ice type theme – I would love to see how this design would look as live blog! Very refreshing!

Wordpress-icepress-theme-web-design-deviantart-inspiration

39. 96 Artist Magazine by PanthereNoire92

Interesting magazine type theme, we all know how hard is to view a lot of information in transparent way. I am not sure about background though, other than that – simple and professional!

96-magazine-web-design-deviantart-inspiration

40. Artcase by alexdesigns

Beautiful choice of colors, AlexDesigns is very talented designer and this work doesn’t dissapoint as well! Eye candy and surprisingly I cannot find anything I don’t like in this design!

Artcase-web-design-deviantart-inspiration

This is my first time doing such research, review and critiques so you can be harsh too. Point out to my mistakes, you don’t agree with, add your opinion – I would love to hear it. Critiques for us, designers, is the best way how to improve, would love to hear your thoughts here.

I am even thinking making this advanced feature, analyzing some fresh, popular redesigns, pointing out tools and techniques how specific effects are created in design and maybe even create some fresh tutorials. Now is your time to talk, I did mine!

febrero 28, 2010

50 Awesome Animations made with CSS3

CSS3 has brought some amazing new features. And the most fun is playing with the CSS animation. Here is a compilation of 50 CSS3 animation that allows you to perform many motion-based functions normally Delegated to JavaScript. In order to view this effect, you are required to have WebKit browsers like Safari and Chrome ( very sorry for the users of Internet Explorer )

1. CSS3 Clock With jQuery

Use the basic features of the CSS3 Transform: rotate. And the combination of javascript frameworks like jQuery can produce a cool CSS3 clock

2. Analogue Clock

Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time.

3. 3D Cube That Rotates Using Arrow Keys

You can Use up, down, left and right keys to navigate the 3D cube. 3D cube built using -webkit-perspective, -webkit-transform and -webkit-transition.

4. Multiple 3D Cubes (Slide In/Out)

Multiple 3D Cubes using CSS3 and proprietary ‘transform’ and ‘transition’ properties. I thought it was amazing, you can see the writing on the 3D object.

5. CSS3 Accordion

An accordion effect using only CSS. Proprietary animation in WebKit based browsers.

6. Auto-Scrolling Parallax

Auto-Scrolling Paralax is an animated parallax effect using WebKit’s CSS transition property,Auto-Scrolling Paralax no need JavaScript

7. Isocube

Isocube is like 3DCube but have litle different. Isocube can load images on one side

8. Image Gallery

9. Matrix

The Matrix is one of the best sci-fi films of all time. CSS3 capable of making such an amazing animated film made

10. 7 Javascript-effect Alternatives Using CSS3

7 examples of alternatives to javascript effect by using CSS3. Various effects such as Fade Block, Block Pulsate, Nudge, Expand Block, Block Bounce, Spin Block and Accordion

11. Image Hover Effects

Image Hover Effects is an example of using CSS to replace the javascript. The image will shrink when you put your mouse pointer on top of it.

12. Turning Coke Can (Control With Scrollbar)

13. 3D Meninas

14. Polaroid Gallery

Polaroid Gallery is animated pile of photographs utilizing a ton of new CSS3 commands. It’s interesting when your mouse cursor is above the image, the image will enlarge

15. Space

16. Mac Dock

This list of links as the basis and change into an OS X icon dock of amazing.

17. Drop-In Modals

With CSS3 effects and property Drop In Modals can help you make quick, animation, a simple change to using modals, and some subtle design cues.

18. Sliding Vinyl

Vinyl effect can be created by using CSS3 transition and a little HTML. This can make a standard album cover to have an interesting style

19. Zooming Polaroids

Polaroid is a picture that is in the box and spun like a pile of random photos that are sorting through CSS3 techniques. The text that comprises only extract the title and alt attribute

20. Animated Rocket

The principle of Animatid Roket is CSSEffect. The transformation changed the appearance of an element in the browser, moving, rotating, or other means. In determining the conversion of styles before making the application to happen so that you can not really animation.

21. Poster Circle

Poster Circle. is an animated spin column consists of a row of colored boxes and text are wonderful. The overall effect is crazy cool and undeniably dizzying

22. Morphing Cubes

Morphing Cubes will shows some of the more interesting content using 3D transformations, animations and transitions. Note that you can still select text in the element, even if the rotation. Converting elements are fully interactive.

23. Animated Polaroid Gallery

This is the example of other Polaroid Gallery. Piles of images at random and when the cursor hovers over an image, selected images will be enlarged

24. Spotlight Cast Shadow

When the cursor moves as if like a lamp spotlight leading up to the writing and cast

25. Colorful Clock

Colorful Clock is a colorful jQuery & CSS3 which will help you keep track of those precious last seconds of the year.

26. Lightbox Gallery

Lightbox Gallery is an awesome image gallery which leverages the latest CSS3 and jQuery techniques.Lightbox Gallery using jQuery, jQuery UI (for the drag and drop) and the fancybox jQuery plugin for the lightbox display in addition to PHP and CSS for interactivity and styling.

27. Elastic Thumbnail Menu

Elastic Thumbnail Menu is an alternative method for smoothing the menu, in particular by increasing the menu items when the mouse is hovering over the menu. And then expand to the top menu

28. Coverflow

This animation Apple style that combines CSS transformation and jqueryUI. This one truly animate between two half states, making a slider like iTunes

29. jQuery DJ Hero

DJ Hero This is one of the interesting combination of CSS3 with jquery. On-screen controls you can control the pace or just take enough to record your mouse

30. Dynamic Stacking Cards

inn is a dynamic stack of index cards that simply using HTML and CSS3 features such as change and transition (for the dynamic effects) and the @ font-face, box-shadow and border-radius (for styling).

31. Another Image Gallery

This is an example of another image gallery that uses CSS3 transforms property and property transitions.

32. Snow Stack (Control With Arrow Keys)

33. Animated Pricing Column

CSS3 animation can also be used in the package list price of a product. Animated Column Pricing can be applied properly there

34. Slick jQuery Menu

Slick Jquery Menu achieved through a combination of CSS3 and JQuery menu below is very elegant and shows some great use of Jquery and CSS3. This is just one of those crazy concepts that the test can be used in CSS3 will be true of the standard Web.

35. CSS Tabs Without Javascript

36. Tab Menus Without Javascript

37. SVG Fisheye Menu

CSS animation can animate almost any property on the item and do funny things, such as rotation and tilt. As proof,will created quick and dirty CSS3 Fisheye / Dock demo. Used as an added bonus, the demo-SVG in the tag IMG.

38. Falling Leaves

Like autumn. Animated falling leaves are made using CSS3

39. Rotating Gallery

Image Gallery Rotaitng build with CSS transform transition and CSS features. To see the effects of rotation, click the small image

40. Dropdown Menu

Dropdown Menu is a very nice navigation menu by using CSS3 transition property. CSS transitions are very strong influence to renounce the use of JavaScript for many common side effects.

41. Star Wars Crawl

Star Wars opening crawl, using only HTML & CSS. It only works in Snow Leopard in Safari 4.0.4 and the WebKit nightly.

42. Sticky Notes

43. Snowflakes

44. Another Fisheye

This is another fisheye that using CSS3

45. Frame-by-Frame Animation

The first demonstration reqires you to keep clicking the image to see the next frame, and it wraps around to the start when you reach the last frame.The second demonstration just needs you to keep the mouse moving over the image in MOST browsers. But the BIG drawback to this method is that the speed of movement of the mouse governs the speed of animation

46. AT-AT Walker

AT-AT Walker is not flash but only CSS3. That amazing !

47. Another Accordion

48. Dynamic Presentation Without Flash

49. Smoothie Slider Menu

50. Spinner

This is basically like an ajax/loader spinner except its not a animated gif. It uses CSS3 to make it spin.

febrero 10, 2010

14 Fantastic Free WordPress Themes

 

Whether you’re a web developer whose clients need a great look and feel for their blogs, or just someone eager to bring a fresh new look to your own web site, there are literally hundreds if not thousands of free WordPress themes out there to consider. A number of those themes have been built by professional designers and talented amateurs, and are as easy on the eyes as they are easy on the wallet.

Whether you need a great photoblog layout, personal lifestream, or more business-oriented design, there’s almost surely an existing theme out there worth checking out for your next blog or blog upgrade. And if you’re already a developer or are willing to acquire a small set of template editing skills, you can always modify an existing theme to taste.

Have a look at some of our picks for great themes to either drop in as is or use as a starting point for your own tweaking and twiddling. Keep in mind this is only the tip of the iceberg — be sure to let us know about your other favorite themes in the comments!


1. Irresistible



For a unique personal blog look and feel, check out the free Irresistible theme from the folks at Woo Themes. It features dedicated spots for your photos, videos, and events lifestream along with your typical blog content. Featuring a nice, clean layout, this theme offers something a bit different from your typical 3-column blog design.


2. Demet



For a more magazine-style theme, check out the free premium Demet theme. This 3-column layout is fixed width and banner-ready for 125×125 and 468×60 pixel ad units.


3. P2



The P2 theme was inspired by Twitter, and was designed around allowing a group of bloggers to post short updates. It’s a great option for a cohesive group blog as well as for sites that do frequent liveblogging. Featuring dynamic page updates, threaded comment display, live tag suggestion, real-time notifications, and in-line editing for posts and comments, P2 is a powerhouse for blogs where real-time updates are critical.


4. WPESP Portfolio



WPESP Portfolio is a minimalist theme designed primarily for artists, photographers, designers, and others who need more of a portfolio showcase for their work. It combines the benefits of easy and frequent updates with the layout and user interface conducive to browsing visual works.


5. DarkHive



For an alternative magazine-esque style in two columns, have a look at DarkHive from the folks at MagPress. It sports a featured content slider for up front promotion of hot stories, auto-generated thumbnails for front page display, an Adsense ready loop between posts and on individual post pages, a 125×125-ready block in the sidebar and more.


6. Google Chrome



Here’s an interesting lightweight theme great for a geek-oriented blog, or a site that just wants a nice and clean two column look and feel. Inspired by the browser of the same name, Google Chrome is widget and gravatar ready plus XHTML and CSS validated.


7. Gallery



The showcase-style WordPress theme Gallery is built on the Thematic framework and was designed specifically for Smashing Magazine readers. Another great theme for a portfolio or other visual showcase, Gallery is a highly flexible and customizable theme that supports widescreen video embedding with the installation of a free plug-in.


8. Selecta



Another very visually-oriented theme, Selecta is great for videoblogs or other sites where video needs to be prominent. With a featured post slider carousel up top to promote your best content, threaded comments, and interest jQuery effects on board, Selecta also comes with six different color schemes to choose from.


9. BlackPower



A widget ready theme from the folks at SkinPress, the BlackPower theme features prominent Twitter integration, with your latest tweet appearing in the header. The two column theme also features easy on the eyes typography and a pastel color scheme with black wood effect on a translucent background.


10. Scarlett



The Scarlett theme features another great featured content carousel area up top and a real-time scrolling update area in the right-hand sidebar. It also includes a built-in javascript navigation menu, Adsense ready units, threaded comments display and more.


11. Freemium



The Freemium theme is a slickly-designed “premium” theme being given away for free thanks to the folks at FreebiesDock. Featuring two widget ready sidebars, a jQuery-based menu, 125×125 ad ready area and more, Freemium is a compelling design at a great “price.”


12. iBusiness



A great theme or starting point for a more professional business presence, iBusiness is a modern theme designed to showcase the About section right up front with a prominent image and company blurb or motto. This two column layout is widget ready, SEO optimized and 125×125 banner ready.


13. Meganews



Another great option for a magazine or news site, Meganews features a clean story-lead display in four columns plus a right-hand sidebar. It also supports an animated tag cloud and featured content slideshow.


14. Snapshot



A great theme for shutterbugs and photoblogs, Snapshot from Woo Themes can also be put to use as a portfolio or design gallery. It also comes with three unique color schemes to choose from as well as options for switching between photoblog and portfolio use.


Series supported by Rackspace


rackspace

Rackspace is the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.


More WordPress Resources from Mashable:


-10 WordPress Plugins to Help Build Community
- HOW TO: Build a More Beautiful Blog
- Top 10 WordPress Plugins to Promote Your Social Media Profiles
- Top 10 Tips for WordPress Plugin Developers
- Embeddable Waves: The Google Wave WordPress Plugin


Reviews: Google Chrome, Twitter, WordPress

Tags: blogging, BLOGS, design, free, Lists, Web Development, web development series, WordPress, wordpress themes

noviembre 9, 2009

Best of the web – week #46

Design

Development

Blogging

Freelance

noviembre 3, 2009

Creating a Clean and Elegant Blog Design with Photoshop, Part 3

web-design-tutorial

This post pick up on the previous two parts of a very detailed tutorial for “Creating a Clean and Elegant Blog Design with Photoshop, Part 1 + 2“. This is part3 and it will be covering last steps required to finish the design by adding the Side Bar and Footer Sections. We pick up just where part 2 ended and the result of part 3 and final Blog Design will be looking like this:

Download full size here.

web-design-tutorial

This tutorial now consists of:

Download the source file

Make sure you get a copy of the PDS source file before you start working on the tutorial. License: Creative Commons License.

Lets get started…

Step 16: First thing you need to do is to load up the PSD you created in part 2 or get the one available for download above. We need more space in the bottom for the Footer Section and will start with adding this. Use Canvas Size tool in the Image menu to add 160px like this. Make sure the Anchor is selected as shown to add space at the bottom.

web-design-tutorial

Then locate content layer in Group “PART 1 – content background” and select the filled area. Use Transform Tool [Ctrl]+T to do this or simply select everything with [Ctrl]+A and fill the entire area with the color #797979. Then add a guide at 1250px from the top and use Transform Tool to make white fill in layers “Sidebar back” and  “Content list back” in group “BACKGROUND CONTENT AREAS” end at this new guide like this.

web-design-tutorial

Step 17: Add a guide at 1270px from the top where the Footer Section will start. Add a Group called PART 3 above PART 2. In PART 3 add first a Group called FOOTER CONTENT and one called SIDEBAR CONTENT. In FOOTER CONTENT add a layer and call it “footer-background”. Select the area from the bottom up to the guide just added and fill it with white. Then add drop shadow using the Layer style window with setting used earlier.One thing that can make using Photoshop faster and more flexible is Styles and if you create new styles when you know the current settings will be reused it will be even better. The drop shadow have been used several times and could be a candidate for this – so lets try it.

web-design-tutorial

You can always go back and save a set of styles you created earlier if you want to reuse them. We are going to do just that. Find the layer called header created in Part 1. We want to create a new style for the gradient used earlier and apply it to the Footer.Call the style header-footer-gradient. After saving the new style you can apply it to footer-background layer by opening the Layer style window, clicking on Styles and clicking on the style you just created.

web-design-tutorial

Step 18: In this step you will add a bit of decoration to the Footer. Make a copy of the LOGO Group from Part 1 and move it to Group FOOTER CONTENT. Then drag it to the right location in the footer and scale it down in size using the Transform Tool. Then add copyright text and if you like a backlink to WordPress and your favorite hosting provider.

web-design-tutorial

You should now have this partial result.

web-design-tutorial

Step 19: Different bloggers tend to like different widgets in the sidebar. You may put whatever you like in it of cause and because it is such a flexible area of a blog I will just add a few examples of what could fit well. Just using screenshots of the well know google custom search and the Advertise Here signs I have material for the top part of the sidebar.

web-design-tutorial

Since we have no categories in the top menu it would make sense to have a widget listing Blog Content Categories. What you do to create the layout shown below is simply creating layers for the white and grey boxes. Fill them with the color you want and apply a layer style 1px stroke. Colors used here are:  Stroke: #bebebe, background #eeeeee. The boxes should be 50px and 25px in height. The space on both sides of the boxes is 20px. Add one px space between the boxes.

web-design-tutorial

Use the same steps to create a popular posts widget like this. The small images are 40×40px.

web-design-tutorial

Step 20: To make the design consistent I decided to use the same box type to separate the articles created in Part 2. It looks like this. I had to move the articles a bit to make it fit but it was easy because moving elements in a group can be done by selecting the group.

web-design-tutorial

This is the last step in this  Photoshop Blog Design Tutorial. I plan to continue this tutorial and implement the design as a WordPress Theme later on so stay tuned.

The Final Result

Download full size here.

web-design-tutorial

Post tags: , , , , ,