background preloader

Touch Application Prototypes (TAP). For iPhone and iPad, using Adobe Fireworks – UNITiD

Touch Application Prototypes (TAP). For iPhone and iPad, using Adobe Fireworks – UNITiD
This tutorial shows you how to use our method to make your Fireworks prototype work for the Apple iPhone and iPad. We call the method TAP. It is an updated version of our earlier work, found on our website, or at the Adobe Developers Connection. We added quite a lot of features. Other very useful tutorials can be found on Smashing Magazine, part 1, 2 and 3. It is recommended to read through this article to understand what TAP is and what it can do. What is it TAP falls into the category of “Smoke-and-Mirrors”, where technology is used to create the illusion of a working product. Technically, TAP is a library of files containing custom developed PHP and Javascript (JQtouch & JQuery) code that makes the prototype come to life. What do you need Adobe Fireworks. Building the prototype the first time Download the ZIP file for this article, it contains some folders with PHP and jQuery and jQTouch scripts.Create the screens with Fireworks as you would normally. Rebuilding the prototype Devices 1. Related:  lasher2013interaction design

25+ Must-have Chrome extensions for web designers and developers For many web designers and developers, Firefox is unsurpassable. For others, Firefox eats Chrome’s dust. For the past two years, since Google Chrome’s release, there’s been a raging debate on which browser is superior. Don’t feel sorry for Google Chrome, however. Although Firefox is more robust (primarily due to its popularity), Chrome is lightning fast and, with new extensions added daily, an exciting option for the serious web designer. And here you are to find tools that make Chrome useful to you as a designer or a developer. 1. After you finish downloading all the extensions in this list, you’ll definitely need an organizer. 2. Awesome Screenshot lives up to its name. 3. After waxing poetic about Awesome Screenshot above, you may wonder why two screen capture extensions are added on this list. 4. Chrome Sniffer allows you to check the framework of any website. 5. There’s a huge shift from operating locally to working in the cloud. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

Free jQuery CSS3 Image Hover Effects This collection of CSS3 Hover Effects is a simple and effective solution to add some nice features to your website using CSS3 features. It’s made with CSS XHTML only, there is absolutely NO javascript tutorials. This item comes with 75 custom effects that you can combine and modify easily. The CSS markup is commented and you’ll get also a documentation file to help you start working with these hover effects. jQuery Slideshow Tip Cards Free Hover Effect Modern browsers such as Chrome, Firefox, and Safari on desktop have been tested. Animation CSS3 3D Grid jQuery Hover Effect It’s the recreation of an effect we spotted inthis fantastic prototype app by Marcus Eckert. Ecommerce Product Display Free CSS Hover Effect Using standard widths and floats instead of css columns so that it will work in all browsers. 3D Grid Free jQuery CSS Hover Effect A proof-of-concept effect recreation of the animation seen in a prototype app by Marcus Eckert. Playing with CSS3 Animations Original CSS3 Hover Effects

Designing For The Multifaceted User Advertisement Designing with users in mind is a tricky thing. Not only does it require of us a sound understanding of who our users are, but the actual act of translating what we know about them into a well-designed product is not always an obvious or easy path. Currently, our user experience tools tend to focus on “who” users are. I believe this is a hangover from how we traditionally approached marketing and market research. A couple of years ago, I stumbled across a somewhat different method, which has proven useful in a few of my own projects. So, first, let me explain where I think our current toolset falls short, and then I’ll walk you through an example that uses this newer technique. We Are Multifaceted Put yourself in the shoes of a user for a moment. Imagine also, then, that you’ve stumbled upon a blog post on a topic that you care strongly about. 1Acting differently according to circumstance and context is natural. What does this mean for us as designers? Modelling User Groups

Designer’s Toolkit: The Most Popular Design As a designer, I know all too well how important it is to work with the right tools when you create your project. Not only will it save you gray hairs, but using the right tools can mean making the deadline as opposed to ultimate failure. If you have worked with a software or service that constantly gives you a headache, you know how frustrating it can be and how little you can actually do about it until you find another solution to the problem. A good approach is to use the most popular services and software to increase your creativity and the speed it takes for you to do what you love. The way Best Vendor put this together is to ask 180 designers and creative professionals what they use and what they think about it. Via: [Cool Infographics]

Best Free PSDs of 2013 We started our “Best of 2013″ series with the Best Free Fonts of 2013. For this week, we’ve went back through all the UI PSDs that we’ve covered over the past year and picked the ones that really stand out. Because there are so many very good ones to sift through, it’s always a difficult choice, but here are the ones we think are the best of the best. iGravertical Screen Layers + iOS 7 Screen Converter (PSD) Perspective App Screen Mock-Up 5 Perspective Tablet Mock-Up 2 Silver Stamping Logo MockUp Responsive Showcase Psd Vol2 Flat UI Kit Weather Pop-up iPhone 5-4S flat PSD Responsive Menu Login Free PSD UI Kit – Free download 24 Free Skinny Icons by Riley Tippetts Modern Touch UI Kit Flat Design UI Components About the Author I love communication, technology, web, design, movies, gastronomy and creativity. Here's some other articles that you will definitely find useful. Free Christmas Related PSDs Best Free Fonts of 2013 6 Free Fonts for your Projects 9 Free PSDs for Showcasing your Design Work

