background preloader

Showcase of Interesting Navigation Designs - Smashing Magazine

Showcase of Interesting Navigation Designs - Smashing Magazine
Advertisement Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues. If page is long and provides different levels of navigation, will users be able to find their way through the site and use proper navigation quickly? Made by Water A JavaScript-Powered Vertical Fun The large bold headings and modern color palette on Made by Water1 feel fresh and fun. 2Vertical navigation buttons with icons. The other problem with the navigation is the yellow “up” arrow that is displayed in the footer of the page. Finally, while the text at the top is fun and exciting, finding the “Who am I” section is a bit hard. Made in Haus Horizontal Slideshow as Navigation 4Bold horizontal navigation. Foundation Six Animated Text Scrolls Down With the User Word Refuge Relogik Drexler

The Pop Over Plugin » description - WordPress Plugins and Themes, with added BuddyPress and Multisite Goodness – WPMU DEV For help with installing plugins please see our Plugin installation guide Login to your admin panel for WordPress or Multisite and activate the plugin: On regular WordPress installs – visit Plugins and Activate the plugin.For WordPress Multisite installs – Activate it site-by-site (say if you wanted to make it a Pro Sites premium plugin), or visit Network Admin -> Plugins and Network Activate the plugin. Getting Started Once activated, you’ll see a new menu item in your dashboard: PopUp Adding a PopUp Click on PopUp > Add New to open up the PopUp Editor. Here you will see a number of sub-sections for creating PopUps. PopUp Name Let’s start by giving the popup a name, this will help to keep organized if you have lots of popups. PopUp Contents Here you provide the contents of the popup. How these elements display will depend on the settings you provide below as well your theme or any custom CSS you may have added. Appearance Select a Style from the following: Simple Minimal Cabriolet Behavior That’s it!

Sponsor Flip Wall With jQuery & CSS Martin Angelov Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. We are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. Step 1 – XHTML Most of the markup is generated by PHP for each of the sponsors after looping the main $sponsor array. demo.php <div title="Click to flip" class="sponsor"><div class="sponsorFlip"><img alt="More about google" src="img/sponsors/google.png"></div><div class="sponsorData"><div class="sponsorDescription"> The company that redefined web search. The outermost .sponsor div contains two additional div elements. Maybe more interesting is the sponsorData div. Sponsor Flip Wall Step 2 – CSS We can start laying down the styling of the wall, as without it there is no much use of the page. styles.css – Part 1 styles.css – Part 2 Flipping Animation Step 3 – PHP script.js

Showcase Of Beautiful Vertical Navigation Designs - Smashing Magazine Advertisement Go to any website and you’re guaranteed to find one thing: a navigation menu. Navigation menus enable visitors to move from page to page; without them, we would have no way to conveniently explore websites. Website navigation menus generally come in one of two orientations: vertical and horizontal. You might also like these related posts: Showcase Of Beautiful Vertical Navigation Designs Riot Industries5 The vertical navigation in this portfolio website is simple and clean in looks yet robust in functionality and interaction. Village Version6 Here, you can see one of the benefits of vertical navigation: it allow for highly compact and modular menus that appear distinct from the rest of the layout. Bruno Souza7 This portfolio has a clean and simple navigation design that leaves the visitor to focus on the vibrant content to the right. Cambrian House8A quite distinctive, original navigation menu with five different typefaces. The Hipstery! R.I.P. (al) It's done.

Intranet Portals UX Design | Nielsen Norman Group Research Report A good intranet portal provides easy access to all enterprise information, resources and tools. Intranet portals can also effectively consolidate applications, connect information, drive governance, change communication, and reduce fragmentation. Comprehensive case studies show how the portal team can deliver what the organization and its users (your employees) need to be successful. Some of the most-praised features of intranet portals turn out not to be needed in most companies. For example, role-based personalization usually works better than individual personalization. And some compelling advice isn’t about features at all, rather it’s about process and governance. This 653-page report presents 174 best practices based on 83 case studies. This report focuses on the design, user interface, use, usability, and adoption of an enterprise portal — that is, the user experience of intranets that look, feel and act like portals. Topics Full ToC and List of Participating Organizations Articles

