I come with a new “tip” for business owners that interract with the public and have a ‘complaint notebook’. Personally, if i were a business owner I would consider this very much as it’s a very important aspect in making things better. Why?
If a client is not happy with the oferred services, I, with this notebook, can improve my services, I can evolve and I can omit future mistakes. Even more, if the client leaves a phone number, I could have a coffee with him/her and talk about how I can improve my business. What I am saying is something that many don’t consider as important, but in order to have a successful business you need to put yourself in the position of the client.
(more…)
I’m sure many people will look at a site such as the one above (http://store.uniqlo.com) and go into shock over how cluttered this page is. But anyone with the ability to to see out of both eyesockets would be able to distinguish categorizations on this page etc. In this post, I will be talking about a concept that should be embraced not only when making web pages but in anything you do: Creating Contrast. More after the jump…
Uniqlo Store
http://store.uniqlo.com
Let’s start by having a look at the right side.
Obviously, I haven’t had much japanese in my lifetime but luckily enough I know to read the symbols, however, this isn’t what this is about. Mainly what I am focusing on here is the use of color & text (sizing & preferences) to create distinctions throughout the page, sectioning it off. Which in turn makes it very clear to the reader. As you can see in the image above, the first two thumbnails have similar text next to them, which easily distinguishes the section; it also lacks the use of borders for seperation, which detracts the boundaries, showing a grouping. However, below this, there are two seperations, also using quite varied text between the two to help create a further, more diplomatic seperation in such limited space. By using two contrasting colors (red & blue; also keep in mind their on the color wheel), uniqlo is clearly seperating two products from each other. Besides the use of borders, each box seems to be using different shades of blue to attract the reader and keep him/her focus on one specific section of the site. The same goes for the pink area.
Also, their menu is well organized. Using 3 rows and different shades of grey is a great way to keep a subtle seperation from their multicolored layout while being sure to attract (since it’s at the top). Also keep in mind the uniqlo logo is red, which makes it stand out easily; and it’s surrounded by grey areas, making it’s contrast even more vibrant. Their use of color on the text is normal, and actually pretty appropriate being that white & black are polar opposites of each other. Nothing fancy or flashy, which is good since it allows the content to stand out more than the layout itself.
The same thing applies here that applied above. Also check these next two examples:
As you can see, color can be a very powerful tool for creating contrast. Particularly on uniqlo, the use of darker borders, subtle background tones, and matching photography, make for a unique site & shopping experiences that allows for organized chaos on a webpage. This is what contrast is about & I think their shopping site is a great example of it.
Blogs are great tools that can be used to give insight on the latest and hottest design in all aspects of the industry. From clothing to industrial design, there is much to learn and gather information from. These blogs in particular seem to do a good job of narrowing down the basics of both offering engaging information as well as information with inspirational merit; and then defining not only good design, but good content as well. Be sure to add these sites to your RSS feed, you will be suprised.
AvalonStar
http://avalonstar.com
AvalonStar is the creation of design brainchild Brian Veloso. Here he offers insight to his own design findings as well as posing questions to readers and giving quite interesting responses. This is a very good website for inspiration, obviously (it’s in the list!).
HypeBeast
http://hypebeast.com
No silly, design isn’t just about graphics. Hypebeast is one of the oldest urban clothing blogs on the web, offering the latest comings from popular urban brands like Nike & New Era. This site tends to focus on not only the very stylish, but the limited as well.
OkapiStudio
http://okapistudio.com
A portfolio in disguise, okapi studio’s blog is merely their works wrapped in the style of a blog. Beautiful works indeed, as well as site but don’t mistake it for being only that. This website also offers information on unique side-projects and beautiful visualizations of things to come from the group.
SimpleBits
http://simplebits.com
SimpleBits is a blog by another professional graphic designer who has worked in the trade for years, doing work for MTV, etc. But besides his work, you can find useful links to his findings pertaining not only to graphic design, but food, clothing, and even photography, check it out.
Ping Mag
http://pingmag.jp
A great online editorial about japan’s design climate in general. Deals often with urban work done in japan but goes much further than the office. Arguably the best blog/magazine covering design in japan.
The Big Noob
http://thebignoob.com
The big noob is a personal blog that covers a range of topics in the online design industry. It’s definately a great blog to try out, especially since the owner has close ties with the likes of Threadless, Uncrate, and IconBuffet.
Digital Abstracts
http://digitalabstracts.com
Digital Abstracts is one of the most unique blogs to date, covering & featuring eclectic design firms as well as portfolios by worlds prospect artists. This website is ran by a couple of interesting artists itself!
Web Designer Wall
http://webdesignerwall.com
Web designer wall is obviously all about,yes, web design. This blog ran by Nick La of ndesign studio. This blog covers a lot of ground and the design itself is a work of art; don’t hesitate, see for yourself.
MoCo Loco
http://mocoloco.com
Moco loco is one of the oldest design blogs that I have known on the web & one of the most popular. This website keeps true to it’s tagline: “the modern & contemporary design blog.” This is also a great site if you’d like to keep up with events happening around th edesign world.
Design Sojourn
http://www.designsojourn.com
Design Sojourn is one of the best places online for well written articles, references, and resources on industrial design, bar none. This guy also touches topics without sensibility, beware! But very interesting and inspiring indeed.
Core 77
http://www.core77.com
Core 77, yet another industrail design blog that really holds it’s ground. Regarded as possibly one of my personal favorites, core77 touches the area of industrial design in a sometimes serious but mostly interesting way. But nonetheless, very inspiring.
These days, being unique on the web has come to be one of those “dime a dozen” things you see. And it’s very rare that you find great resources bundled all in one place. But there is some light in this “design” darkness. Here, I will be showing a couple of places that give light to this darkness and actually offer great resources for any to use, for free.
1.1001 Fonts
http://www.1001freefonts.com/
1001 Free Fonts offers a great selection of well, free fonts. As any other font’s site, there are quite a few that you may pass over but even still, these guys seem to keep a little quality control, offering some of the best fonts on the web.
2.Smashing Magazine
http://smashingmagazine.com
Smashing magazine i arguably, the best blog for design inspiration on the web. This website offers articles covering many aspects of graphic design as well as sections for resources, tips, and links to much, much more.
3.Blue Vertigo
http://bluevertigo.com.ar
Blue Vertigo is probably one of the most untouched yet, most valuable resources on the web. Offering links to almost any known and trusted resource site available on the web, you can’t beat it. From vectors, photography stock, fonts, and magazine sites, this database pretty much reaps it all.
4.Stock Xchng
http://sxc.hu
Being one of the oldest suppliers of free royalty-free stock exchanges on the web, this site has a massive database of free content that can be used anywhere from publications, to your very own website. A great place to keep in mind when you need 1000 words.
5.Designers Toolbox
http://designerstoolbox.com
Designers Toolbox is an awesome resource for grabbing cd cover templates, poster templates, etc. It’s utterly great, there’s not a whole lot to really say about it, you’ll have to check it out for yourself.
And that’s all folks, tune in next time!
I’m sure you see beautiful blogs and other tutorials online about how to make a basic header. Well, what about one that actually looks lush and gives off a rich glow, adding great feng shui to the look and feel of the site when visitors are flocking to your site? Well, this tutorial will teach you exactly how to do so, going through the knicks and crannies on how to make a beautiful site design look even better. And where better to improve than at the place your visitor sees most, the header.
1)Begin by opening up photoshop and creating a new document sized 800X200. When done, fill the area with the color #2C0B02 or any color you’d like.
2)Create a new layer. Within this layer, select the top half of your canvas and fill it with white. When done, make the fill opacity of the area 0%. Then apply a noise filter with about .9 fill.
3)Doubleclick the same layer and you should see a layer fx prompt. Under the gradients tab, you should a set of preferences; adjust your settings to what is below.
4)Create a new layer, on this layer, select the paintbrush tool use a soft brush sized 700px+. Make sure your brush color is white, then fill in the area with a click, centered. When done cut opacity to somewhere between 5-15% depending upon your color.
5)When done, double-click the layer and apply the layer styles below.
6)Create a new layer. This layer will be text. I used the colors white and #D44B1F. The font used is called New Media and can be downloaded here: http://www.dafont.com/new-media.font. Of coarse you can use any fon’t you’d like but this is most recommended.
7)Doubleclick the layer to add effects. These effects aren’t neccesary but allow for the text to bend better with the background therefore I applied stroking.Addi if you wish.
8)Duplicate the current layer than right click>rasterize. When done, transform>flip vertical. When done, use the eraser brush to fade the top of the area to a comfortable size. Depending upon your text size will vary the brush size. Be subtle! When done, fade the layer to around 30%.
9)Create a new layer. Fill the layer with white, change the layer setting to overlay & set the opacity to around 3px just to brighten the whole header.
10)This is unnecesary but I added a small block to the side of my text although you don’t have to. Enjoy your new header!