background preloader

Navigation Menus: Trends and Examples - Smashing Magazine

Navigation Menus: Trends and Examples - Smashing Magazine
Advertisement Navigation is the most significant element in web design. Since web-layouts don’t have any physical representation a user can stick to, consistent navigation menu is one of the few design elements which provide users with some sense of orientation and guide them through the site. Users should be able to rely on it which is why designers shouldn’t mess around with it. That’s why in most cases it’s where simple, intuitive and conventional solutions are usually the best option. This article presents recent trends, examples and innovative solutions for design of modern navigation menus. 1. The most significant task a navigation menu has to fulfill is to unambiguously guide the visitors through the different sections of the site. This navigation scheme can be used not only for the horizontal navigation; it can can be applied to vertical navigation as well. 2. In any case over the last months a number of web-sites integrated Mac-styled-navigation in their web-sites. 3. 4. 5. 6.

25 Photoshop Tutorials for Web Designers Adobe Photoshop is the tool of choice for most web designers. From creating a website template to objects and components such as content boxes and buttons, Photoshop doesn’t fail to deliver. In this collection, you’ll find 25 excellent Photoshop tutorials geared towards web designers. You’ll find a variety of tutorials that include creating full web page templates, navigation menus, headers, and content boxes. If you know of a good Photoshop tutorial for web designers – why don’t you share it with all of us in the comments.

50 Beautiful And User-Friendly Navigation Menus - Smashing Magazine Advertisement Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in. Below we present over 50 excellent navigation menus — we feature CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. Please also consider our previous articles: CSS-Based Navigation Menus: Modern Solutions1, which lists modern solutions for CSS-based navigation.Navigation Menus: Trends and Examples2 is an inspirational collection of navigation menus. 1. Loodo3A colorful menu that adds to the feel of the website. Acko.net4Steven Wittens takes a look at the navigation menu from a quite unusual perspective. Artgeex27Vivid typography in use. 2.

Slideshow 2! A javascript class for Mootools 1.2 to stream and animate the presentation of images on your website If you are looking to download Slideshow, or for class documentation, please visit the open-source project at Google Code. If you are looking for the old version of Slideshow, it has been moved here. Support If you find this page helpful, why not donate? Because donations are voluntary, the act of making a small contribution has a big effect towards promoting future development and support. Examples By popular request, the following are some simplified examples of Slideshow usage: Demos Click below to view the various demos - perhaps the most impressive effect of all is simply viewing this page with javascript turned off. Slideshow 2! Colophon All photos were taken with a trusty Canon DigitalElph in New York, October 2007.

Labs - GreyBox A pop-up window that doesn't suck. Introduction GreyBox can be used to display websites, images and other content in a beautiful way. Why use GreyBox: It does not conflict with pop-up blockers It's only 22 KB! Examples One website To trigger GreyBox you'll only need to append a rel tag on your a tags: <a href=" title="Google" rel="gb_page_fs[]">Launch google.com in fullscreen window</a> Website gallery Image gallery It takes very little code to display image galleries: Installation Step 1 Append following to your header section. <script type="text/javascript"> var GB_ROOT_DIR = " GB_ROOT_DIR should be absolute. Step 2 Append also following scripts and one stylesheet: AJS_fx.js is optional. Step 3 You are ready to use GreyBox. Where could it be used? Showing external pages AJAX uploading of files Showing internal pages (login, user preference, properties, contact formulas etc.) What browsers are supported? Other browsers may also be supported.

Hand-Drawing Style In Modern Web Design - Volume 2 Advertisement When it comes to web design too often perfect, colorful and boxy designs make the cut; however, the reality is different as it is hard to find objects with a perfect shape and a perfect color in our daily routine. To achieve a unique and communicative design we need to consider more creative approaches. For instance, we can draw sites by ourselves — or at least some parts of it. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when perfect, boxy and rounded elements can be found almost everywhere. And in fact, this is done quite often: whether a blog, a shop, an ad, a private page, or some collaborative project — doesn’t matter whether with Flash or (X)HTML. Please also have a look at our previous showcase Hand-Drawing Style In Modern Web Design What’s new? Few months ago we’ve declared that, in our humble opinion, shiny and glossy design elements were officially outdated. Script fonts gain on popularity 1.

Paper Strips Menus - Smashing Magazine Advertisement The beauty of an excellent design lies in designer’s attention to smallest details. Conventions are our friends; however, to stand out, a design needs a creative spin, an elegant play of colors, some unique flavour — a small detail that would make a big difference. Where the boundaries between traditional solutions and unusual approaches become fuzzy, designers tend to get creative. However, to come up with unusual ideas isn’t that easy, particularly if you are dealing with some daily routine-tasks. Still, nothing is impossible. Deb Sofield sticks posts on a paper pile. A menu in the shape of coloured loops. These ties will never hang on the neck of a web-developer. The navigation menu is simple, nice and fits perfectly to the overall design; navigation options appear to stick out of the content area. It's done.

Modern CSS Layouts: The Essential Characteristics Advertisement Now is an exciting time to be creating CSS layouts. After years of what felt like the same old techniques for the same old browsers, we’re finally seeing browsers implement CSS 3, HTML 5 and other technologies that give us cool new tools and tricks for our designs. But all of this change can be stressful, too. We won’t talk about design trends and styles that characterize modern CSS-based layouts. Progressively enhanced,Adaptive to diverse users,Modular,Efficient,Typographically rich. Progressive Enhancement Progressive enhancement means creating a solid page with appropriate markup for content and adding advanced styling (and perhaps scripting) to the page for browsers that can handle it. The idea of allowing a design to look different in different browsers is not new. tweetCC in Safari. tweetCC in IE 6. In CSS 3-capable browsers like Safari (top), the tweetCC3 website shows a number of visual effects that you can’t see in IE 6 (bottom). Adaptive to Diverse Users Modular Summary