Free Wireframing Kits, UI Design Kits, PDFs and Resources - Smashing Magazine Advertisement To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details. In this post, we’ve prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. Free Mobile GUI PSD Android GUI PSD1 This Android GUI PSD is based on elements of the Android 1.5 GUI and was made to help the open-source community with its Android application mock-ups. RIM Blackberry PSD2 A complete PSD file with layer styles, this has 135 layers of Photoshop goodness. Android Sketch Stencil Version 1.03 A Sketch-style Android OmniGraffle template. iPhone 4 GUI PSD (Retina Display)5GUI PSD kit for creatives who design for the retina display (640×960).

30 Useful Jquery Plugins For Developer & Designer 5a631c969a617e6ab09dca8c29de6cb3 1424 jQuery is one of the most popular Javascript framwork out there. It is very easy to use and full of cool features. It can be hard for us to know how to use the code and create amazing stuff using jQuery. So, develepors decided to release and create plugins to help us fulfill this task by making it easier for us. YoxView – jQuery image viewer plugin YoxView is a free Lightbox-type image and video viewer for websites. Cute Baloon Cute Balloon is a jQuery script that allow you to easy make a beauty tool tip balloon, also with ajax content. Exposure Jquery Plugin Exposure is a jQuery plugin for rich and smart photo viewing. uiWizard This plugin helps you make the most of screen real estate, as you can easily navigate through a stack of DIV elements by using HTML links. Imagine having a huge form with scrollbars: with the wizard you can break it down into several steps. Cantipi Jquery Plugin Cantipi is a simple and functionality time picker. jSuggest Cloud Zoom

Beautiful Photo Stack Gallery with jQuery and CSS3 In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the […] View demoDownload source In this tutorial we are going to create a nice and fresh image gallery. We will use jQuery and CSS3 properties for the rotated image effect. We will also use a bit of PHP for getting the images from each album. So, let’s start! The Markup In our HTML structure we will have several elements. <div id="ps_slider" class="ps_slider"><a class="prev disabled"></a><a class="next disabled"></a><div id="ps_albums"><div class="ps_album" style="opacity:0;"><img src="albums/album1/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>Album title</h2><span>Description text</span></div></div><div class="ps_album" style="opacity:0;"> ... We will dynamically insert the pictures of each album into the ps_container div. The PHP P.S.

Module Tabs in Web Design: Best Practices and Solutions - Smashing Magazine Advertisement A module tab is a User Interface (UI) design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking (or in some instances hovering over) the content’s corresponding tab control. Module tabs are seeing an increase of use as websites and web applications push for optimizing web page screen areas without sacrificing the amount of information presented at once. For example, in weblogs, they are used in secondary content sections (such as the sidebar) to present relevant and interesting information such as a listing of blog posts which users can interact with to get to web pages quicker. This article discusses the use of the module tabs design pattern for use in websites and web-based applications. Anatomy of a Module Tab Area It’s worth a few moments to identify the key parts of a module tabs for the purpose of standardization of the terminologies used in the discussion. Yahoo!

10 Tips for Writing Good User Stories 1 Users Come First As its name suggests, a user story describes how a customer or user employs the product; it is written from the user’s perspective. What’s more, user stories are particularly helpful to capture a specific functionality, such as, searching for a product or making a booking. The following picture illustrates the relationship between the user, the story, and the product functionality (symbolised by the circle). If you don’t know who the users and customers are and why they would want to use the product, then you should not write any user stories. 2 Use Personas to Discover the Right Stories A great technique to capture your insights about the users and customers is working with personas. But there is more to it: The persona goals help you discover the right stories: Ask yourself what functionality the product should provide to meet the goals of the personas, as I explain in my post From Personas to User Stories. 3 Create Stories Collaboratively As <persona> , I want <what?

11 Principles of Interaction Design explained As well as matching peoples expectations through terminology, layout and interactions the way in which they are used should be consistent throughout the process and between related applications. By maintaining consistency users learn more quickly, this can be achieved by re-applying in one part of the application their prior experiences from another. An added bonus of keeping elements consistent is that you can then use inconsistency to indicate to users where things do not work the way they might expect. Breaking consistency is similar to knowing when to be unconventional as mentioned above. 3. “Everything should be made as simple as possible, but no simpler.” The range of possible actions should be no more than is absolutely necessary. Avoid unnecessary features and functionsBreak complex tasks into manageable sub-tasksLimit functions rather than the user experience 4. Cognition is the scientific term for the “process of thought”. 5. 6. 7. 8. Error Prevention Prevent errors by: 9. 10.