“Designers shouldn’t code” is the wrong answer to the right question | More Than This My friend Wayne Greenwood asked me what I thought of his recent blog post in which he argues that designers shouldn’t write code. He wrote, “Your time is the ultimate zero-sum game. The more you spend on the complexity and details of coding, the less you have to make the product experience better for your users or to influence product strategy.” My friend @miniver sucked me into the twitter debate on the subject–so I thought maybe I should share my thoughts without the 140 character restriction. The core insight. Wayne’s argument–that designers shouldn’t be coders–is based on a fundamental insight that I find compelling: if you are paying attention to how a software system will be built, you will be influenced by that need; if you don’t do something to counter that influence, you will end up with software designed around what Alan Cooper calls the “implementation model.” The core insight is right. So I think the core insight is spot on–but what conclusions should we draw from this?
Improving UX Through Front-End Performance Imagine you’re at an intersection waiting for your turn to walk across the street. You push the button to call the walk signal, and you take out your phone. You want to accomplish one thing: maybe check your e-mail, add an item to your to-do list, or check Twitter. You have a limited amount of time to accomplish that one thing. That amount of time is how long users have to finish what they want to do on your site. Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent, according to a Google study. Can you keep up? It’s time we make performance optimization a fundamental part of how we design, build, and test every single site we create—for every single device. Designing for performance#section1 Website performance starts with design. Not every design decision will favor performance. But sometimes, performance will win. In another experiment, the dyn.com homepage featured a thumbnail image section with 26 images that rotated in and out of 10 slots.
iOS 7 Isn't About Features Nor Functions, but User Experience! Originally authored by Miao Wang On June 10, 2013 Apple announced its new mobile operating system – iOS 7. It gained a lot of attention with its new visual style but was also controversial. Many people felt uncomfortable with the big shift from Apple’s legacy skeuomorphic design and its 3D effects, to the new “flat design.” Some criticized Apple for taking advantage of the existing features from rival operating systems. In this blog, I will compare iOS 7 with its competitors: Android 4.2, Blackberry 10 and WinPhone 8, focusing on the features and design patterns that lead to the overall user experience. Features Lag Behind I have to admit that iOS 7 is not a completely innovative design, at least from the aspect of the new features that Apple released at the Worldwide Developer Conference. One example is Control Center (see Figure 1). Figure 1. iOS 7 enables the user to quickly access controls without interrupting the current task. Figure 2. Humanity Stands Out Simplicity Efficiency Figure 4.
10+ useful tools to simplify CSS3 development CSS3 is indeed a great improvement to the CSS specification. It allow web developers to add stylish effects to their websites, without any headaches. That said, several tools can definitely be life savers when building websites using CSS3. CSS3 Pie Are you surprised that Internet Explorer 6/8 CSS3 support is almost non existent? CSS3 Builder With this tool, you can design complex CSS3 boxes using an interface looking exactly like the one used for applying Photoshop effects. CSS3 Drop shadow generator This one is quite similar to CSS3 builder, just use the sliders to visually design your drop shadow. Cascader This tool isn’t CSS3 specific, but it is so useful that it would have been a shame not to include it on that list. Border Radius.com border-radius is one of the most popular CSS3 properties. Button Maker CSS3 allows you to create awesome buttons. CSS3 Generator Need help with CSS3 declarations? Modernizr HTML5 & CSS3 Support CSS3 Gradient Generator CSS3 Please CSS3 Cheat Sheet
css3 0inShare Refcard Expansion Pack: CSS3 Basics This week, DZone has released its latest Refcard: CSS3 Basics. For those of you interested in digging deeper into CSS3, we decided to dig into the DZone... 0 replies - 7313 views - 10/10/13 by Alec Noller in Articles CSS3 Animation Made Simple with Move.js Move.js is a cool JavaScript library that makes CSS3 animations simple and elegant by implementing a JavaScript syntax with tons of built-in easing functions.... 0 replies - 1966 views - 07/29/13 by Allen Coin in Articles Fun and Flair with CSS3 Animations Alexis Goldstein, author of of HTML5 & CSS3 for the Real World will show you how you can add a bit of creativity and spice to your website by taking... 0 replies - 717 views - 07/08/13 by Allen Coin in Articles Introduction to CSS3 Transitions A good-looking application must provide user with visual feedback. 0 replies - 2096 views - 07/01/13 by David Catuhe in Articles The new highlights of CSS3 The Sharp Truth About Contour Bias CSS3 Image Filters
html - Would you recommend starting from HTML5 & CSS3 for beginners HTML5 Introduction HTML 5 and CSS 3: The Techniques You’ll Soon Be Using In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along. Before we get started, consider using one of our HTML5 Templates or CSS Themes for your next project—that is, if you need a quick and professional solution. HTML 5 is the next major version of HTML. Before we begin marking up the page we should get the overall structure straight: In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and footer. It still looks like HTML markup, but there are a few things to note: In HTML 5, there is only one doctype. Instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. We have already defined a new section in the document using the section tag.
New structural elements in HTML5 By Chris Mills, Bruce Lawson Introduction HTML5 brings two new things to the table: new APIs that add essential new features to the open standards web development model, and new structural elements that define specific web page features with much more accurate semantics than were available in HTML 4. This article, on the other hand, focuses on the latter — we will briefly look at how the new semantic elements were chosen, what the main new features are and how they are used, how headings work in HTML5, and browser support for these new elements, including how you can support them in older browsers. The contents are as follows: Introducing HTML5 structural elements HTML4 already has a lot of semantic elements to allow you to clearly define the different features of a web page, like forms, lists, paragraphs, tables, etc. But it could be so much better. Humans can tell the different content apart, but machines can't — the browser doesn't see the different divs as header, footer, etc.
New form features in HTML5 By Patrick H. Lauke, Chris Mills Introduction HTML5 includes many new features to make web forms a lot easier to write, and a lot more powerful and consistent across the Web. Bad form? Let's face it – HTML forms have always been a pain. Back when HTML 4.01 became a stable recommendation, the web was a mostly static place. To fill the need for the more sophisticated controls required for such applications, developers have been taking advantage of JavaScript libraries and frameworks (such as jQueryUI or YUI). HTML5 aims to standardise some of the most common rich form controls, making them render natively in the browser and obviating the need for these script-heavy workarounds. Introducing our example To illustrate some of the new features, this article comes with a basic HTML5 forms example. New form controls The first new input type we'll discuss is the number type: Note that, by default, this input does not generally show the currently selected value, or even the range of values it covers.
Getting to Flow When design and client cultures truly come together, magical and memorable projects emerge. These magic projects aren’t random, though: I’ve come to understand that the conditions for creating good work aren’t a mystery, and that with a few thoughtful changes you can make those conditions more likely to occur on your next project. To get there, you’re going to have to challenge your clients to be a part of your creative process. This will be uncomfortable at first, and will introduce new frustrations to your process. But the upside is enormous, and has the potential to shift your role from vendor to trusted partner. We want to do Good Work#section1 In the best partnerships, all parties have the space to do Good Work: “enjoy[ing] doing your best while at the same time contributing to something beyond yourself,” as Coert Visser writes. These magical projects don’t depend on a single culture dominating the partnership, though. Enabling immediate feedback#section2 First condition: check!
From PSD to HTML: Building a Set of Website Designs Step by Step Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. Today I'm going to take you through my entire process of getting from Photoshop to completed HTML. We're going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. Demos If you're like me, you like to see the end before beginning. Download the Files Additionally you can download the full HTML/CSS/Image source files here. What We're Building As you may or may not know, I've (very slowly) writing a book on WordPress theming. You can get the full layered PSD files *and* a tutorial on designing them up from our PSDTUTS Plus membership - but it will cost you $19 a month to access. Part 1 - Building the Framework and First Page Unlike previous Site Builds this tutorial is covering a decent sized template. Step 1 - Getting Ready So first of all we boot up our code editor of choice. Step 2 - Quick Early Layout The design is centred. So here's a HTML layout:
HTML5 Presentation In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley.
HTML5 Presentation In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley.