Best of Brazilian Web Design

by Cerebro 30. April 2010 05:56

Beautiful women, gorgeous beaches and dreamed of vacations aside – Brazil has become a strong element inside the web design company realm. Both freelancers and collectives alike are pumping out colorful and eye-catching web design work. Here is a list, in no particular order, of some freelance web designers and web design companies we like.

Enio Souza
http://www.eniosouza.com.br/internet.htm
Enios Souza’s design studio works in a broad spectrum of areas, from branding to illustration and interactive design.


Modena
http://www.modenadesign.com.br/portfolio/web_design
Modena’s skill set includes corporate, editorial, promotion and web design. Its simple yet effective projects seem to be crowd pleasers.


Arthur Henrique
http://www.arthurhenrique.com/portfolio/
Arthur Henrique has been working for the past 10 years in web design and his portfolio showcases proof of those years of great and hard creative labor.


Diego Mello
http://www.diegomello.com/
Diego Mello’s mouth-watering designs definitely should inspire us to use more color and textures.


Rafael Paiva
http://www.rafaelpaiva.com.br/
Twenty-three old Rafael Paiva struts his web design stuff in his neatly organized portfolio. His work is clean, precise and well balanced.


Vinicius Mattos
http://www.viniciusmattos.com.br/
Vinicius Mattos brings out a fun and simple side to web design…the way it should be!


Daniel Groove
http://www.grooverama.com/
Daniel Groove pays justice to his name, and grooves alongside his clever and unique design world. He’s an art director and graphic designer working in print and interactive media.


Colletivo
http://www.colletivo.com
As the name implies, this collective is as diverse as the clients and media it works with. A wild concoction of drawing, photography, animation, web design with companies like Pepsi, MTV, Nickelodeon, Adidas…the list goes on!


Nitrocorpz
http://www.nitrocorpz.com
This cutting edge design studio has been running since 2003. It’s wide range of eye-popping and colorful creations have graced the likes of MTV Brasil, Computer Arts Magazine, and the Austin Museum of Digital Arts, among countless others.


Alfaiataria Digital
http://www.digitaltailoring.com/
The concept of Alfaiataria Digital is to treat each client as a “tailor-made” project. They work it old school and really have a keen and sharp design eye for detail.


Klaus Silveira
http://www.klaussilveira.com/
Klaus Silveira does some pretty serious stuff with XHTML, CSS, and Javascript. He’s been freelancing since he was a teenager and is his passion for his art shows through his work.


Marcio Toledo
http://www.marciotoledo.com/
Marcio Toledo is an art director, web designer, interface and graphic designer all rolled up into one. His portfolio showcases works and projects that he has been doing since 2003.

Tags:

10 artists and designers to keep an eye on

by Cerebro 29. April 2010 20:33

Designer and artist portfolios are constantly inundating the net, so it’s a bit tedious at times to pick out worthwhile bodies of works from the masses. Here’s a list of recent web designers, graphic designers, illustrators, and artists that have caught our eye. Prepare to be inspired.

J. Chris Schwartz
http://www.jchrisschwartz.com/
This Philadelphia designer balances an elegant portfolio of design, interactive and illustration pieces.


Ryan de Haaff
http://www.ryandehaaff.co.uk/
Ryan de Haaff’s hyperrealist mix of illustrations and sketches bring a fresh approach to everyday things.


Derek Ring
http://derekring.blogspot.com/
Derek Ring struts his mad illustration skills. His keen sense of humor adds a special punch to his work.


Nate Maldonado
http://www.natemaldonado.com/
Nate Maldonado really brings out the fun side of illustration – what it really should be! His “kid-friendly graphics” inspire adults, young and old. His spiffy crew of imaginary characters ranges from a pirate sporting some silly putty to mom and kid cartoon for a Crayola finger-paint packaging box.


Tim Cooper
http://www.behance.net/timcooper3D
Tim Cooper’s 3D photo-realistic works really stand out from the crowd. Check out the 3D model and 3D render for Montblanc and the 3D whisky glasses. Unreal!


XIAOBAOSG
http://mi50.blogspot.com/
This self-proclaimed “kidult” showcases a beautiful collection of Chinese and Japanese inspired artworks. He’s able to bring a new and fresh twist to pandas. That’s pretty rad.


