background preloader

Complete Beginner's Guide to Interaction Design

Complete Beginner's Guide to Interaction Design
Interaction design has its origins in web and graphic design, but has grown into a realm of its own. Far from merely working with text and pictures, interaction designers are now responsible for creating every element on the screen that a user might swipe, click, tap, or type: in short, the interactions of an experience. Newsletter Sign Up Original UX articles Curated Resources Never miss an issue! This article serves as a good jumping off point for people interested in learning more about Interaction Design. What is Interaction Design? Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction design began the day the first screen was designed to hold more than static copy. Interaction design has evolved to facilitate interactions between people and their environment. Common Methodologies Although interaction design spans myriad types of web and mobile applications and sites, there are certain methodologies that all designers rely on. Goal-Driven Design

OpenType OpenType® is a modern font format developed by Adobe® and Microsoft® to provide users with an accessible and advanced typographic toolset. OpenType improves on PostScript and TrueType just as the DVD trumped the video cassette. When deciding what format to choose, using the latest technology simply makes sense, but let’s dig a bit deeper and explore the ways OpenType makes life easier for typographers and graphic designers. OpenType is Efficient One Style = One File The PostScript format is limited to 256 characters per file. Based on Unicode, an OpenType file can contain up to 65,535 characters or glyphs. As a concrete example of the efficiency of the OpenType format, compare the multilingual PostScript version of FF Meta 1, a package of four type styles, with its OpenType successor. Narrow this example down to a single style (FF Meta Book), and we can see that the glyphs and metrics from several PostScript files are all included in one OpenType file. Mac and PC Compatible What’s Inside?

Beautiful web type — the best typefaces from the Google web fonts directory Lucius Annaeus Seneca60 AD Among the numerous faults of those who pass their lives recklessly and without due reflexion, my good friend Liberalis, I should say that there is hardly any one so hurtful to society as this, that we neither know how to bestow or how to receive a benefit. It follows from this that benefits are badly invested, and become bad debts: in these cases it is too late to complain of their not being returned, for they were thrown away when we bestowed them. FFFFALLBACK - A simple tool for bulletproof web typography. Startups, This Is How Design Works – by Wells Riley iOS Fonts Google Visual Assets Guidelines - Part 1 on Behance Google’s brand is shaped in many ways; one of which is through maintaining the visual coherence of our visual assets. In January 2012, expanding on the new iconography style started by Creative Lab, we began creating this solid, yet flexible, set of guidelines that have been helping Google’s designers and vendors to produce high quality work that helps strengthen Google’s identity. What you see here is a visual summary of the guidelines, divided into two Behance projects: Google design style: Executive Creative Director: Chris Wiggins Graphic Designers: Jesse Kaczmarek, Nicholas Jitkoff, Jonathan Lee, Andy Gugel, Alex Griendling, Christopher Bettig, Jefferson Cheng, Roger Oddone, Yan Yan, Zachary Gibson Guideline design: Art Director / Team Manager: Christopher BettigSenior Graphic Designer / Project lead: Roger OddoneDesigners: Alex Griendling, Christopher Bettig, Jefferson Cheng, Roger Oddone, Yan Yan, Zachary GibsonContributors: Web Studio, Brand Team, Creative Lab

Responsive Layouts, Responsively Wireframed Responsive layouts, responsively wireframed Made with HTML/CSS (no images, no JS*) this is a simple interactive experiment with responsive design techniques. Use the buttons top-right to toggle between desktop and mobile layouts. Using simple layout wireframes, this illustrates how a series of pages could work across these different devices, by simulating how the layout of each page would change responsively, to suit the context. Responsive layouts? Producing static wireframes to design layouts for websites, web applications and user-interfaces has worked well for a long time. However, this solution creates a new problem: How should we go about the process of designing these variable layouts? Enter, responsive wireframes? The 'wireframes' on this page (which are only very simple, high-level examples) were created with HTML/CSS, and some argue that this is the answer; to design in the browser. So which is better? Traditional wireframes? HTML? So, what's the answer? Just wondering...

Adapting To A Responsive Design (Case Study) Advertisement This is the story of what we learned during a redesign for our most demanding client — ourselves! In this article, I will explain, from our own experience of refreshing our agency website, why we abandoned a separate mobile website and will review our process of creating a new responsive design. At Cyber-Duck, we have been designing both responsive websites and adaptive mobile websites for several years now. Why Adapt To A Responsive Design? Our redesign story starts in August 2012. We used jQuery Mobile to create our previous mobile-optimized website as a quick fix for the increasing number of mobile users on our ageing desktop website. We produced our tablet and mobile websites specifically with users of these devices in mind — performance was our top priority. Changing Our Approach Despite this, several factors led us to decide that this approach was no longer sustainable for our own website: The first two were not ideal, but at least manageable. Third-Party Scripts The CSS: