Posts

Showing posts with the label design

Useful websites for developers

There are some amazing learning resources on the web, in every area of development, design, mobile, responsive, UX, and more. Here are some of my favourites. 24 ways The advent calendar for web geeks. For twenty-four days each December they publish a daily dose of web design and development goodness to bring everyone a little Christmas cheer. A List Apart Explores the design, development, and meaning of web content, with a special focus on web standards and best practices. The Agile Manifesto The core ideas and principles behind agile development. CSS Tricks Nifty things you can do with CSS, like making interesting shapes, or speech bubbles, or pull-out quotes. Meyerweb.com The website and blog of Eric Meyer, CSS guru and web consultant. Boagworld The website and blog of Paul Boag, user experience guru and web consultant.

Useful tools for developers

There are some amazing tools available for developers on the web, from pretty-printing your code to validating it, from colour palettes for visual impairments to tools for testing APIs. Here are some of my favourites. Stack Overflow This is the go-to site for questions and answers about coding. It has questions and answers on just about every programming language that you can think of - PHP, Python, Java, Ruby, JavaScript, jQuery, Angular, and more. And every environment you can think of - Windows, iOS, Android, and so on. And every mark-up and styling language - HTML, XML, CSS, and Sass. Stack Overflow has an awesome community of people willing to help complete strangers, which I think is amazing. I have learnt so much from reading Stack Overflow, and I haven't asked that many questions on there, because many of the common questions have already been asked and answered. User Experience This is the equivalent site to Stack Overflow for asking user experience questions (usability an...

Curvy wrapping with CSS Shapes

Image
I thought it was pretty impressive when CSS styles were developed that let you make a shape or a photo with curves on the corners, or a circle. Eric Meyer discusses how to implement and use CSS Shapes in a responsive layout over at A List Apart, in an article entitled A Redesign with CSS Shapes . Now there's a feature that lets you wrap the text around your circular object. It's called CSS Shapes. At the moment it is only supported by WebKit browsers, but you can still display your text using old-style wrapping in non-WebKit browsers. Here's the CSS: img.bubble.left { float: left; margin: 0 40px 0 0 ; shape-outside: circle(150px at 130px 130px);  } img.bubble.right { float: right; margin: 0 0 0 40px; shape-outside: circle(150px at 170px 130px);  } Here are some more examples of CSS Shapes on CodePen .

Designing for emotional response

Design can elicit many different emotions. Many designers aim for surprise and delight, but those are not the only emotions you might want to elicit. If you are designing a site or an app for a charity or a campaign group, you might want to elicit compassion and a willingness to act - whether that is volunteering or donating. You might even want to elicit anger. Ages ago, the BBC published a series on user experience, and one of the things they talked about was BERTs - Bipolar Emotional Response Tests - which had a chart with a series of contrasted emotions (happy versus sad, angry versus calm, and so on) where testers were asked to respond to a design by marking on the chart how it made them feel. Their responses were then averaged out to provide an emotional profile of the website. A wheel of emotions This interview with Sherine Kazam offers a wheel of emotions and how they relate to each other (identified by Robert Plutchik in 1980). It's a more nuanced model, though I am not...