Welcome to my websites grades blog. You will find information and resources here that cover all aspects of creating websites that "make the grade". I will share website design ideas, link to examples of great website design, and some that are not so great. Sometimes it's a good learning tool to see mistakes that other people have made. Thanks for visiting. I hope your website is a success and this blog has some useful ideas for you.
Saturday, October 23, 2010
25 jQuery Drop Down Menu Scripts
Showcase of Amazing Vector Art
September in Review: 24 new resource packs on Vandelay Prime Minister!
Another month has come and gone quickly and September brought some of the new resources to our members on Vandelay Prime Minister.If you are not familiar with Vandelay premier is a membership site that premium quality resources for designers. you can find more by the guided tour.
We wanted to be the month quickly summed up with the resources that were released in september. we have another exciting month planned for October! if you want to get access to all the resources you can participate in Vandelay Prime Minister for only $ 9 per month or $ 79 per year.
Book PSD mockup
PSD magazine mockup
FLAT panel PSD
Hard Drive PSD
BlackBerry PSD
Flying animals brushes
Scribbles brushes – part II
Texture spray paint brushes
Grunge pattern brushes
Scouring pad, brushes-part II
Satisfaction guaranteed vectors
Hand Drawn Banners and roles
Heavy grunge textures-part II
Grungy paper textures
Red Grunge structures
Concrete structures
Wire ropes and timesheets structures
Pavement textures-part II
Sand structures
Base price tables
E-Commerce Button Set
Textured Uganda
Grunge Bokeh structures
Autumn stock photo set
Members also have access to exclusive discounts on a variety of products and services. In September we have a 30% off coupon for Theme trust, a new WordPress theme shop run by Henry Jones of Web design Ledger added. we now have a total of 18 exciting offers for our members.
Please contact us if you have a product or service that you would like to offer at a reduced rate for our members.
Friday, October 22, 2010
Great tips for improving web typography
The designers tend to be overachievers, like all that have a hold in place precisely how they intend it to be so based on concepts or imagination. Most browsers tend to Times New Roman or the who, which does not enough blend in with elegant, very creative and imaginative designs by default.
That said, creative designers always find new fonts and techniques to improve and implement their favorite typography to their site Web. below, we cover 7 tips on how to improve the typography of your websites.
Colors and contrast are very important for the puzzle of typography.Many tend to keep colors of typography in the wheel even as their design main est.Par example, have a dark blue background means they tend to define a color light blue typography.Sometimes it's a question that colors can merge too makes visible but rather difficult to read causing eyepiece.
For your readers or viewers, this makes that less inclined to read articles or to navigate around your Web site for a longer period of temps.Par therefore, color contrast between the background and foreground text or typography should generally be significant enough to keep things apparent, as black on white or white on blue.
Font size is a very important to keep the text legible, clear and precise. A General Council is to maintain fonts in a comfortable cushion where it is not too large can cause an unnecessary, but not less than a usual manuals font size used space.
A good way to show your content in the body of your sidebar or content side-focus is usually have the body content font size is larger that content side as your viewers will spend more time the body of the text than the text of the play.
Keep content of focus on the content of the body thus, allows the Viewer to easily navigate and read, it is also called a hierarchy between the content.
Let's examine return the notion of hierarchy discussed earlier, by it, we can identify easily between many body text.For example, if large size on your web page text is high, while the other bodies of text are much smaller, your eyes naturally will land on the larger object, in this case, size of texte.Est what this means, with an emphasis on certain keywords or text frames, you increase its visibility on this page.
With this said, throughout your body text, highlighted or focusing on the critical aspects of your text to keep your text long blocks clear and understandable.In addition, it gives your design or website a pleasant touch to typography, providing unique, organized sound at its best.
Review in this case does not correlation between to ensure your text contains the correct spelling and is grammatically correct, but rather correlation to link the misconnection between your design and typography.Typography is not always what it looks like from a design perspective, but also how it appears it does read the text in the clarity and readability.
Many generally tend to post a text dump artificial lorem ipsum and make it look to design a view, but not actually go in-depth reading level to read the text to understand if their use of typography is actually correct and most comfortable for reading.With this said, not just style and layout, typography based on what is good design, but also ensure the typography is clear, well spaced and organised for the general public to easily read.
I saw it as a commonality on many Web sites as if the designer was a child in a candy store and decided to choose an of each put in their amples.Nous all have favorite font faces boots and we are inclined to many of them use many different projects.However, as each face font from multiple font faces in your player, causes confusion has its own style for each character, making it difficult to read.Instead of sticking to one or two fonts faces throughout your Web site and use your favorites for other projects.
Cramming everything together is a viewer nightmare, let alone an animal peeve any concepteur.Laissez than good spaces between sets of text to keep other organs of the Viewer cannot generally be focus of what they are reading texte.Cela playback lets viewers starting running on different segments of text or unintentionally ignoring DNA lines ' in mind, the spacing is essential for good readability, so use spaces as necessary.
You have a preferred font face and decide to use on your website, however, you must understand that not everyone can have that font installed on their system or device, so it does not correctement.Au instead, use batteries font CSS rather generously as a fallback for your viewers who do not have the font you intended initially to use website.
A good font fallback something similar to what you used to use, and a rescue who would a font that is typically used on most platforms and devices .it ' is an excellent way to ensure that the origin of your website does not much change on different platforms and devices, leaving your typography exactly or close to the way you want it to appear.
Overall typography for the web is an interesting issue with many tips and DO ' s and not the result to the web.La main thing to notice is how typography appears must be friendly and compliment your Web.Cela site design includes the color and contrast, size, font and the who .the ' overdo not and it complicate with typography, but also corresponds to your design well enough so that it looks great so be ideal for your viewers.
Fashion sites: trends, showcase, interview
Parameter name: request
Translate Request has too much data
Parameter name: request
Fashion is a cultural phenomenon. It’s so often transient, but at the same time one of the most polished mirrors of our time. Unlike other art forms and creative media, fashion is a mode of self-expression for all players involved: the designer makes clothes to express their personality, and the consumer wears them for the same purpose. Fashion also accommodates a number of other creative professions, such as photography, make-up and hair-dressing and Web design.
In this post, we’ll look at websites from the fashion industry. We spoke with two developers whose websites differed in style and implementation to find out the considerations involved in designing a website for a fashion brand. Further below, you’ll find a collection of smart websites done by clothing designers, photographers, make-up artists and other players.
With its look at trends and features in this niche, this post may come in handy for those of you working on a related project or who are simply curious to know how Web design is approached in this industry. Although we won’t discuss the clothing itself, fashionistas may find some use in it, too.
[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]Looking through the websites discussed in this post, we caught a few commonalities.
Photography is a powerful tool and is integral to fashion websites. Grasping how photography can impress the viewer and set the mood, many fashion brands use big high-quality pictures to dominate their websites.
Mexx
Like many other fashion websites, Mexx relies heavily on Flash and full-screen images. The design has no special features or gimmick; its uniqueness is in the content itself.
The fashion industry works hard to create mental associations and set expectations on the part of its audience. The market is saturated, and companies look for new ways to grab the attention of customers. One way a brand does this is by going beyond merely presenting its clothes and instead bringing its merchandise together into a storyline and associating its product line with a certain lifestyle.
Louis Vitton Journeys
Louis Vuitton Journeys is a unique Web campaign sponsored by the famous fashion brand. It features exclusive stories about influential modern personalities. The latest journey, Encounter With Greatness, features quite a smashing get-together of three football legends: Pele, Diego Maradona and Zinedine Zidane. Unique content and interactivity through Facebook integration make the website an exciting destination.
Modern Web technology enables us to showcase and sell products at once, and equally well. Today, most fashion brands no longer divide their online presence between their product line and e-commerce, preferring to combine the two under one domain or using their online store as their official website.
Tiffany
Tiffany’s official website has a distinctly e-commerce design.
That the icons of fashion are so old-fashioned with their website designs is rather ironic. A quick look across fashion websites reveals that the more famous a brand, the more poorly designed its website. It seems these traditionally big names prefer conventional marketing channels and minimize their Web presence because of it.
Pierre Cardin
This website is definitely worth a visit, at least to see what a good design is not. Or perhaps that’s what they call avant-garde?
Another trend is the increasing use of interactive features and social-network integration. Designers are taking advantage of the latest tools and techniques to allow visitors to “touch” their products and deliver exciting experiences. Live-action previews of apparel, webcam functionality, connecting and sharing via Facebook, even 3-D viewing mode: with all of these entertaining baits, becoming an online shopaholic is easier than ever.
Zoogami Eyewear
Zoogami presents its latest eyewear collection in a fun, amusing way. You need a Facebook account and webcam to experience it.
Although Flash still leads as the tool of choice for fashion websites, more websites based on HTML and JavaScript are appearing in this niche.
Airwalk
The website for footwear brand Airwalk shows JavaScript at its best. It delivers a dynamic and interactive experience with its variety of transitions and hover effects. The branding website is seamlessly integrated with the online store, and the company style is perfectly supported by the images and typography. Legwork Studio is behind the work.
Below are some more examples of fashion websites. The websites were selected not because the brands are famous, but rather because they were attractive, their approach was creative and their interface uncluttered (though not every website necessarily exhibited all three characteristics).
Adidas Y-3
The website for this Y-3 spring and summer 2010 collection is hosted on Adidas’ corporate domain. The website features an innovative and sophisticated presentation of the products, implemented with the “live photos” effect. Designed by Sid Lee.
Burberry
Every item in Burberry’s apparel and accessories collections is presented in a unique way on the company’s website. Here, you can see the “live photo” effect, similar to the one implemented on Adidas’ website; Burberry does a twist on it, though, by adding 3-D rendering. The design agency, KOKOKAKA, aimed for interactivity and hit the target, wouldn’t you agree? The website also includes an HTML-based e-commerce platform, so it’s a good example of how HTML and Flash can be effectively combined.
Amanda Wakeley
A simple yet elegant website that serves as both an online store and a branding home for Amanda Wakeley. Design by Pod1.
Anja Gockel
The website of German fashion designer Anja Gockel has a clean and contemporary look. This is achieved mostly through high-quality photography, an uncluttered layout and clean typography. A special treat for fans: three desktop wallpapers available for free downloading, something rarely seen on fashion websites. Website design made by Macologne.
Jay Jays Dance/Off
Dance/Off is an online catalogue for the new line by youth fashion brand Jay Jays. Its highlight is the interactive video available for viewing in 3-D. Visitors can enjoy a dynamic dance show and then just click to freeze the action and explore the outfits. Creative agency Visual Jazz did a great job of creating the fun and engaging product presentation.
Diesel
This website looks quite normal for a company that has developed a habit lately of inviting everyone to “be stupid.” Perhaps taking up a good half of the main with a large cloud of images and adding some Italian content here and there might seem strange, but given its habit, Diesel can probably get away with being a bit… well, cuckoo in its design.
24 Teeth by Lacoste
This minimal and light design splendidly matches the style of the 24 Teeth footwear line by Lacoste.
Reserved
The website of Polish clothing brand Reserved has an atmospheric Flash-based design. The full-screen slideshow on the main page works great at inviting visitors to check out the latest collection. “Live photos” are used here, too, officially making this a trend. Some content is available only in Polish, even after you switch the language selector to English, similar to the Diesel website. Another trend? Hopefully not.
Walter Van Beirendonck
Now here’s a Belgian approach to fashion websites. The design relies heavily on boxed tables and red. The timeline section has some bugs; still, the website is worth checking out, if only for the illustrations. Designed by Emmy Mees.
Werkstette
Werkestette’s website is based on content. The simple and intuitive navigation enhances the impact of the large photos. The website was created by Pelle Martin and Felix Nielsen.
You
Simplicity and an intelligent use of colors make the website of Italian creative studio You a beauty.
Anti Sweden
Anti Sweden is the tribute of Norwegian design collective Anti to black metal, jeans and Norwegian identity. Remarkable graphic design and typography earned the Anti Sweden website a spot in this showcase.
Faith
The Faith clothing line is the brainchild of the Italian fashion designer Federica Sasella. Large photographs and cloth textures give the Faith website a pleasant look and feel. Designed by Effective Studio.
Daffy’s
Daffy operates a network of low-price clothing stores geared to varied consumers. Bright colors, big eye-catching pictures, transitions and easy navigation make for a comfortable experience of browsing for bargains.
Prada
This website focuses on imagery; the latest Prada collection is presented as an original mix of photos and illustrations. One nice feature is that most pages open in their own pop-up windows that can be moved around the screen, allowing visitors to compare products.
Josh Goot
On the website of Australian fashion designer Josh Goot, visitors can play with the fuzzy surreal background, which creates a nice visual effect as the mouse moves around the screen. The interactive full-screen mode for images lets you examine the outfits in details. Tick off the checkboxes for aesthetics and functionality.
Lasse Pedersen
This website is for hair and make-up artist Lasse Pedersen. The big pictures and typography are best viewed at full screen. Developed by Pelle Martin and Felix Nielsen.
Lisa Shahno
Moscow-based designer Lisa Shahno puts herself on the fashion map with these geometry-inspired designs. Her website accords with the style, too: the sparseness of the design complements the photographs and geometric logo well. Website designed by Kostya Sasquatch.
Moschino
On the splash page of Moschino’s website, you can choose between the main website, the official online store or the page for the current campaign. At first sight, the three sub-sites aren’t very visually consistent. But it doesn’t feel like a serious problem, maybe because the funny goose mascot creates a link between the sections. Made by Netway Italia.
Miss Sixty
The design for Miss Sixty’s website is bold and provocative, in no small part because of the abundance of red on the black background. The online store is slightly calmer.
Keds
“The Original Sneaker” celebrates its over 90-year history. The website is a treat for the typophile.
Cheap Monday
This well-known producer of street-style jeans, Cheap Monday, has an interesting history. You can learn all about it on the company’s website, which has a simple “bloggy” design that matches the underground values of the brand.
To get a better idea of what characterizes the process of designing a fashion website, I spoke with people at two design agencies that have relevant portfolios. One of them is the Swedish digital agency Nute, which developed a website for the fashion and art project Uniforms for the Dedicated. The other team is the Indian agency BC Web Wise, which designed a website for apparel creator Allen Solly.
I thank both teams for taking the time to do interviews for this article.
Uniforms for the Dedicated (UftD) shows an innovative approach to fashion branding by combining men’s fashion, music, art and film. All of these and an online store are skillfully presented on UftD’s website, which was designed and developed by Nute Digital Agency. Like the fashion brand itself, the website is diverse and successfully combines HTML, Flash, JavaScript and an e-commerce platform into an enjoyable browsing experience.
Daniel Ruuth, creative Web developer at Nute, was kind enough to share details of the creation process for UftD’s website.
Question: What is involved in designing a website for a fashion brand?
Daniel: I think designing a website for a fashion brand is like designing a website for any other lifestyle product. The main thing is to display the products—the clothes in this case—well and in a context in which the viewer gets an overall feel for the product. A piece of clothing is so much more than a textile and a color: it’s a mood, a statement and an expression of the person wearing it.
We have a great connection with our client, and because of this we know how important the context, the feeling and the underlying story of each garment are. This is what we need to communicate to visitors. They need to be able to see themselves in the clothes. Besides this, of course, users want to be able to “get” the material, so close-ups and/or photographs that help you understand the motion of the garment are important.
Question: What goals did the client set for you?
Daniel: The website was combined with an art installation. The goal was to launch the website to keep the rings on the water moving. Along with that, we had the goal to increase website traffic by 40%, which we did.
Question: Could you give us a brief overview of the stages of creating the website?
Daniel: We had a start-up meeting with the clients to discuss this year’s campaign. At the meeting, we gathered key concepts and any ideas they had. After that, we start working on a presentation of our suggested approach; this is where we showed them the initial hand-drawn sketches (which were poorly detailed on purpose to keep the client from locking in on the details).
Some sketches from the original hand-drawn story board.
Daniel: That idea and those sketches got tossed around for a while before we got to the next point: the mock-up. Here, we did a simple mock-up (watch this concept test movie for the UftD website). Once that was completed, we did the final sketches, got them approved and then went about starting the actual production.
Question: What tools did you use? Particularly, what were your reasons for not using pure Flash, which seems to be the most popular platform for fashion websites?
Daniel: We put the idea first. The technique is not what’s important. If the idea must be realized with Flash, we’ll use Flash. If it can be solved with plain HTML, we’ll use HTML. If we need to work with Web cameras and streaming services, well, then we’ll use that. We try not to think of “how” right from the start, but rather of “what.” We have a great team here at Nute, so whatever idea we come up with, we usually have someone who can make it happen.
The tools we used in this production were AfterEffects, Photoshop, Flash and Coda. The online store implementation was built on the Magento e-commerce software.
The UftD online store is clean and elegant, creating a comfortable shopping experience.
The biggest part of the production was creating the movie/environment (see a screen dump of our AfterEffects project; quite a few layers).
Some of the frames from the movie for UftD’s latest campaign, 1020 Trickery Lane.
Question: What do you think makes this website a win?
Daniel: We strive to tell the user a story. Whether it’s a huge CMS-based company website or a campaign website like the one for UftD, there’s always a story to tell. In this case, it’s easier to see what I mean by “story,” because the website could actually be interpreted as a film, going from point A to point B. Our first concept was like a script for a movie.
What makes this website a win? Well, perhaps it’s a win because we are able to entertain users while they view all of these awesome garments by UftD in an exciting environment. But more importantly, I think this website is a win because it’s right where the audience is. This would not be a good website for a Donna Karen collection, but it’s a great website for a brand like UftD.
Question: What feedback have you gotten from the client and users about the website?
Daniel: The client is more than happy, and the online buzz for the website speaks for itself.
Allen Solly is an apparel brand from India that offers mostly semi-formal and casual wear for men and women. The brand’s official website is based on Flash; eye-catching illustrations and an interactive 3-D environment convey well the spirit of the 2010 collection and engage the target audience. Unlike most fashion brand websites, Allen Solly’s has a contemporary and uncluttered design.
To learn more about the process of creating a website for Allen Solly, I got in touch with the agency responsible for the design, BC Web Wise. The founder, Chhaya Balachandran Aiyer, and the studio’s leading designer, Naim Shaikh, kindly agreed to answer my questions.
Question: What is involved in designing a website for a fashion brand?
Chhaya: Imagery is critical. The design has to showcase the fashion statement. It has been commonly implemented in print and on TV before. The idea is to extend this fashion statement to the Web, taking advantage of its interactive capabilities. I think we did it with the use of Papervision3D and bringing alive a 3-D rendition of the print campaign.
Question: What goals did the client set for you?
Chhaya: The message of Allen Solly’s latest release was as follows: “We’re bringing modern art to modern fashion, doing summer style like nobody else. Our new range of youthful work and casual wear lets you live life 3-D in a 2-D world.” Our goal was to create a Web presence that reflected this idea in the best way.
Naim: In short, the client’s brief sounded like this: “This is our new collection. Do your best with this.” We then got full freedom to do our creative work.
Question: What tools did you use? Particularly, why did you choose Flash, which seems to be the most popular platform for fashion websites?
Naim: Flash and Photoshop were used to make this website. Usability is very important to us. I feel that many fashion websites are too cluttered, with weak usability, and we tried to avoid this. For Allen Solly, along with the main Flash version, an alternative HTML website is available, which helps with search engine optimization and gives choice to visitors who don’t have Flash enabled.
The creative artwork done by Ogilvy for Allen Solly’s print campaign was very cool, with a 3-D effect and illustration style. We adapted it for online.
The illustrations on the Allen Solly website were initially designed for the print campaign of the same name, designed by Ogilvy & Mather Bangalore.
Question: What, in your opinion, makes this website a win? What feedback have you gotten from clients and the audience?
Chhaya: An intuitive front end and sleek execution. Honestly, everyone has simply loved it.
Naim: It was a very big project for us. It is very big for me on a personal level, too. The website has received the most positive response and has been featured in various design communities.
(al)
Tweet