Mobile UI Design Inspiration: Charts And Graphs Design can be considered a craftsmanship because you do it until you are good at it and then you keep doing it to be better. The problem is that many developers are really eager to solve functionality problems rather than spending time to solve the interface issues. A mobile designer must embrace minimalism because he will have to limit the features available on each screen and use them efficiently. Designing for mobile seems like a difficult move from designing for web or for desktop applications and a designer must keep an eye on almost everything that he can think of and on what he doesn’t know yet. The charts and graphs which are displayed in this article for inspiration should help a mobile app designer to expand his imagination and relieve some of the stress that he comes across while designing an app. Dashboard WIP Stats Sweetgreen Envato Sales App Mtn Report Mobile Site DataWiz Reports My Health Missions Huh Graph design Fidotown Food Calculator Weather Fidotown Weight Chart Kareer me Tiny Gift
Web Creme | Web design inspiration Agence de communication Toulouse | Web & Graphisme | Sublimeo Testez votre moniteur (Etalonnage et calibration de votre écran) Les dégradés dans le noir et le blanc doivent apparaître parfaitement GRIS et sans aucune dominante de couleur. test complémentaire : utile uniquement pour l'impression et non l'affichage web Le moniteur doit afficher les nombres de 100% à 10% dans les colonnes cyan, magenta et jaune. Si vous ne pouvez discerner ci-dessous 216 couleurs toutes différentes les unes des autres c'est que votre écran n'est pas correctement calibré. Cliquez sur une couleur ci-dessous dans le tableau : une bande colorée apparaît. Le test de précision de dégradés de couleurs L'image ci-dessous doit apparaître comme un arc en ciel commençant et finissant par la couleur rouge. Ci-dessous, les 2 images sont volontairement affichées sans transition progressive des couleurs. ...ou comme cela ...c'est que votre carte graphique ou votre écran ne peut pas afficher dans l'état actuel toutes les couleurs. Le test de gris simple : Le test de gris précis: Ceci est une palette de 10 gris différents.
Unheap - A tidy repository of jQuery plugins prototype-carousel - Prototype Carousel plugin Updates May 4, 2009 - added mouse wheel support via the wheel option Description Carousel is a highly configurable Prototype.js extension that creates a nice way of presenting content that is logically broken into several pieces / steps / etc. It's: Lightweight - 4.3 KB minified Cross-browser - Tested on Internet Explorer 6/7/8, Firefox 2/3, Google Chrome, Opera 9.64 Examples Some of the most important features are presented on this page, the rest will be explained and discussed here. Requirements Carousel.js needs both the Prototype JavaScript framework and the Script.aculo.us effects library to work. Usage Download carousel.js or carousel-min.js Include the script in your page, after the Prototype and Script.aculo.us libraries: Markup The minimum markup and styling are: <div id="carousel-wrapper"> <div id="carousel-content"> <div class="slide"></div> <div class="slide"></div> ... This will generate a 500x500px Carousel with horizontal movement. Initialization You initialize Carousel by: Triggers
25 Websites with Stunning Big Background Photos High-quality photographs can have a huge impact on the look of a website. The photos can either help to enhance the design, or they can serve as a focal point. In some cases, the entire background (or a large percentage) of a website will consist of a large photo. In these situations the other design elements wind up complementing the photo, instead of the other way around. In this post we’ll showcase 25 websites that make use of very large background photos. There are a variety of different types of websites included, and all different kinds of photos that are being used. Looking for hosting? Examples | Responsive jQuery Slider | bxSlider Ever since releasing v4.0, which introduced responsive behavior, the carousel mode (displaying / moving multiple slides) has been the most misunderstood, troublesome aspect of the slider. Proper use of the settings required a secret knowledge of the underlying codebase, and did not allow for intuitive configuration. Plainly put - the carousel config was poopy. No longer! Quick glance Example #1: Standard responsive carousel In order to setup a responsive carousel, we need to supply three values: slideWidth maxSlides minSlides Go ahead and resize your browser from very large, to very small. Let's disect each of the settings. slideWidth When telling a horizontal slider to display more than one slide, we need to supply a width for which the slides should use. Another new feature regarding slideWidth, is that the slider container will now be assigned a max-width which will never be larger than the maximum number of visible slides. minSlides / maxSlides slideMargin (optional)
Fullscreen Slit Slider with jQuery and CSS3 A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. View demo Download source In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll slice the current slide open in order to reveal the next or previous slide. We’ll be using jQuery cond, jQuery plugin by Ben Alman for chainable “if-then-else” statements. The animal icon font that we’ll be using is by Alan Carr and you can find it here. The images in the second demo are by Majownik and they are licensed under a Creative Commons Attribution License. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. Let’s start with the HTML. The Markup Every slide will also have some data-attributes that we will use in order to control the effect for each slide. The CSS
Cycle2 Demos You are encouraged to view the source of these demos to understand the power and flexibility the Cycle2 brings to the table. Getting Started How to get started with simple, basic slideshows. Adding Slides How to add slides to a running slideshow. Auto Height How to leverage Cycle2's auto-height support. Bookmarkable Slides How to leverage Cycle2's data-cycle-hash attribute to have bookmarkable slides. Captions How to add captions to your slideshow. Carousel Pager Two synchronized slideshows using a carousel pager and prev/next anchors. Centered Slides How to center slides horizontally and vertically (using Cycle2's center plugin). Commands How to issue commands to a running slideshow and how to bind arbitary elements to issue those commands (pause, resume, stop, goto, etc). Continuous How to have a continuously moving slideshow. Image Loader How to use Cycle2's image loading facilities in order to delay the start of a slideshow until some or all images have been loaded. Manual Fx Nested Slideshows Overlays
25 Beautiful Responsive Web Design Examples for Inspiration Six Revisions Menu Main Categories CSS HTML JavaScript Web Design WordPress Web Development Design Inspiration UX Design UI Design Freebies Tutorials Tools Links About Contact Advertise RSS Twitter Facebook 25 Beautiful Responsive Web Design Examples for Inspiration By Jacob Gube Responsive web design is the practice of enhancing the experience of the user by adapting the web page layout to the device he or she is using when accessing the site. Check out the beautiful responsive website layouts below for inspiration in your own responsive web design projects. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. Related Content About the Author Jacob Gube is the Founder and Chief Editor of Six Revisions. This was published on Sep 15, 2012 Previous PostNext Post 33 Comments Georgios Sep 15 2012 I am anxious to the further development of responsive web design. Rumjhum Sep 16 2012 This collection is a bunch of fresh grapes which act as a mind appetizer for me. Jacob,
jQuery Infinite Carousel Plugin 1.2 Released Update: The latest version of this plugin can be found here. Around the beginning of this month I released version 1.0.1 of the Infinite Carousel jQuery plugin. About a week later I received an email asking if I could add the ability for a visitor to jump to a specific image in the carousel. I’d seen this functionality in other carousels (none that run in infinite loops) where small images or some other user interface was displayed that allowed someone to pick an image and go directly to it. At first I thought sure, how hard could it be to enable this? If the current carousel could flow infinitely picture by picture, how difficult could it be to fast forward to a specific image in the sequence? Creating a user interface to allow jumping around the sequence of images was the easy part. What I ended up with is a very fluid, very clean image carousel that allows you to jump to any image in the series, while maintaining all the functionality of the original Infinite Carousel. Download Enjoy!