prototype

Prototype Design: Atomic.io, the underrated prototyping tool

What a time to be a designer whatever you are in the field of UI/UX, Interaction Design, Product Design or a Graphic Designer in transition. There are many incredible design tools out there and we are lucky to have such a variety to get things done or to integrate into our workflow. But now the thing is, which one is the right tool or the ultimate tool for my personal work? Your studio? Your organization? To be honest, there aren't any right or wrong answers. It all depends on what are the needs and what are the things you wanna accomplish.

Framer Prototypes for Mobile Navigation

It's amazing how prototyping has become one of the hottest skill-sets in the toolbelt of any designer. We went from pretty much zero to a plethora of applications that help us to prototype our designs. I attribute this to the mobile revolution, nowadays it's vital to be able to test your designs on the device. There are so many details that get lost in translation otherwise. Among the most popular tools Framer ranks at the top for many.

Basic Animations in CSS and Javascript for Prototypes

Motion design is getting more important everyday when it comes to design interfaces that engage with the user both functionally and emotionally. Because of this, I started practicing with Javascript and jQuery to create basic animations for my prototypes. One of the most common animations comes into play when you want to build a list or animate items in a chain. To illustrate that today I share a simple technique I use for my prototypes. For this little tutorial we will play with some HTML, CSS and Javascript. The whole process won't take more than 30 minutes.

Basiliq - Freehand UI Kit

Designing interfaces and products is all about iterations and testing. Wireframing is a very important part of the process, it's about testing ideas very quickly and ideate. The last thing you should think about is the look and feel, but of course you don't want something terrible to show, especially when collaborating with other designers or clients. Basiliq - Freehand UI Kit provides a great solution for this problem. With over 300 beautiful crafted UI elements ready for your prototypes. Everyone loves high quality icons.

Introduction to Mobile Prototyping with HTML, CSS and JavaScript

If you are a designer in this day and age you are probably designing for handheld devices like smartphones and tablets. We live in a polarizing world where on one side we have native apps and on the other the web, with responsive sites and web apps. Designing in this environment requires understanding of the context you will be designing for, therefore, testing on devices. There are several ways to create prototypes, from paper to motion in After Effects.

Frame - Prototyping tool for desktop and mobile

Framer - Prototyping tool for desktop and mobile

Prototyping is a vital part in designing great products, from a simple poster to a car, it's extremely important to test designs in situations that resemble the real usage environment. My background is in Industrial Design and we used to prototype everything. Then I moved to graphic design and again I was always printing and checking to see how my designs felt. Now in the digital world, and with mobile taking over it's really important to be able to simulate the products in the handsets.

Responsive Nav - Useful Responsive navigation plugin

What I love the most about the open source community and living in today's ever-evolving world is the abundance of great work being shared. It's pretty hard to not find what you're looking for, particularly within the world of programming, if you are just starting out. I draw a lot of my learnings and inspiration for prototypes and fully baked products within this resourceful community. Today I want to share with you a plugin for responsive navigation called Responsive Nav Responsive navigation plugin without library dependencies and with fast touch screen support.

Flipping Book in CSS and jQuery

The tutorial of this week is about HTML, CSS and a little bit of Javascript with jQuery. As the rule of trend now is mobile first and any designer who wants to really understand the media will have to be able to create quick prototypes of his/her work, we decide d to write a few basic prototyping tutorials. The first one will be about create a simple flipping book, like a 3 fold brochure, using HTML, CSS and JS for the events.

Industrial Design Inspiration: Lotus Esira

We love industrial design, it is everywhere, every object was conceived with a goal in mind. That goal, most of the time, is achieved through the design. We have also learned to admire beautiful industrial design work, especially the first phases of the creative process and prototyping. Jack Lamburn's Lotus Esira Concept exemplifies all of this and that's why we would like to share with you here in this post. Jack Lamburn is a designer at James Park Associates.

Subscribe to prototype

Brought to you by