Responsive Typography: The Basics by Oliver Reichenstein When we built websites we usually started by defining the body text. The body text definition dictates how wide your main column is, the rest used to follow almost by itself. Used to. Until recently, screen resolution was more or less homogenous. In the heat of the relaunch I wrote a quick blog post on responsive typography, focussing solely on the aspect of our latest experiment: responsive typefaces. To avoid designing different layouts for every possible screen size, many web designers have adopted the concept of Responsive Web Design. Adaptive layouts: adjusting the layout in steps to a limited number of sizes Liquid layouts: adjusting the layout continuously to every possible width While both have advantages and disadvantages, we believe that adaptive with as few as possible break points is the way to go, because readability is more important than having a layout that is always as wide as the viewport. Choosing a typeface The right tone Serif or sans serif?

font dragr | Drag and drop font testing Freebies: 10 Mobile App Mock Up PSDs + 10 Wireframing Tools | Dzineblog360 EmailShare 8EmailShare The advent of smartphone and it’s impact is now not unknown to anyone of us. All are well aware how significant a smartphone and mobile apps are in today’s fast emerging tech savvy world. So, our freebies involve mobile app mock ups PSDs that can be helpful for latest iOS7. Recommended Link: 35+ Latest Design & Development Freebies Resource List iGravertical Screen Layers + iOS 7 Screen Converter Perspective App Screen Mock-Up 4 Perspective App Screen Mock-Up 5 Isometric Perspective MockUp Perspective App Screens Mock-Up 3D View iPhone 5C Psd Vector Mockup 3D iPhone 5 Psd Vector Mockup v2 iPhone X Concept Template Free 3D Perspective Mockup Dribble Mobile Mockup In Perspective The wireframing process is the straight-to-the-point and completely non-tech stage of any web project. Lumzy – Quick Mockup Creation and Prototyping Tool Mockup Builder – A Killing Prototyping App Tiggr – Creating Prototypes Collaboratively Frame Box – Lightweight Online Tool for Creating Mockups fluidIA

Trends in interactive design 2013 Aspect Ratio Calculator (ARC) Use the form below to calculate the missing value for a particular aspect ratio. This is useful, for example, when resizing photos or video. <p><strong style="color: #c00;">You must have JavaScript enabled to use this page. Instructions Enter the values for the original width (W1) & original height (H1) on the left. Formula Say you have a photo that is 1600 x 1200 pixels, but your blog only has space for a photo 400 pixels wide. (original height / original width) x new width = new height (1200 / 1600) x 400 = 300 Note: this is the new, improved version. / experiments / Aspect Ratio Calculator

Google Nexus Website Menu A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website. View demo Download source Today I want to show you how to reconstruct the sidebar menu of the Google Nexus 7 page. We will reconstruct this menu using unordered, nested lists and some CSS transitions. So let’s get started! The Markup Our menu will consist of two main parts: a main menu, the one that you can see at the top like a header, and the sidebar menu. <ul id="gn-menu" class="gn-menu-main"><li class="gn-trigger"><a class="gn-icon gn-icon-menu"><span>Menu</span></a><nav class="gn-menu-wrapper"></nav></li><li><a href=" Inside of the nav element we’ll add another wrapper that will help us with hiding the nasty scrollbar for Windows browsers. Now, let’s style everything. The CSS Note that the CSS will not contain any vendor prefixes, but you will find them in the files. Let’s start by setting border-box for all the box-sizing:

15 Ethereal Examples of Ghost Buttons in Action Web designers, it would seem, “ain’t afraid of no ghosts.” More specifically, they seem quite fond of the transparent buttons which bear the haunter’s namesake, and the sudden explosion of immaterial outlines across a number of high profile, aesthetic-heavy websites makes a compelling case for their use. The name of the game for this trend is aesthetic appeal. In the gallery below, you’ll find animations, interactive elements, full-page ambient video, luxurious hero imagery, and a defacto outline of everything you can do with negative space. Before you move on to the visual buffet below, let’s examine the trend itself for a few moments. Mashing Your Phantasmal Buttons As much fun as it is to fall in line with herd behavior for no other reason than “everyone else is doing it,” one can’t help but speculate on the actual appeal of the bandwagon. The advantages of ghost buttons are many and varied tweet this The advantages of ghost buttons are many and varied. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.