How to Create Coda(tm) like Scrolling Window using Mootools -2 « N Rao Lakkakula’s Blog As I promised earlier , here is the code to do it. Look at the Final Output with some other Mootools Goodies at my website ( Assuming our html file is index.html and we have two folders names ‘js’ and ‘css’ to keep javascript and css files respectively. Step 1: Write HTML File ( I tookoff DOCTYPE and other header stuff to make it simple) index.html Step 2 : Write Javascript to do Scroll Effect js/site.js $(‘nav_about’).addEvent(‘click’, function(event) { event = new Event(event).stop(); scroll.toElement(‘content_about’); }); $(‘nav_projects’).addEvent(‘click’, function(event) { event = new Event(event).stop(); scroll.toElement(‘content_projects’); }); $(‘nav_portfolio’).addEvent(‘click’, function(event) { event = new Event(event).stop(); scroll.toElement(‘content_portfolio’); }); $(‘nav_blog’).addEvent(‘click’, function(event) { event = new Event(event).stop(); scroll.toElement(‘content_blog’); }); }); Step 3 : Stylesheets css/site.css css/h.css Thats It! css/v.css Like this:

Designing a WordPress Theme From Scratch A lot of people are martyrs and want to get their hands in the dirt and design their own WordPress Theme from scratch. That’s okay. I did that, and then got smarter. First, find a WordPress Theme architecture that you like, be it one or two sidebars, or no header, or whatever you want. If you aren’t worried about bandwidth on your website or your Internet connection, you can style your site right on the Internet. Get familiar with your site’s layout and structure by checking the source code and the style sheet, and begin your modifications one at a time. I recommend that you backup your test Theme folder frequently as you go, in case you make a big mess and you need to go back, but not to start over. Determined to Start from Total Scratch If you are determined to redesign your WordPress Theme from scratch, you probably already know how to do this. One of the best tools recently developed for web page designers is found in the Firefox Internet Browser. WordPress Theme Design Help Digg | Furl

Retro and Vintage In Modern Web Design Advertisement Retro and vintage are becoming a new trend. Once rarely used in this robust, dynamic medium, early, retro and vintage elements are now becoming more and more popular in a variety of design contexts. Retro and vintage designs exhibit graphic solutions that are strongly influenced by the time period that they are supposed to represent. Such elements create a nostalgic atmosphere, awaken feelings and memories and attempt to communicate information effectively using emotions. The Secrets Of Vintage and Retro Designs What elements do designers use to create a genuine vintage or retro atmosphere? illustrations from old posters, movies, newspapers, CDs, vinyls, ads; old-style typography (e.g. vintage and retro are often combined with a hand-drawing style2 and grunge style3. Some designs go even further and not only use retro or vintage elements but try to achieve a Renaissance look. Below, you’ll find a showcase of 50 beautiful retro, vintage and Renaissance designs. AdaptD.com8

50 Stylish Navigation Menus for Design Inspiration Six Revisions Skip site navigation 50 Stylish Navigation Menus for Design Inspiration Apr 10 2009 by Jacob Gube | 39 Comments A site’s navigation menu is one of the most prominent things that users see when they first visit. In this article, you’ll find a showcase of beautiful, creative, and stylish navigation menus for your inspiration. 1. netdreams.co.uk 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 15. 16. rzepak.pure.pl 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. csharpdesign.co.uk 36. 37. okb 38. 39. 40. 41. 42. 43. 44. toby-powell.co.uk 45. 46. 47. 48. 49. 50. Related content 39 Comments Alex April 10th, 2009 Here is another one: (top navigation) Kayla April 10th, 2009 Very cool menus. Jamiel Sharief April 10th, 2009 Nice collection. David April 10th, 2009 thx for sharing! Danny Hinde April 10th, 2009 Caroline April 10th, 2009 Great list – one missing – using tag clouds as part of navigation kayintveen April 10th, 2009 Tony Creamy CSS

300+ Jquery, CSS, MooTools and JS navigation menus | Graphic and Web Design Blog -Resources And Tutorials If You are web developer great navigation menus always comes handy. I united this list for people like me, who sometimes wants to do job fast and choose from already prepared examples, which are easy to use. So here are many resources starting from very simple HTML and CSS navigation menus, until very complicated and advanced jQuery, JavaScript and MooTools techniques used to get maximal control with fading, sliding, dragging etc. effects. 1.Fancy menu – very cool navigation menu: 2. Download dock menu 3. 37 different CSS navigation techniques: 4. 5. 6. 7. 8. 13 hand-picked Vertical and horizontal CSS Menus ; 9. 10. 11. I really recommend You to visit this site: 12. 13. 14.Accessible Image-Tab Rollovers; 15. 16. 17. 18.CSSmenumaker.com – offers professional CSS menus; 19. 20. 21. jdMenu Hierarchical Menu Plugin for jQuery – vertical multilevel dropdown list; 22. 23. 24. 25. jQuery Treeview Plugin: 26. 35 different unique Jquery demos with different features 27. 32. 33. Download all menus 34. 37.

Using jQuery for Background Image Animations After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm not the first to think so: see the examples at the end of this article). jQuery is a great library for this type of task but out of the box, it can't animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer). You'll have to use the Background-Position plugin that is linked in the demo (the original plugin is no longer available on the jQuery site). Previous versions didn't support negative or decimal values properly. The HTML The Basic CSS The Image

Related:  webaccessibility