Art:tech
www.eightyfourcube.com/artistechnology
Najib, a.k.a. Art:tech, a self-taught artist, designer and photographer from Kuala Lumpur, Malaysia has a retro-futuristic view of the world, cleverly transmitted through his work. Absolutely stunning!


George Asparuhov Stoyanov
http://www.nioon.com/
Bulgarian graphic designer George Asparuhov Stoyanov has worked for a wide range of international companies. His site showcases a tight body of work.


Kurt Huggins and Zelda Devon
http://www.teeteringbulb.com
Dynamic duo Kurt and Zelda share their art and lives together, constantly creating beautiful works and snagging drool-worthy clients such as Godiva Chocolatier, Dover Publishing and Scholastic, among others.


Giulio Iurissevich
http://www.giulio-iurissevich.com/
This Italian fashion illustrator has a darkly humored and chic body of work.

Tags:

build a car website

by cerebro 29. April 2010 03:48

esign and build a car website

 

After many months –seems like years, now- of hard an intensive work www.pscars.com is finally live.  It’s only the BETA version but at least we are live.  Sure, there are bugs that need to be fixed but a project of such immensity required to go live just to have more eyeballs to help sort out the multiple errors and keep the client from constantly changing his mind.  Most common of all, data base inconsistencies presented when trying to match up the mapping tools provided by Chrome services and Evox images.  As a result multiple car images appear as non available in the “Car Configurator” but hey, we still have more than 200,000 images to help any visitor make a car buying decision.

So what is Pscars from a car web design standpoint of view?

Basically it is a homepage, of which we did more than 65 versions pixel by pixel and more coming up.  Forty or more “flash” pages where we portray every single available car brand in the USA, from a Ferrari to a Toyota and even a Smart car.  All done manually car by car….phew talk about a lot of work.  And then every single showroom connects to a bigger piece called the “Car configurator”, which in essence is a RIA done in FLEX + Net that allows a user in a very visual manner to research, build and compare almost any available vehicle sold in the USA since 2001 to 2011. 

 

Here are a couple of screen shots of how the project has evolved from simple wireframes to quick mockups.

 

 

Tags:

Wireframing and Prototype Basics and Resources

by Cerebro 25. April 2010 01:54

Wireframing is an often forgotten concept that is essential to the creation, planning and analysis of websites as well as applications, documents, graphic design pieces, architectural designs, software and storyboards. Wireframing applies to any activity that involves a creative process that will determine a final product or response of any kind.
We will be focusing on discussing wireframing in terms of website design mostly.

So what do we mean by a wireframe for a website? It’s simply a proposal of a graphic-free layout for the website. The order and continuity of the fundamental elements of the interface are laid out before any web design or artwork is completed.

An example of a website wireframe. Graphic from www.totheweb.com

An example of a sketched wireframe. From Paper prototyping: the fast and easy way to design and refine user interfaces by Carolyn Snyder

This allows a clear and distinct connection to be made between the web designers and web engineers. Foreseeable problems can be sorted out in possible trouble spots, and the navigation flow is determined by the usability and relationship within the elements themselves. This process is not easy and requires a lot of detailed attention and thought. Your project’s success relies heavily on the amount of effort put into it during this initial yet crucial stage.

There are various tools available for wireframing. The most rudimentary method, called Lo-fi prototyping, is paper prototyping, which began in the mid 80s and gained popularity in the mid 90s when IBM, Honeywell and Microsoft implemented these methods in their product design process.

Lo-fi wireframing programs: Visio, Balsamiq, InDesign, Illustrator, Photoshop, and OmniGraffle.

Hi-fi wireframing programs: Axure, ProtoShare, Justinmind, and Irise.

You can use HTML/CSS Wireframing, Wireframing Software or simple sketching. It really depends on the level of complexity you need for your project to achieve.

Wireframing and Prototype PDF Downloads and Templates:

The Information Architecture Institute
http://iainstitute.org/tools/
This project attempts to disseminate new IA tools for the community to share. It includes fluidIA, Shades of Gray: Wireframes as Thinking Device, Content Value Analysis (CVA), Content Inventory/Site Map Tool, Task Analysis Grid, Site Map Templates, Omnigraffle Stencils, etc.


Designer Toolbox: Sitemap and Wireframe Templates
http://www.designerstoolbox.com/products/forms/100129/
Available for 15 bucks, this complete includes tested templates that will allow you to create client ready professional website wireframes.

