Figma’s Config 2024 was a crazy adventure. Moscone was packed with even more designers (12k?) than last year who were looking to get the scoop on new features, make connections with others, and get inspired by the range of great speakers. ...
Figma’s Config 2024 was a crazy adventure. Moscone was packed with even more designers (12k?) than last year who were looking to get the scoop on new features, make connections with others, and get inspired by the range of great speakers. ...
Designing a soundscape As electric and hybrid vehicles have become more ubiquitous, I have noticed the sounds coming from them. Walking around our neighborhood grade school became a study of EVs and their drivers. ...
Kill the Date of Birth dropdown! I always cringe when I see a birth date (DOB) input using multiple dropdowns for day/month/year. It’s just lazy design and perpetuates poor experiences. Join my crusade to stop this tragic design crime from living another day (pun intended)! We have so many options for inputs that are far better for sharing dates like these. ...
I had the opportunity to attend the Design Systems Leadership Summit by Knapsack in San Francisco. It was a great event with great conversations in a beautiful location. ...
Tada!🎉 Figma just announced the release of Typography Variables at their Framework event. Design systems (DS) specialists have been waiting for this ever since they announced variables as their exciting new token feature at last year’s Config conference. Sitting in that massive audience at Moscone Center, I knew variables would be a huge deal for DS teams like mine, but it was missing a key piece of the puzzle without support for type. We heard it was coming and our patience has finally paid off. ...
So with my extra time after the layoff, I decided to try out the device everyone is talking about, the Apple Vision Pro. This new spatial computer has gotten so much attention from tech media before and after its official release. To catch up, watch a review from MKBHD or laugh at Casey wearing it around NYC. Hot takes! Here are my first impressions of the user experience of Apple Vision Pro. ...
I’ve followed Dan Mall’s work for a long time and I’ve enjoyed watching him share and teach what he’s learned about design systems. When I saw he was working on a book, I knew it would be filled with super smart guidance for design systems teams. ...
Building experiences that work well for a diverse range of customers is a key part of living out our values of inclusion at PayPal. Accessibility is the label for all the work we do to build inclusive experiences. It’s a huge topic to explore in UX design and design systems but lets focus on some tangible strategies I use in my daily work. ...
It seems like I just shared my recap of mentoring in 2022 but now it’s time to reflect on 2023. Mentoring on ADPlist.org I had another great year mentoring designers on ADPlist.org. I met with a wide range of folks from experienced pros to students just entering design profession. As the job market was constrained lots of our time was focused on how to break into the industry. I don’t have an easy answer. I think it’s a mix of endurance, demonstrating skill, and making personal connections. As the market changes, we need to be nimble and creative in how we find work. ...
Note: This article was adapted from my talk at GOV.UK Design System Day on October 11th 2023. Full slides on Figma with illustrations by Blush. A collaboration journey Like many types of projects, the creation of a design system has a story arc embedded in it. First we define what we want to make, who its for and plan the goals. Next we kickoff an exciting startup phase to craft initial patterns and components. This leads to influencing teams and leaders so we can gain traction and garner support to continue growing. Soon an unexpected crisis appears, an outside influence forces a decision about how your system operates. Once you conquer that hiccup, you hit your stride in scaling and enhancing. There is not really a last step, lets call it ‘not the end’, because you are in this for the long term. Don’t expect to reach a place where the work is complete, it should continue to flex and evolve over time. At each stage in this journey you are making decisions that can improve collaboration with your community of people. ...
Video, slides and notes from my talk at ADPList.org’s BeMore Conference on September 20th, 2023 Video: ...
Don’t be trapped by the allure of the slider. What’s a slider? Sliders in UI were inspired by physical hardware controls. Soundboards often include sliders for controlling the volume of each audio channel. The board’s user can make adjustments by moving the slider within a limited range, such as 0 to 100%. Let’s translate this idea to software. ...
I had a great time at Figma’s annual Config conference June 21-22, 2023. This year it was huge! 8k+ fans at Moscone Center San Francisco and many more watching virtually. ...
User & System User Experience/User Interface design is about making a system (device/application) as usable for the user (human, customer) as possible. User is in the name! So why do we often forget that part? We end up designing for the system instead, to the harm of the user. ...
The Giant Dipper, by Daniel J. Schwarz via Unsplash There is a famous wooden roller coaster, The Giant Dipper, built-in 1924 at Santa Cruz Beach Boardwalk that still entertains visitors today. The classic up-and-down action is enough to thrill you every time. Like this roller coaster, there are many ups and downs in building a design system at a corporate scale. ...
Mentoring on ADPlist.org I had a great year mentoring designers on ADPlist.org and I’m looking forward to meeting even more in 2023🥳. One of the highlights was getting the chance to speak at their BeMore conference last fall. It’s so rewarding to connect with folks around the world while chatting about UX careers, design systems, accessibility, inclusion, and life in general. The learning goes both ways. I’ve even used other mentors as my mentor on specialized topics. ...
My first podcast! I had to jump on here during my Thanksgiving break 🦃 to share some fun news… I’m the guest on the latest episode of the Research Lab Podcast by SundayPyjamas with Nishi Panchal. ...
Clarity Conference 2022 This year I attended Clarity Conference, the premier design system conference, virtually along with my PayPal teammate Silvia Recinos. I’ve captured my favorite lessons from two days full of great design systems knowledge. ...
Conference speaking recap: BeMore 2022 Mentoring Builds Leadership Skills I had a great time talking about “Why Mentoring Builds Good Leadership Skills” with the panel at ADPList.org’s BeMore Festival 2022. ...
Tech Gone Wrong Attention tech workers, innovators, computer nerds! We’ve all enjoyed the spoils of this booming industry we love so much, but I have bad news…tech has gone wrong. ...
I love sharing good design news and articles with my design friends and colleagues. Ask anyone in our slack channel, hah. Where do I get all these great links? Well, I consume a lot of stuff, maybe too much. I’m jumping between Slack groups full of designers, email newsletters that curate links and Medium articles on anything design. Let me share my sources… ...
Poster by Ben Barry Hack has become the buzzword mantra in the valley. It symbolizes the scrappy working style of a startup trying to build something new with very little time or resources. Startups may hack out of necessity, but now big companies can hack too. ...
As a designer, I love patterns. From nature to technology, they make the world go ‘round. UX Design teams collect patterns in different forms, from style guides to design wikis to sticker sheets, they all aim to unify the work of a group of people. ...
I love exploring new avenues for creativity. After years of working on stationary pixels it was great to play with some moving pixels for a change. I just completed a video project. Here is the story… ...
Creative people often have a story to tell about the adventurous path they took from where they started to where they ended up. I love hearing them describe their unique adventure, with its ups, downs, and surprises. ...
Thinking about the design process for a set of icons I’m working on, I realized it felt very familiar. Icons are a great analogy for design as a whole. A good icon is simple, clear, and almost obvious. A good icon hides the effort and skill that led to its existence. A good icon doesn’t make you think. A good icon spans context and culture. Ditto for UI/UX/interaction/web/app/logo/branding/product/etc design. ...
##TL;DR Mobile apps are fun. I got to design my first one. Prototyping is essential. Mr. Developer is your friend. Go download it. ...
A year ago I stood up. I hacked together a standup desk using cheap parts and a little imagination. I was determined to avoid the detriments of a sedentary work life. The quickest way to try this new work style was to follow one of many Ikea hacks. For hardly any money, I was able to combine parts that worked for my wide, side-by-side MacBook Pro and Thunderbolt Display setup. I kept part of my cube as normal so I can still switch to a sit down position occasionally, but my primary standing spot has been working great. For extra comfort, a gel mat softens the floor. I transitioned gradually, but now standing is normal and sitting is the exception. I’m a better worker. Standing doesn’t eliminate procrastination and distraction, but to some degree I feel more alert and focused than when I sat. There must be a connection between an active body and active mind. Even if the health benefit turns out to be hyped, standing has subtly encouraged me to move more than before. I move positions as I stand, I move around my group and the office more, I interact with my team. These simple changes benefit my mood, health and productivity. It may be a small change in the grand scheme of things, but little things add up. So stop sitting. Learn why sitting hurts Check out the inspirational hack Don’t forget an anti-fatigue mat Kickstart an affordable sit/stand desk Take it to another level with a treadmill ...
Working on a native app project has allowed me to experiment with new design tools. Here are a few of my favorites: LiveView lets you display anything from your Mac onto your iPhone/iPad. You simply overlay a window frame on your design file and boom your design is projected on your device screen. This is great for visual tests like font size, touch target sizes, and color contrast. I’ve used it for responsive design projects as well. Skala Preview is similar to LiveView but instead of using a window frame, it connects to Photoshop directly to mirror your file onto the device. It supports Android and iOS. Flinto is a great app for making a super quick interactive prototype from your wireframes. You just add your image files and then easily add hot spots for navigation, select transitions and setup fixed headers/footers. It works on iOS/Android phones/tablets and is amazingly intuitive to use. The benefits of seeing your early design concepts on the device, with realistic interaction are huge. It enables better user flow, navigation and interaction decisions at the beginning of a project, instead of waiting for dev to make it real and then discovering issues. ...
I’ve been working on focus. We live in a world of distractions and it’s way too easy to lose time to things that are in front of us instead of what’s a real priority. Smart devices have multiplied and so have their power to get our attention. Each notification is a clever pull for your attention. You have new messages, you have an appointment tomorrow, someone likes something. Sure it’s great to be informed, but it’s killing my focus. Why am I acting like each notification is a critical situation requiring my immediate and full attention? Instead of responding to a text/email/im/whatever, I should be considering its priority and dealing with it at the right time. If I immediately respond, I’m moving it to the top of my list. Is it more important than what I was doing? Sometimes it may be, but most of the time it’s just a distraction. I owe my friends/family/employer better focus. So, I’m striving to be disciplined instead of distracted. ...
I recently attended Designers+Geeks, at Yelp HQ in SF, and took some notes on LukeW's great talk, It's a Write/Read Mobile Multi-Device Web. I had soaked up lots of knowledge from Luke at AEA SF back in 2011 so this time expected lots of similar charts on the growth of mobile device usage, and he delivered. If you need to make a case for mobile to reluctant stakeholders, check out his site for loads of powerful data. My notes here are on the rest of his talk. Top sites (by time spent in the US) are all write/read experiences (Facebook, Aol, Yahoo, Google, Youtube) They require users reading/writing to work. Ex. What is Facebook without people posting? They are now all mobile: Facebook 78% mobile. They’ve had flat growth on desktop but huge growth on mobile. Twitter 75% mobile. They had a "Mobile moment" when the balance shifted from more desktop to more mobile use. Mobile is not just about consumption, creation is booming. Mobile used to be mostly entertainment but now real tasks are done on mobile. One hand use Input: Keep the keyboard away until necessary Smart defaults and smart suggestions/guesses Don't just shrink desktop UI patterns, actually design for the one thumb use case Focused flows Tim Cook: “Creativity is not a process. It’s people who care enough to keep thinking about something until they find the simplest way to do it. They keep thinking about something until they find the best way to do it." But simplicity is not easy. It takes a lot of work to go small. Paradigm shift: Hotel Tonight simplified booking a hotel (on an app) to 8 sec. It’s competitor Hotels.com takes 108 sec to book. Hotel Tonight's CEO says this simplicity is their competitive advantage. Just-in-time actions Josh Clark: We learn in the moment Wrong approach: the instructional intro screen It’s skipped or forgotten by the time the user needs help. Instead teach in the moment Actions can be in the moment as well: surface UI only when needed Ex. G+ app feed - header/footer toolbars hide when you’re scrolling, then reappear when you pause at a post. Content actions - Asking the user to do something (ex. find friends) from within the flow of the app instead of adding another menu item. After checking in to a location on Foursquare, they ask you to leave a tip for other users. It’s shown just in time, instead of adding another button in the toolbar for tips. Don't get in people's way Multi Device World Sequential and simultaneous use between devices Synced place holding - ex. kindle or Chrome Use each device for what it's good for Control: use one device to control another Your TV is not good for input, design so that connected mobile devices can control it. Push: ex. Ebay’s desktop site connects to their mobile app so you can use your phone camera to capture photos instead of the arduous task of using a traditional digital camera and transferring the images. ...
I just spent two days watching users pick apart my precious design concept. I've had better nightmares. As a designer it’s easy to make assumptions, since that is part of our job, but when real user behavior doesn't agree, it’s time to let go of your precious and pay attention! Getting real user feedback, formal or guerilla, is critical to my success as a UX designer, but it’s hard. It’s much easier to dig into design software and spend far too long tweaking details in isolation. Even a brilliant, collaborative team can lose track of actual user motivation and behavior. Ignorance is bliss? Bliss will flee when the project explodes on the launchpad. So, don't forget the U in UX. Test early and often for best results. Next up: Fixing everything those heartless perfect little users didn’t love. ...
Ok, that title may sound like link bait but this topic needs just one more opinion. You may have heard about this year’s most polarizing design topic: the shift from “skeuomorphic” to “flat” design in the latest version of iOS. Like many designers, I’m an Apple devotee and like many designers, I have admired recent so-called ‘flat’ interfaces from competitors and was hoping Apple would make a big splash with this version of iOS. I upgraded to the iPhone 5s, from a 4s, and have lived with iOS 7 for a few weeks. I have some thoughts: Skeuomorphic design is misunderstood. It’s characterized by visual treatments like faux leather and woodgrain but thats only the visual style aspect, at it’s roots skeuomorphism is about creating interfaces that reference real world patterns. A simple example is an icon of an analog clock. Modern devices have no requirement to represent time using this ancient pattern from the physical realm, but because it’s so ubiquitous, it’s the perfect symbol for anything time related. The physical symbol makes the perfect digital symbol. Over time Apple, and others, took this successful principle and went too far toward replicating realistic visual treatments. Does a calendar app function better when it visually mimics the one that used to be on your desk, replete with paper textures and torn edges? I don’t think so. As a reaction and to differentiate competitors choose a different approach that contrasts this visual style with something called flat design. Flat design, although often contrasted with skeuomorphic design, is not a its true opposite. Flat design is a reactive style that favors simplicity over embellishment, but it doesn't eliminate references to the physical realm. Instead of using detailed textures and elaborate shadows, it relies on simple graphic elements of color, grid, and typography to convey meaning to the user. My take is that iOS 7 is both skeuomorphic and flat. The big news was that Apple made a dramatic switch. Yes, the overwrought textures are gone (with a few exceptions) but the untold story is that many realistic symbols remain. The clock icon is still analog. The calendar app still uses the familiar grids established long ago to layout years, months, and weeks. The container where your email goes is still called the inbox. These are skeumorphs of the real world, yet they can be used without the corresponding visual style, as evidenced in iOS 7. So everyone calm down and find something new to debate. Skeuomorphic and flat design can get along just fine. ...
A discussion about simple interfaces with Brian Anderson and Tyler Bell got me thinking. So I jumped on Editorially and started typing this post. Editorially is an example of a new breed of software where the interface isn’t in-your-face (see what I did there?). It’s designed to let your content be the focus while providing a refined set of features, available when you need them, instead of the usual heap of icons lumped in ribbons and tabs. This philosophy is also evident in IA Writer, Ghost, and Medium. Sure, you can’t use these to mail-merge, but when you want to write, they let you. Simplicity is a beautiful thing. Then I thought about more complex tasks. Do we lose the efficiency which these narrow focused tools provide when you end up having to use four simple tools to replace one broad one? Of course I don’t want one tool that does everything. The thought of a Pages-Photoshop-Espresso-CodeKit-Terminal-Chrome mutant makes me seasick. So what’s the optimal balance? Can we hope for a future of few, focused apps or will we cycle back toward the comfort of bloated suites? Now I will publish this using Wordpress, an example of software that does too much, except when you need that one extra feature. UPDATE: 2/19/14 - I moved this blog from wordpress to Jekyll, an example of a simple web platform. ...
Podcasting seems to be in a phase of growth. Suddenly there are dozens of good shows about the web and creative industries. It's not a new medium so maybe the growth has been more steady and I hadn't noticed until now but I'm loving the results. I grew up with talk radio on around the house which I think gave me a special interest in listening to a good conversation. I love good music but I seem to crave podcasts more than tunes these days; call me weird. I love being able to learn something new about a design legend or discovering how the creators of a hot new app built an idea from scratch, all while driving my short commute. I end up educated, inspired, and entertained. It's a great way to bookend the workday. So without further adieu, here are my current favorites: 99% Invisible I love this show so much that each episode seems too short. Where else am I going to learn about the guy who created the area code, an otherworldly pavilion that attract teenagers at night, or where jay walkers got their name. If all public radio was this good, we wouldn't be debating budgets, people would gladly pay to hear it. 99percentinvisible.org | iTunes Happy Monday There is no better way to start your Monday than with a short burst of inspiration from Josh Long and Sarah Parmenter and their guests. happymondaypodcast.com | iTunes Execute Jealous of those people who think of a product idea and then just make it happen? It doesn't take special powers, just read Execute and then listen to the Execute podcast and you'll be that person in no time. Maybe I should execute my own podcast. Execute theindustry.cc | iTunes The Big Web Show As the Godfather of the Web, Jeffery Zeldman can get an interview with anyone. I met "Mr Ziggy" once and although his stature is small, his knowledge is larger than life. I took a picture if you want to see it. :) The Big Web Show | Archives on 5by5 | iTunes Design Matters Debbie Milman has been interviewing influencers in art and design for years. Check the archives for a design education by ear. observermedia.designobserver.com | iTunes Foundation I keep up with hat's hot in the startup culture that surrounds me here in Silicon Valley via Kevin Rose. foundation.kr | iTunes The Gently Mad Another quality design interview show that is new to my list. Adam Clark brings a fresh approach to the interview format. thegentlymad.com | iTunes Origin Story This is different take on the interview format, asking the guest to start from childhood and work toward the present. The lesson is you can overcome anything with passion. unitedpixelworkers.com | iTunes The Businessology Show Dan Mall and Jason Blumer get into the nitty gritty of running a creative business. Don't miss episode 4 on value pricing, it changed my mindset on client work completely. That topic deserves it's own blog post. In the meantime, read this. businessologyshow.biz | iTunes RadioLab This ones not design specific but it's a great source for learning something new. radiolab.org | iTunes Pixel Recess I don't know what's going on here but I'm hooked. Just try a little bit. pixelrecess.com | iTunes Start Listening So start listening. I will update this as I find new favorites. Let me know what you discover in the comments. Updates: 9/24/13 The Big Web Show has moved to Mule Radio. ...
Design is a chameleon and I love it. One day design is a piece of paper with text, a moment later design is an ephemeral atmospheric expression. There is so much in the world that craves thoughtful arrangement that the need for design is endless and dynamic. My niche of design is especially volatile. The web changes every second, and as the technologies evolve so must the designer. This forces designers to be excellent at adapting, ready to jump on an idea before we really know what’s involved. Frank reminded me of this today: I learned to make websites because I agreed to do something that I didn’t know how to do and then I had to figure out how to do it. That seems to be a pattern…because nobody knows how to do what was invented last week. You have to say you know how, then figure it out under the gun. - Frank Chimero via The Great Discontent ...
The facts Icon fonts are simply fonts that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters. Icon fonts are like dingbat fonts, but are designed specifically for UIs. Icon fonts, like other web fonts, use the CSS @font-face rule to display icons in web browsers. (Wikipedia) Advantages Resolution Agnostic: Crisp at any resolution, even Retina Simple Styling: Edit the styling easily with CSS (color, size, gradient, shadow). Styling can even adjust on the fly. Great Performance: Smaller file than image sprites, good for mobile Cross-browser support (even IE) Details Demo by CSS-Tricks.com Examples from Font Awesome Icon Font Sources General Icon Fonts Modern Pictograms Entypo (also available in vector) Tipogram (also available in vector) Sosa Pulsar Raphaël Iconic Customizable Icon Font Sets Shifticons Build your own icon font from a variety of authors Pictos Build your own icon font Fontello Build your own icon font from several different libraries IcoMoon Build your own icon font and add your own icons Icon Fonts for Frameworks Font Awesome Icon font for Twitter Bootstrap (or other sites) Foundation Icons Icon font for Zurb Foundation Build your own from scratch The Making of Oticons Glyphs Font Software Variant: Symbol Fonts Symbolset More info: Collection of links from Trent Walton Should I use Icon Fonts? Would you enjoy these benefits? Resolution Agnostic: Crisp at any resolution, even Retina Simple Styling: Edit the styling easily with CSS (color, size, gradient, shadow). Styling can even adjust on the fly. Great Performance: Smaller file than image sprites, good for mobile Cross-browser support (even IE) Details Can you overcome these challenges? Limited icon icon set: Will a pre arranged set of icons cover your needs or will you need to create your own custom font? Not willing to be limited? Try using a stock set with a few custom additions, via IcoMoon. If your design requires multiple color icons, icon fonts may not work. Continue using traditional methods, such as image sprites. Work-around for multi-color icons: Joel Gillman demonstrates how to stack several icon pieces together. Get Going The great thing about the web is that it's so easy to try out new ideas like this. You can quickly this feature onto your site and see it action. Go on, try it out! ...
This is part of a series of posts summarizing my notes from the extraordinary conference An Event Apart, held December 12-14, 2011 at The Palace Hotel in San Francisco. With Great Power Comes Great Responsibility @elliotjaystocks Designer, Author Description Recent developments in web technologies like HTML5 and CSS3 have allowed us to build a richer web, full of advanced visual treatments like web fonts, animations, transformations, and drop-shadows. But have we got carried away with our new toys? Just because we can use a drop-shadow doesn’t mean we have to. In this new and often controversial talk, Elliot looks at solid design principles that will turn a good website into a great website, examines the scenarios where it’s better to stay away from unnecessary visual effects, and attempts to find the sweet spot in between the two extremes. “With great power comes great responsibility,” said Uncle Ben, and Spidey hadn’t even used border-radius! Notes Introduction Don't always focus on the latest tech, tools and trends. While useful, they don't automatically make good design. *So much good stuff out there...* Nike Better World Webkit clock Nizo for iPhone *... and so much bad stuff, too* Destroy the Web 2.0 look Designers jumped on the trend for image gradients, gloss, rounded corners, etc. to make things look "real" Attention to detail is much more important than visual trends Distraction of the "Real" Grunge textures, post-it notes, coffee stains, wooden backgrounds, ect. Wrong 3d effects - impossible shadows, gradients, texture, backgrounds Styling effects hiding bad basic design - grid, typography, composition *Dan Norman's Affordances and Design* What the designer cares about is whether the user perceives that some action is possible (or in the case of perceived non-affordances, not possible). In product design...there can be both real and perceived affordances, and the two need not be the same. In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances. Real and perceived affordances communicate interaction. Ex. If you are designing to look 3d, get it right. Otherwise people expect behaviors that don't exist in your design. Consider the context when deciding to make something look like a real-world object. (neg ex. Address Book on Lion) Typography is (Almost) Everything 8 Faces - You only need a small number of fonts to do a lot. Learning from Print Design Try print work to inspire design principles on the web Working from the type outwards, allows you to focus on content first. Tim Brown: More perfect Typography Typograph: Scale & Rhythm Typecastapp Typography details make a much bigger impact on design than visual effects. If 2010 was the webfont's incunabula, then it looks as though 2011 will mark its coming of age. -John Boardley Type has made strides recently, but there is still work to be done to make them look great everywhere. It's a Journey Get inspired Go outside, read books, look outside the web Don't limit yourself to web galleries of other people's work The latest tech wont make you a better designer, outside inspiration will. Constant journey of learning Trying Failing Trying Again Use new power responsibly New tools are amazing, use them wisely With Great Power Comes Great Responsibility. Act Accordingly. ...
This is part of a series of posts summarizing my notes from the extraordinary conference An Event Apart, held December 12-14, 2011 at The Palace Hotel in San Francisco. Alexa Andrzejewski Founder - Foodspotting Description Good designs are useful, usable and desirable. But what is a good experience? While crafting the experience of her own startup, Foodspotting, Alexa Andrzejewski found answers in urban design. Asking the same question about urban experiences, Kevin Lynch, author of “Good City Form,” extracted a set of dimensions for evaluating experiences. By applying these principles to interactive experiences, you can identify what kind of experience you’re creating for users: Is it adaptable? Does it tell a story? Are there signs of life? You’ll leave with a set of guidelines that, unlike traditional heuristics, will enable you to evaluate the experiential qualities of your designs. Quotes There are no stupid users, only stupid interaction designers. Notes Learning from Urban Design Learning from cities - urban landscape experience Principles from urban design can give us new ways at looking at our mobile and web designs. Source: Kevin Lynch, Good City Form Example - Transparency - open vs private We know hot to evaluate usability, but how do we evaluate experiences? Sense of Meaning Does it tell a story? How does it reflect values? Can users read the environment? Urban example: Visual cues Digital example: Foodspotting Homepage What story do you want to tell and how can you use the language of design to communicate it? How is your information architecture structured to support the story? Sense of Place Does it leave an impression on the senses? Is it memorable? Urban example: distinct neighborhoods Sensory experiences are memorable Smell, see, hear <=> visuals, video, sound, copy writing - all contribute to a user's memory of a site This helps attract a different kind of user (through the design). Focus on key moments to make memorable. What moments do you want users to remember and how can you make them memorable? Show a new user a homepage and ask if they understand the value of the service - how well are you communicating? Digital example: tubmlr,scoutmob Sense of Structure Can you wrap your mind around the structure? Does the design yield accurate mental maps? When things fit together, you feel in control and the sense of place is integrated. Urban example: subway system Digital example:Path App If you look at a page or screen in isolation, is it evident where it fits into the bigger picture? Are their visual clues that can orient you? Ask users to sketch a map. Sense of Unfolding Does it get better the more you explore? Is the first time experience tempered so as not to be overwhelming? A good place is one that gets better as you explore. Urban Example: Big plazas, small alleys Digital Example: Foodily Adds features, as user increases usage What is the #1 thing you want people to do on their first visit? Their second? Their third? Can you unlock features as you explore the app/site? Sense of Transparency Can you see signs of life on the inside from the outside? Urban Example: Fish market - seeing where restaurants get their food, Sidewalk cafe's - open to public view Digital Example: Pinterest What activities do you want users to engage in? Are people able to learn by example? Can people help each other learn how to use things? Different communities value different amounts of transparency. Design the level of transparency to fit your audience. Fit Does the design of a place anticipate and facilitate people's desired actions so seamlessly that it makes you feel competent and smart? Urban Example: Staircase directional signs, bike ramp Digital Example: Hashable contact sharing interaction starts with just an email or twitter username Observe user behavior and ask user questions: Is there any evidence of misfit? Where are people abandoning? Adaptability Can users modify or adapt the structure to increase fit? Build things open-ended and learn from real behaviors. Urban Example: Adhoc parks and meeting spots Digital Example: hacked facebook and twitter profile pages Have you noticed any surprising adaptions or workarounds in how users interact with your site or app? What can you learn form them? Observe what your users are doing, then learn form their adaptions. Can you support them? (paving cow paths) Access How much and what range of choices are presented to a user at a given time? Is it too many or too few? Urban Example: Subway Stations Digital Example: Fab Curated, temporary selection of products. Compare with everything possible on Amazon. When are users presented with palettes of choices? Are there any choices you could take away? A/B test fewer choices, see how behavior changes. Responsibility Do the users of a place feel a sense of ownership and responsibility for the experience? Engage your users to help manage content. Urban Example: Community gardens Digital Example: Gowalla spot fixer, Facebook comments, Quora reputation Real names, reputations produce good behavior. How can you increase users' sense of responsibility? Certainty Can people trust in the system of control? Does the environment act in predicable ways? (Especially when they are not in control) Urban Example: Transit Information Digital Example: Mint What are the most anxiety-introducing moments in your site or app? What sights/sounds/interactions could reduce this anxiety? Reassure users, build confidence in your product. Use these as a tool Evaluate your experiences with these lenses and learn from the results. Sense of Meaning: Does the design tell a story? Sense of Place: Is it memorable or are there memorable moments? Sense of Structure: Can you tell how the pieces and parts fit together? Sense of Unfolding: Are options revealed over time vs. thrown at users all at once? Sense of Transparency: Can you observe and learn by observation? Fit: Does it make people feel competent? Is there any evidence of misfit? Adaptability: Can it be repurposed in novel ways? Access: Are people confronted with the right number of choices at the right time? Responsibility: Do people feel ownership of the experience? Certainty: Can people trust in the system? Now go forth and create great experiences! ...
This is part of a series of posts summarizing my notes from the extraordinary conference An Event Apart, held December 12-14, 2011 at The Palace Hotel in San Francisco. Design Principles Jeremy Keith - Author Description All software is inherently political, reflecting the biases and beliefs of the people behind it. These beliefs can be made explicit through the publication of design principles: pragmatic rules of thumb that underpin a shared endeavor. Find out how important good design principles are to any project, whether it’s a website, a framework, or the World Wide Web itself. Quotes Design Principle: Be conservative in what you send and liberal in what you accept (ex. forgiving input forms) HTML5 degradation is like Inception in your browser. Design principles are not about pleasing everybody. Pick a side and plant your flag. Notes Design Principles *Principles, Goals, and Patterns* * Design Principles are the tenets for a project. They help create consensus, determine the best approach to a problem. ** Design Goals -> Why? ** Design Principles -> How? ** Design Patterns -> What? ** These influence each other Pretty much any endeavor in human history has had this pattern of design goals, principles, and patterns. ** You can't prevent your philosophies from showing in your work. Software, like all technologies, is inherently political. Code inevitably reflects the choices, biases and desires of its creators. -Jamais Cascio Web & Design Principles * Emergent design principles of the web: Rough consensus and running code * The Web is agreement, bottom-up effort * CSS core pattern selector {property:value;} ** fail proof - skips unknown elements * Principle: fault tolerant behavior, allows evolution of patterns Be conservative in what you send and liberal in what you accept. HTML5 & Design Principles * Compatibility, utility, interoperability * Browser graceful degradation allows quick adoption of new features * Input types - hints mobile browsers to use keyboard types * Browser Goal: Backward compatibility * Design Principle: Progressive enhancement (connected to graceful degradation) * Ex: HTML5 Video - video tag can contain code to a flash movie as a fallback. Levels of fallback in html5 is like inception in your browser *Javascript & Design Principles* * Metcalf's law bq. The value of a network is proportional to the square of the number of connected users in the system. * Javasrcript is everywhere. Competitors fight Metcalf's law. * Unobtrusive Javascript: chose a framework based on philosophy * Jquery: find stuff, do stuff to it. ** ex: star rating input actually a form selector instead of links. Selector is transformed into linked starts with js. ** Look for fundamental task ** Look at anti-patterns. * Principles can be informed by goals that are malicious. You can develop designs that are likewise malicious. ** ex: Rynair used a cookie to double the fair price on a return visit. * Not about pleasing everyone Big picture Principles * Goals lead down to principles; principles lead down to patterns. * Fewer principles help focus the task. * Pareto Principle. Design for the 80% ** Instead of solving for everything, aim for the bigger group * Support universal access - principles that bring life to websites that work across all devices. For more info, see Design Principles. ...
This is the first in a series of posts summarizing my notes from the extraordinary conference An Event Apart, held December 12-14, 2011 at The Palace Hotel in San Francisco. Jeffery Zeldman: Legendary Web Standards Guru, @zeldman, Zeldman.com, Author: Designing with Web Standards, Co-Founder: An Event Apart, Founder: Happy Cogg, Founder: A List Apart, Publisher: A Book Apart. Description The rules of design engagement are changing. You may no longer be in control of the user’s visual experience. Learn the number one job of every web designer, how to persuade clients and bosses not to subject users to dark patterns, why the days of “Best Viewed With…” are finally behind us, and how a mobile (or small screen) strategy can help you improve your content, rethink your web experience, and put the user first. Quotes Design that does not serve people does not serve business. Responsive design is progressive enhancement taken to the next level Content is a design problem Design in the absence of Content is not Design, it's decoration Notes Content is a design problem Sites are often hostile to content Plan for contingencies, overall ux Often an afterthought to relates links, seo, nav, etc We can't control the display We've been in a consensual hallucination that designers control the display. The days of "Best viewed with.." are over Your content will live outside your precise design, if it's not readable, users will find a way ex: Instapaper/Readability/Flipbook, accessibility tools (screen reader, text zoom) Users fitting content they way they want to experience it (time, style) What's the designers job then? Still to server the customer User experience design not designer experience Design that doesn't server people doesn't serve business! Don't spam users, don't create misleading interfaces, no tricks Content BEFORE design Design without content is decoration How do you make a cake if you don't know if its for a wedding or a funeral Design succeeds when it supports the content, Solutions Progressive Enhancement & Responsive Web Design PE is a universal smart default. Adaptive Web Design by Aaron Gustafson and Responsive Web Design by Ethan Marcotte Today's web has many devices with many ways to interact with content RWD is PE taken to the next level. Layouts adapt to devices. Fluid grids, flexible media, media queries are just one way to implement the idea. Responsive sites react to the needs of the user through screen size and other contingencies RWD is small screen design vs. a mobile strategy e by Luke W Content Strategy: What did they come here for? Get rid of the rest Half our users are on a mobile browser Mobile browsers are advanced, webkit/HTML5/CSS3 Limited screen size and utility force us to put user needs first. Explore your existing search activity to see what users are looking for. Users expect and accept a different experience on mobile. Typical workflow vs. Content First workflow. Existing workflow is backwards, leaving content till the end. We should start with and experience and content strategy instead of a turf battle over technology and features. The result is better content, and design tailored to that content. ...
Backstory Fonts on the web have been limited by licensing restrictions setup for the print era by the font foundries who create them. Only a few limiting choices have been available to designers, while print licenced fonts remained untouchable (except in images/flash). As a result, we've been working in the "web safe" range of fonts, Times, Arial, Georgia, etc. The work around was using other fonts in images, wich comes at the cost of site speed, SEO, and flexibility. Breakthroughs Several solutions have emerged that allow a great variety of fonts to be legally used on the web. Open licenses Free unlimited use Limited options Doesn’t $upport typographers Sources: The League of Moveable Type Google Webfonts Font Squirrel Middlemen Services They worry about the licensing Huge selection Simplifies the compatibility mess Fixed Fee or Subscription cost Services: Typekit Free/Paid Subscription ($0-100/year) Provides a wide selection of fonts, including Adobe's library. Fontspring One-time fee ($0-50 per font), unlimited use. WebType Free Trial, Paid Subscription ($10-100/year) Fonts.com Free or paid subscription ($10-100/year) Also provides a local copy for your mockups. Font Deck Free trial, Pay per font, per year ($7.50 average) For even more options, visit this great comparison by Sylvia Egger How to use @font-face This simple CSS rule references the font file. Modify size, weight, color, line-height, shadow, etc. The font stack allows fallback to safe fonts in browsers without support. Example CSS: @font-face { font-family: yourfontname; src: url(http://www.yourfontfile); } p { font-family: yourfontname, Helvetica, Arial, sans-serif; } @font-face is supported by these browsers (and newer versions): Internet Explorer 5 Firefox 3.5 Safari 3.1 Chrome 4.0.249.4 Opera 10.54 (Windows & Mac OS) iPad and iPhone iOS 3.1 @font-face file types vary by browser: Internet Explorer only supports EOT Mozilla browsers support OTF and TTF Safari and Opera support OTF, TTF and SVG Chrome supports TTF and SVG. Services deliver the correct files for each browser, no mess. If you host your own, you'll need some help: http://www.fontsquirrel.com/fontface/generator http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ http://ffffallback.com/ So, that all sound great, but what does it look like? Check out these fonts in action: http://typekit.com/about Typekit's own website showcases some great fonts http://www.onyourwayhere.com/ http://lostworldsfairs.com/ A really fun demo of various fonts. http://www.kiva.org/ http://weareelixir.com/ http://carletondesign.com/ (This site uses typekit) http://forabeautifulweb.com/ http://www.webfontsgallery.com/ http://www.webfontawards.com/ Even more info: Zeldman.com: My Love Hate Affair with Typekit The Big Web Show: Web Fonts Font Face Tutorials Web Typography Web Font Services So, what are you waiting for? Go explore the new world of real fonts on the web! ...
I hardly shout at all, but I have to make an exception. GET THIS BOOK!!!!!! Seriously! Rework, by Jason Fried and David Heinemeier Hansson is a must-read. I won't try to summarize it, you need to experience every word. I will note some of my favorite parts: "Workaholics aren’t heroes. They don’t save the day, they just use it up. The real hero is already home because she figured out a faster way to get things done." "Working without a plan may seem scary. But blindly following a plan that has no relationship with reality is even scarier." "Interruption is the enemy of productivity. The worst interruptions of all are meetings. Meetings are toxic." "When everything needs constant approval, you create a culture of non-thinkers." There is so much more, you just have to read it. It's general enough that anyone with a job can apply it but it also has specific wisdom for those starting a new venture. The amazing artwork by Mike Rohde is the icing on this cake of business wisdom. Yum. To get a feel for the book, visit http://37signals.com/rework/ Get your own copy: UPDATE: In response to Rework, Happy Cog has published An Open Letter to 37signals calling for better meetings, instead of throwing them out. ...
I have completed a redesign of my personal portfolio website. Visit carletondesign.com to check it out. I thought I would let you in on the design and development decisions behind the project. Design First, let me say designing a site for yourself can be a bigger challenge than pleasing your pickiest clients. I went through multiple iterations of several different design directions before settling on the final styling. The earlier versions had fine details, textures, and color tones that were really nice, but the problem was, I was making more work for myself than necessary. I realized that my site doesn't have to showcase my finest details or adhear to the latests design trends. Instead, I turned toward simplicity. I cut the personal monogram that perfectly balanced positive and negative space which boasted a brushed metal texture and realistic highlights and shadows. I cut the multi-state navigation menu that had a mechanical feeling I loved. Instead, I thought, what would the site look like if I used zero graphics (other than the portfolio images) and only text. This self imposed constraint roped in my creativity and allowed me to focus on getting it done. I had the design comp done in a half hour, and I loved it. The layout is simple, the details are subtle and it's designed to focus the visitor on my work and the calls to action. I also designed the copy to reinforce the simple, get to the point style, that is me. Development The simplicity of the styling inspired a simplicity in the code. I worked to keep the code clean and flexible. It validates!. The layout's simplicity also hides it's best feature: flexibilty. If you didn't notice, go back and resize the broweser window. Watch the site adapt acordingly. Thanks to some inspiration from Ethan Marcotte, the images and layout scale based on the size of the browser window. I'll be digging deeper into these strategies and making further improvements, but I love how it works so far. I first coded the site without the CSS3 drop shadows, transparency or fonts. Once the foundation was laid, and tested, the embellishments were added. I have the advantage of focusing on an audience that uses the latest browsers, so I took a vacation from the usual struggles of browser compatibility and had fun with some nice features. The most visual feature is the custom font, Museo sans from Typekit. I love typography and have been folowing the boom in web fonts closely. I've used @font-face before but thought I would find out what all the hype around Typekit was about. Now I'm a believer. In a matter of minutes, I had a cross-browser/platform solution that enabled me to use a wide variety of high-quality fonts on my site. Wow, thinks sure have changed. Like most websites, it's never done, but reaching this point feels great. I enjoyed designing and developing this new site and hope you enjoy browsing it. ...
Friends have asked how to get started learning web development. The good news is that it's pretty simple to get started building websites. Like anything, it takes a lot more time to develop your skill to a professional level. Here are a few resources to get anyone started in the right direction. W3 Schools is a comprehensive guide to web codes. Guided lessons and quick reference for html and css makes this very helpful tool for newbies and pros. Editors There are a wide variety of HTML editors but your can start with any simple program like Notepad or TextEdit. More elaborate programs such a Dreamweaver can write code for you but such WYSIWYG applications can slow down your learning and become a crutch. Although simple to use, the code they generate is often not semantic or efficient. I suggest learning to do it yourself, the time investment will pay off in better results. W3C Once you get into the code how to you know your doing it right? Easily check your programming with W3C's html and css validators. These tools check your code against the official standards and even suggests improvements. Books There are countless books that can guide you through development of a simple sample site. I recommend getting books by experts in the industry: Jeffery Zeldman, Eric Meyer, Dan Cederholm, Jeremy Keith, and others. (I'm working on a specific list.) Once you get started you can follow blogs such as A List Apart, Nettuts, Smashing mag, .net mag, and more to keep up with the latest techniques. Have fun! Start with a project you're really excited about, instead of the one thats due tomorrow. ...
What do you think of when you see a beaker full of unknown liquids? Scientific experimentation comes to mind. I've noticed a rise in logos and illustrations which contain scientific symbols, such as beakers or test tubes, used to represent the experimental qualities of web/software companies. Here are a few examples that work well: Trend: Lab equipment logos (Images property of their respective owners.) I like the idea of borrowing the symbols from a traditional field to represent something new in technology. I used the term 'lab' as part of a name for a friend's new co-working space and love how it symbolizes groundbreaking ideas in action. ...
There are some great new features rolling out with CSS3 and HTML5 that will make life fun for web designers/programmers. Simple rounded corners, integrated video and fancy transitions are just a few of the many new options provided to developers. To varying degrees, browser makers are bolstering their support for these advancements in their latest versions. Whenever new browser versions arrive, the question is raised on what features are widespread enough to take advantage of, and what level to design for. Users have many options for browsers, and then many versions of each browser. Some keep updated to the latest versions, others lag behind. How do you know if your visitors will have the capability to experience the fancy new additions you spent so much time building? You could target the most common browser and avoid creating anything that isn’t compatible. Instead, I want to suggest and idea proposed by people smarter than me, called progressive enrichment. I love this idea. In his book Handcrafted CSS, Dan Cederholm skillfully asks, “Do Websites Need to Look Exactly the Same in Every Browser?” His answer is no. Instead of being disappointed that the new features don’t show up in older browsers, shift your thinking to the standpoint that newer browsers are rewarded with enhanced features. Think about benefits instead of problems. This may be a big change in thinking for decision makers who expect one design to be rendered exactly the same in all browsers. If properly built, the layout, readability, and features could be developed similarly in each browser, but the finer details would differ as browsers support them. Dan also suggests that the degree of your progressive enrichment should be tempered by your site’s specific stats. He quotes another smart guy, Eric Meyer who said it doesn’t matter what the global stats are for a browser, but it does matter what your specific site’s stats are. If your particular audience is full of early adopters, you have more freedom to enhance the site with the latest and greatest. However, if many of your site’s visitors are on earlier browser versions, you should focus on more widely supported features. So if you're skimming this, here is my point: Because there is a delay between the release of new browser features and the adoption of browser software, you can’t simply develop sites dependent on advance features. On the other hand you shouldn’t develop to the lowest common denominator. I suggest using progressive enhancement to enable advanced browsers to enjoy new features while still providing a great experience to lesser browsers. Further Reading: ...
I recently transitioned from being a self employed consultant, to a corporate employee. I went from wide responsibility of all aspects of my own business into a specialized cog at a big, high speed corporation. I enjoyed the freedom of working on my own schedule, choosing my own priorities, and moving in the direction I choose. Freedom is liberating, but a challenge to sustain. You can’t rely on anyone else to carry you. It takes determination and endurance to conquer each unique task that arises in your work projects and business administration. Not an expert on tax law? Time to learn quick or hire a consultant. Need to take a vacation? Your projects won’t get done with out you. It’s all you, the good and the bad. Some days go well, others don’t, but your task is to sustain your quest toward your own definition of success. In contrast, the corporate environment is organized and optimized. I was hired to be one part of a larger team, which is in a larger department in a larger company with multiple locations, with an international reach. Instead of balancing an array of responsibilities, I’m focused on one set of tasks which I apply repeatedly to a specific type of project in an exact timeframe, during business hours, in the company’s facility. Working in a team of specialists that are focused, toward carefully planned goals, has benefits in efficiency and productivity. Each member of the organization is able to focus on their specific task and rely on others to provide their complimentary piece of the puzzle. The organization is appropriately rigid and strategically focused on its specific measure of success, while the individuals seek further development/advancement for themselves. I don’t know which I prefer, there are benefits and challenges to each. I like taking the afternoon off on a whim. I also like the camaraderie a group provides. I like making a big impact on small projects, but it’s also rewarding to make a small impact on a big scale. I’m grateful for the option to try each work environment and I aim to learn from each situation. For the moment, the idea of a small, diverse team of specialists that collaborate in a creative and flexible environment seems like the most attractive arrangement. It can combine flexibility of being solo with the productivity of a team, while retaining a size that allows greater ownership of the work than a bigger company can foster. ...
Search engine optimization is the voodoo of web marketing. Many people claim to be experts at getting your site to the top of Google's results, but wont disclose their magic tricks. When search engines and the internet were new, promoting your site was simple. Things have changed but the basic principles can still be conquered. Dump the voodoo and get going on the basics: Skip the tricks, build it right You can't trick Google into to higher search placement. Don't try it. Shortcuts don't work. I'll admit that in 1999 I built a site with SEO tricks, it seemed smart at the time, but I've learned better. Instead of tricks, rely on website code that is clean, lean, organized, and valid (meets web standards). Keep it real A site's content is it's best SEO tool. In the planning stage, decide what keywords your site should have based on how users search. Next, write good text content that contains those words. Talk about those keywords in your site, use them in your domain name, page titles, and headlines. You might have heard about keywords and meta tags. Meta tags are code in your site that is there just for search engines. While it's not as important as they used to be, it still helps. Do what search engines suggest. Search providers are open about their requirements if not their exact methods. Many will promote their paid services but there are plenty of free steps you should take to make your site findable. If your starting from scratch, submit your site to Yahoo's Directory and the Open Directory Project. XML sitemaps can be used to help search engines navigate more complex websites. Spread the news Links from related sites are valuable for SEO. Reviews, articles, and press releases about your site help build your credibility and increase paths to your site. Be patient Don't expect overnight results. If your building a new site it will take time for your site to be indexed by search engines. Stay focused on the long term goals instead of instant gratification. These basics are a great start to getting good search result for your site, but there are, of course, many more details you can delve into, even as a career. As complex as it gets, it boils down to creating a well built site that has quality content. More info: Wikipedia: SEO Google's Guide to SEO Basics of SEO ...
Sometimes a wise word is just what you need. I recently stumbled on these gems of knowledge: People ignore design that ignores people. — Frank Chimero, Graphic Designer (Check out his awesome poster series) Content precedes design. Design in the absence of content is not design, it’s decoration. — Jeffrey Zeldman, Web Genius If design isn’t profitable, then it’s art. — Henrik Fiskar, Automobile Designer Always design a thing by considering it in its next larger context - a chair in a room, a room in a house, a house in an environment, an environment in a city plan. — Eliel Saarinen Architect The most innovative designers consciously reject the standard option box and cultivate an appetite for thinking wrong. — Marty Neumeier, Graphic/Brand Designer Design is the application of intent - the opposite of happenstance, and an antidote to accident. — Robert L. Peters, Graphic Designer Math is easy; design is hard. — Jeffrey Veen, Web Design ...
I've noticed this wrap-around or folding banner thing showing up around the web. I like it. Simple effects like this add layer and depth to the flat images on screen. ...
If you have ever been to a science museum, you know what to expect: wild animals preserved in threatening poses, strange bugs from across the planet and, if you're lucky, some dinosaur bones. Things have changed a bit at the California Academy of Sciences. Last year they completed a major overhaul to their facility in Golden Gate Park in San Francisco, and transformed it into the greenest museum in the world (LEED Platinum). The usual bugs and bones remain, but the exhibits have been designed to increase visibility and interaction. You can walk through a four-story glass orb that contains the rainforest exhibit, explore the amazing aquarium, stare at the night sky in the planetarium, or watch researchers do their actual work in front of you. My favorite exhibit is the building itself. It is packed with green features but none are obtrusive. The average visitor may not notice the solar array, computer-controlled natural ventilation, or rainwater collection, but they will definitely notice the result: a beautiful, light-filled, comfortable museum which prompts you to spend the day learning. The grandest green feature it its 2.5 acre green roof which looks like a green carpet floating above the whole museum. Architect Renzo Piano sketched it with one undulating line. From the observation deck you can enjoy an impressive view of the native plantings and species that call the roof their home, as well as the rest of the park and city beyond. I wish my office was up there; it is amazing. More info: California Academy of Sciences Inhabitat article about Cal Academy (Note: Article republished from Thomas J Carleton Architecture) ...
The term crafting brings to mind the knitted sweaters my aunt made for Christmas gifts. Those weren't worn much after that day. The old stereotypes of crafts are being redefined by a new generation of creative people. Today's crafts are functional, stylish or cute creations that appeal to a new audience who are tired of massed produced options from the mega store. If you appreciate hand made items, you used to visit your local craft fair. The halls were filled with knit pot holders, yarn haired dolls and jewelry made from "friendly" plastic. Today, crafting is back and it's high-tech. Creative folks have turned to the web for inspiration, instruction and customers. Websites like Etsy.com (rhymes with Betsy) are built as a marketplace for crafters. Customer can buy a wide range of items from talented crafters without leaving their couch, while crafters get a worldwide audience for their specialized creations. Several of my family and friends have gotten into it the craft business with the help of Etsy. Feel like creating something unique? Share it with the world. Love hand-made items? Have fun shopping. Crafting 2.0 has arrived. ...
After two nights of intense design and development, a new site has been released for E&J Design, a collaboration between Eric Ritchey and myself. Nothing like a deadline to motivate! We're stoked to have it live, but have more in the works for the future. Take it for a spin: www.eandjdesign.com ...
I love learning how things work. Every mechanical device has a great story behind it. I think this interest comes from some primal desire to construct. Perfect example: My interest in Airship Ventures, the company who brought a Zeppelin Airship to the Moffett Field. It's the first of its kind in the US and the first time in 70 years that the average citizen has has a chance to experience flight in a dirigible. I love that we can follow along as they share their trailblazing journey. We don't have to read about it years later in a book at the library, or travel to a special museum far away to learn exactly how an airship works on a daily basis. Their blog tells us in real time. Twitter followers snap pictures of the Zeppelin flying over their homes and share them instantly. Their GPS tracker shows us it's flight path. I love the access the internet enables to things like this. It's a great time to be curious about how things work. ...
It is amazing to watch a child grow up with technology as normal while the older generation is still figuring it out how to adjust to it. My one year old spends most of the day pushing buttons, opening doors, or trying to take things apart. Hopefully, that desire to learn how things work will last a lifetime. I can only wonder what the future will be like. The world is changing fast. I wonder if anyone predicted that information would be so accessible though the internet. It is simple to learn so many things that previously were confined to trained professionals. Websites and online tools allow you to manage your banking and investments, publish a book, sell your original music and much more. Open access to vast knowledge has eliminated the traditional barriers to entry into many fields of work. Web design is a field that has no such barriers. Anything you need to know about web design is available online and can be self-taught. Many professionals started out tinkering and then developed their new skills into a career. Why it is valuable to pay for professional web design if it's so easy to do? Time: Web design basics are simple, but it quickly gets complex and takes a lot of time to develop professional level skills. Experience: Like any profession, there is immense value in practical experience. Standards: Professional web sites should be built to web standards. These standards are a benchmark that separate professionals from amateurs. Style: This aspect is subjective. Generally, professionals have a higher quality of aesthetic style. So if you need a professional website, hire a pro. If you're a technology sponge, start learning and soon you may have a new career. ...
Intel has a commercial portraying Ajay Bhatt, co-inventor of the USB, as if he was a rock star. Check it out: If the web industry had it's own rock star commercial it would have to feature Jeffrey Zeldman or Eric Meyer. Both are well known for starting the movement to create standard practices for web sites and making sure browsers supported those standards. Zeldman is the co-founder of the Web Standards Project (WaSP), started A List Apart and his own studio, has authored several books and lectures on the topic of web standards. He was recently called "the godfather of web standards" by .net Magazine. Meyer is famous for his standards evangelism at Netscape, authoring numerous books on CSS, and lecturing on CSS and web standards. The official web standards are maintained by the World Wide Web Consortium (W3C). These standards have become an integral part of professional web development, thanks to the pioneering work of Meyer and Zeldman. Standards ensure a website's audience is viewing the site as the designer intended and also provide a benchmark for quality work. Thanks rock stars, rock on! Further Reading: ...
Remember when everyone had AOL, prodigy, or Compuserve? Those were the days of the original browser wars. Internet Explorer battled it out with Netscape Navigator while websites proudly displayed badges to support their chosen weapon. While that debate has faded, there is a new browser war going on, this time it's Web Designers vs. Internet Explorer 6. You don't have to look far to find blog posts by designers and developers using vile words to describe IE6. For the un-initiated, IE6 has issues displaying websites built to current standards. This makes make building websites that work for the majority of users much more difficult. Advancements have been made by Microsoft in subsequent releases of IE 7 & 8, but there are still far too many users that have not upgraded to modern browsers. Most power users have moved on from IE to Firefox, Safari or others that are built to facilitate standards based web design, but the IE6 contingency is unfortunately too large to ignore. What's a designer to do? Some have taken elitist stance of serving an empty page to IE6 users with a message to upgrade. Others provide a stripped down text only version of their site. This may be justified from the designer's perspective but isolates IE6 users, many of whom are stuck with it by enterprise IT departments. Sites that must cater to a wide audience go through the tedious effort of adding IE6 specific tweaks to make things work. These tweaks add extra cost and complexity to the development process, resulting in increased distain for the enemy browser. Some interesting new approaches have emerged that are gentler than the forced methods and bring needed attention to the issue. IE6update.com and pushuptheweb.com have devised tools that attach a message to your site that is only viewed by users of IE6. This message suggests the user upgrade their browser to get the maximum experience. I prefer this kinder approach to bringing users up to speed instead of punishing them for being out of date. Despite these methods, IE6 isn't going to die as fast as designers would like, so we have to deal with it for now. It helps to reminisce about the progress that has been made in the past years thanks to the web standards movement. Be glad we are past the time when every site had a flashing "under construction" graphic, and a 56k modem was cutting edge. More info: IE6update.com pushuptheweb.com twoversionsbehind.com Upgrade Warning: Google Code stoplivinginthepast.com usabilitypost.com: Drop IE6 Support ...
Taking an idea and making it a successful business is a struggle. Not only do you have to manage internal factors like productivity, customer service, and accounting, you are also subject to external factors like competition, market volatility, and fickle customers. Recently I was surprised with a legal challenge which required big changes to one of my websites and its products. Challenges like these bring the entrepreneur to a crossroads. Do you allow the challenge to be a stumbling block or a launching point? It's easy to be discouraged, but it takes endurance and hope to turn a setback into an opportunity for success. There is always more to learn or a fresh way to approach your challenge. In this case, the abrupt legal issue has lead to a renewed marketing effort and careful planning for the future of this small business. ...
I love photography. Life would not be nearly as fun without cameras. Photos can quickly explain a product, express an quality of a company, or provide personal connection to an experience. When designing websites or printed materials, I utilize both stock and custom photography. Stock photography is an easy and inexpensive way to get high quality images on a huge array of topics. Instead of hiring a photographer to take specific pictures you can quickly find numerous examples online for a fraction of the cost. An example would be the three stock images I selected for the intro page design of Omni Law Group. This firm was seeking a graphic representation of it's marketing message. The challenge with stock photography is selecting the right photo from the expanse of options. An overall vision of the project's styling goals is required in order to ensure a cohesive result. Custom photography is best for specific photos, such as a portraits, product shots, projects, or capture events. I recently assisted entrepreneurs at BhatiaOne with custom package designs. Once the designs were printed, I photographed the finished products for use in their marketing presentations. This was a cost effective way to quickly get a new product to a professional level, ready for presentation to buyers. I have also worked with several professional photographers whose talent, training, and experience provide amazing results. The quality of the photography directly impacts the quality of the overall design. Stock and custom photos can be a strong design element on web and print media. Creating a cohesive appealing design requires careful selection of photos and coordinating design. The end result can be a powerful image, worth thousands of words. ...
I love watching a good idea become reality. Good friends Sean Barber and Brian Anderson developed the concept of creating a co-working space in Ames, IA. Co-working is the idea of several professionals sharing a workspace. It's perfect for freelancers, tele-commuters, and consultants that need an office away from home. The main purpose of a co-working space is to provide professional office conveniences for little overhead cost. The secondary goal is to foster interdisciplinary interaction between users of the space. The unique mix of users can create beneficial interaction. For example a photographer and graphic designer who work independently can discover that their work is complimentary and begin sharing clients. This interaction is a great benefit for freelancers, and small businesses who don't have the resources internally. I have enjoyed contributing to the project and watching it develop into a physical reality. I assisted CoLab in their design phase, creating some 3D models and renderings of the space for concept visualization and presentation. 3D Models are powerful tools for designing and explaining architectural concepts. More info about Ames CoLab: AmesCoLab.com Twitter.com/amescolab Brian's blog about CoLab Video of CoLab under construction ...
I love this video! This beautifully illustrated animation explains the history of the internet. It's a great example of how a technical lesson can be communicated effectively through skilled information design. History of the Internet from PICOL on Vimeo. ...
I'm currently in the process of creating CarletonDesign.com (this blog is part of it) as my new portfolio site to replace jrcid.com. I can't wait to convert the design to CSS/HTML so I can insert the new content. I have some great ideas. Now that the design concept is settled, I'm finalizing textures and colors. I also have been working with Eric at E & J Design on the next version of LEEDstudy.com. Check out that design, it's still a work in progress. ...