User Goals: HTML Wireframe Templates
http://www.usergoals.com/wireframes/html_templates/index.html
These free templates available in two dimensions, 800 pixels and 1024 pixels wide, give you a good set of options for your layouts. Their website also features wireframes for invoicing, mobile, magazine, simple layouts, and intranet.

Yahoo! Design Stencil Kit version 1.0
http://developer.yahoo.com/ypatterns/about/stencils/
Available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG). Content includes Ad Units, Calendars, Carousels, Charts and Tables, UI Controls, Form Elements, Grids, Menus and Buttons, Mobile – General and iPhone, Navigation and Pagination, OS Elements, Placeholder Text, Screen Resolutions, Tabs, Windows and Containers.

Eightshapes Unify
http://unify.eightshapes.com/users-guide/what-you-get/wireframe-templates/
Sign up and you’ll get a download link by email.

OmniGraffle Wireframe Stencils
http://konigi.com/tools/omnigraffle-wireframe-stencils
This set of lo-fi templates for OmniGraffle offers a complete range of basic elements needed to create interface specifications.


Nokia S60 Wireframing Stencils
http://www.forum.nokia.com/info/sw.nokia.com/id/cfc7b6a4-2dc5-4c91-88a5-c35764fff8fe/S60_Wireframing_Stencils.html

Janko at Warp Speed: Free Sketching and Wireframing Kit
http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
This great kit contaitns the following things: form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

Wireframing and Prototype Links:

Paper Prototyping
http://www.paperprototyping.com/

Wireframes Magazine
http://wireframes.linowski.ca/

ToTheWeb - Wireframe Sample
http://totheweb.com/learning_center/website-wire-frame.html

W3Avenue – Guidelines, Tools and Resources for Web Wireframing

http://www.w3avenue.com/2010/02/03/guidelines-tools-and-resources-for-web-wireframing/

I <3 Wireframes Flickr Pool
http://www.flickr.com/groups/ilovewireframes/pool

Anthony Armendariz
http://anthonyarmendariz.carbonmade.com/


Wireframing and Prototype Books:

Paper prototyping: the fast and easy way to design and refine user interfaces by Carolyn Snyder
http://www.amazon.com/Paper-Prototyping-Interfaces-Interactive-Technologies/dp/1558608702/ref=sr_1_3?ie=UTF8&s=books&qid=1272143161&sr=1-3

Communicating Design: Developing Web Site Documentation for Design and Planning
http://www.amazon.com/Communicating-Design-Developing-Documentation-Planning/dp/0321392353/ref=sr_1_1?ie=UTF8&s=books&qid=1272142040&sr=8-1

Prototyping: A Practitioner's Guide by Todd Zaki Warfel
http://www.amazon.com/Prototyping-Practitioners-Todd-Zaki-Warfel/dp/1933820217/ref=sr_1_1?ie=UTF8&s=books&qid=1272142096&sr=1-1

Dynamic Prototyping with SketchFlow in Expression Blend: Sketch Your Ideas...And Bring Them to Life
by Chris Bernard and Sara Summers
http://www.amazon.com/Dynamic-Prototyping-SketchFlow-Expression-Ideas/dp/0789742799/ref=sr_1_3?ie=UTF8&s=books&qid=1272142096&sr=1-3

Effective Prototyping for Software Makers (Interactive Technologies) by Jonathan Arnowitz, Michael Arent , and Nevin Berger.
http://www.amazon.com/Effective-Prototyping-Software-Interactive-Technologies/dp/0120885689/ref=sr_1_4?ie=UTF8&s=books&qid=1272142191&sr=1-4

User-Centered Design Stories: Real-World UCD Case Studies (Interactive Technologies) by Carol Righi and Janice James.
http://www.amazon.com/User-Centered-Design-Stories-Interactive-Technologies/dp/0123706084/ref=sr_1_6?ie=UTF8&s=books&qid=1272142191&sr=1-6

Information Design Workbook: Graphic approaches, solutions, and inspiration + 30 case studies
http://www.amazon.com/Information-Design-Workbook-approaches-inspiration/dp/1592536271/ref=sr_1_3?ie=UTF8&s=books&qid=1272142191&sr=1-3

Tags:

SEO Mistakes

by Cerebro 19. April 2010 18:01

SEO has become a delicate issue for clients and web developers. As a client, you want to be 100% assured that all methods and processes undertaken to improve and/or create your website’s SEO are correct and don’t harm it in any way.

Regardless of whether you hire somebody locally or overseas, there are a couple of points that you should understand prior to acquiring these types of services.

1. Forgetting about keywords

Finding the correct and suitable keywords for your website can sometimes benefit from trial-and-error. Make a conscious list of the words that truly describe your site and/or business.

The more generic a word list is, the harder it will be for your site to start showing up on the search engine results. For example, if you own a restaurant and just place “restaurant” as your main keyword, you’re going to see search results from restaurants all over the country and world.

If your restaurant is specifically about seafood in the South Florida area, try using “seafood”, “South Florida”, “Miami”, restaurant. These keywords shouldn’t just go inside the META tags.

Having them flow in between your site content is what makes the material relevant and accessible to both users and search engines. Also, don’t over do it by adding dozens of keywords. Stick to the essence of what you are trying for people to find online.

2. Hiring an SEO company that promises you #1 ranking

Google says it, and we believe them. In their own words “Beware of SEOs that claim to guarantee rankings, allege a "special relationship" with Google, or advertise a "priority submit" to Google. There is no priority submit for Google.”.

Beware of SEO companies that use spam methods to get your content indexed on the web. Do plenty of research and ask for references, they will be provided to you.

3. Designing only Flash websites
Granted, Flash websites looked ultra-cool back in the day! But with all the more SEO friendly, dynamic, lighter and more powerful technologies available right now (such as jQuery), what’s the point of not moving forward?

Search engine spiders can’t read Flash content. If you insist on treading on with Flash for your website design, at least make have an html version of the site available for search engines to crawl.

4. Using images instead of text for headings
Headings (which rest between the <h> tags) give the main idea for each page or section, usually in title form, and not allowing them to be found by search engine can become a very limiting factor for SEO. Whenever you are using images inside the site remember to use ALT tags with your keywords. This way the user will be able a short description of what the image really is, in case loading time is slow.

5. Ignoring site structure
This is perhaps one of the most often ignored aspects of website design. Before even thinking about what the design is going to look like and what cool downloads the site is going to have, you need to have a solid and clear navigation structure for your content.
Defining a site structure very important step will benefit you in endless ways. Users will find content quickly, your site material will be thoughtfully organized, navigation will make sense, the aesthetics will be easily created on top of this skeleton, and SEO will have many more chances of being very successful.

Tags:

50 Designers and Design Companies to Follow on Twitter

by Cerebro 14. April 2010 03:18

Twitter has allowed both independent web designers and web design companies to share information, work, and has given everybody a chance within the design community to interact despite distances. The way Twitter works is fast paced, so it’s ideal to review link and any relevant information provided by your contacts as soon as possible. We’ve rounded up 50 of the most interesting, most updated, and useful Twitter accounts from designers (graphic design, web design, industrial design, web programming and web development, photography) around the world. Please feel free to add your link in the comments, this way our list will keep on growing.


1. Xtom (Kildare, Ireland)
http://twitter.com/xtom

2. Richard Stelmach
http://twitter.com/richardstelmach

3. Bono Calacal (Philippines)
http://twitter.com/ninjacrunch

4. Design Milk
http://twitter.com/designmilk

5. BLTD
http://twitter.com/bltd

6. Costas Voyatzis (Athens, Greece)
http://twitter.com/Yatzer

7. Vitra (Birsfelden, Switzerland)
http://twitter.com/vitra

8. NoBlanco (Medellin, Colombia)
http://twitter.com/noblanco

9. Invisible Creature (Seattle)
http://twitter.com/icreature

10. Design Informer (USA)
http://twitter.com/designinformer

11. Grace Smith (Northern Ireland)
https://twitter.com/gracesmith

12. Carol Rivello (Florianópolis, Brazil)
http://twitter.com/carolrivello/

13. Glyphish (NYC, USA)
https://twitter.com/glyphish

14. Lily McGraw (North Vancouver, BC, Canada)
https://twitter.com/lmcgraw

15. AEXT.NET Magazine (San Antonio, TX)
https://twitter.com/AEXTnet

16. Red Ice Designs (Alexandria, VA)
https://twitter.com/redicedesigns

17. MiniAjax
https://twitter.com/miniajax

18. Web Design News
https://twitter.com/webdesign_news

19. Desizn Tech (New York)
https://twitter.com/DesiznTech

20. Tegan Le Page (Griffith, NSW Australia)
https://twitter.com/teganlepage

21. Web Developer Juice
https://twitter.com/wdjuice

22. Scott Kelby
http://twitter.com/Scottkelby

23. Donnie Bell Design (Louisiana)
http://twitter.com/dbelldesign

24. Typedia
http://twitter.com/typedia

25. Garcya
http://twitter.com/Garcya

26. Web Design Magazine
http://twitter.com/WebDesignMagz

27. Skivvi (Sydney, Australia)
http://twitter.com/skivvi

28. Mike Rundle (Raleigh, NC)
https://twitter.com/flyosity

29. Creative Web Design (Marbella, Spain)
http://twitter.com/creativewebs

30. flycreative (Brighton, Engerlannnd!)
http://twitter.com/flycreative

31. Hannush Web Design (Greenville, SC)
http://twitter.com/hannush

32. Turbonacho (Miami, Florida)
http://twitter.com/turbonacho

33. 99% (New York, NY)
http://twitter.com/the99percent

34. Standardistas (Belfast)
https://twitter.com/standardistas

35. @font-face (UK)
https://twitter.com/font_face_com

36. Industrial Design
https://twitter.com/Ind_Des

37. Reza Tehranian (Montreal, Canada)
https://twitter.com/rtdesign

38. Design Public (SF + NYC)
https://twitter.com/designpublic

39. Design Week (London)
https://twitter.com/Design_Week

40. CSS Beauty (Washington, DC)
https://twitter.com/cssbeauty

41. jQuery HowTo
https://twitter.com/jQueryHowto

42. I love webdesign
https://twitter.com/webdesignlove

43. Design Directory (New York)
https://twitter.com/designdirectory

44. Alison Ciarleglio (NYC & Europe)
https://twitter.com/APC_studio

45. Catalina Estrada (Barcelona)
https://twitter.com/catalinaestrada

46. Computer Arts (Bath, UK)
https://twitter.com/ComputerArts

47. LogoDesignLove (Edinburgh, Scotland)
https://twitter.com/LogoDesignLove

48. SethHorn (Morristown, TN)
https://twitter.com/SethHorn

49. Smashing Magazine (Freiburg, Germany)
https://twitter.com/smashingmag

50. Antonio Lupetti (Italy)
http://twitter.com/Woork

Tags:

Top Stock Photography Sites

by Cerebro 7. April 2010 02:53

Stock Photography websites have become a much sought-after source for people in many industries, not just in the graphic and design fields. For those of us working in the web design field, it’s super important to have fast and inexpensive access to stock imagery on the web. It’s a convenient option for imagery that costs less than hiring a photographer for a specific shot or idea. Most of them have now expanded their media options and have included illustrations, flash, video and audio as part of their collection. Here is our compiled list of high quality stock royalty-free photography sites that won’t break your budget. Enjoy!

GlowImages
www.glowimages.com
A wonderful and complete selection of high quality photographs and images. Glow Images features an ethnic and multicultural gallery, making graphic and web design projects a breeze for users around the globe.

iStockphoto
www.istockphoto.com
One of the biggest stock photography sites around, offering inexpensive rates starting at $1 up to $24 per image. Photos are submitted by photographers worldwide and are updated daily.


Stock.xchng
www.sxc.hu
Owned by Getty Images, Stock.XCHNG is an excellent FREE resource for photography. Won't cost you a dime! There are over 350,000 stock photos from around 30,000 photographers.


Veer
www.veer.com
Veer offers affordable creative stock photography, as well as illustrations and typefaces (fonts). What’s different about this website is the fact that the material offered is edgier and more creative than the rest. A good option if you want to add some snazzy photos to your web design.


Fotolia
www.fotolia.com
Fotolia’s photo and illustration count goes over 7.8 million! Downloading hi-res images is easy and cheap! Subscriptions are available, offering images from 14 cents.


BigStock
www.bigstockphoto.com
This Californian stock photography site has grown into one of the most complete and affordable places to purchase images. Owned by ShutterStock, it offers great content and a nicely designed website too.

Tags: