Colorburned » Website Designshttp://colorburned.com
Graphic design resources, tutorials, and more!Tue, 31 Mar 2015 03:32:33 +0000en-UShourly1http://wordpress.org/?v=3.5.2The Basics of Touchscreen Interfaces and Screendesignhttp://colorburned.com/touchscreen-interfaces-and-screendesign/
http://colorburned.com/touchscreen-interfaces-and-screendesign/#commentsTue, 31 Mar 2015 03:32:33 +0000Jake Rocheleauhttp://colorburned.com/?p=54675Designers have been faced with some of the most difficult tasks to achieve beauty in aesthetics merged with pragmatism. Interfaces should be designed to work quickly and efficiently - but they should also captivate and charm the people using them. It requires fine balance and a sense of creative ingenuity to craft exceptional interfaces.

In this post I'd like to express a few components critical to designing for touch-based devices. Screendesign isn't a new concept but it has been revolutionized through advancing technology. These advances focus on screen size, pixel density, and open source development. Once you can understand the fundamentals of touchscreen design new projects can be viewed from above-the-board without getting bogged down into details.

]]>Designers have been faced with some of the most difficult tasks to achieve beauty in aesthetics merged with pragmatism. Interfaces should be designed to work quickly and efficiently – but they should also captivate and charm the people using them. It requires fine balance and a sense of creative ingenuity to craft exceptional interfaces.

In this post I’d like to express a few components critical to designing for touch-based devices. Screendesign isn’t a new concept but it has been revolutionized through advancing technology. These advances focus on screen size, pixel density, and open source development. Once you can understand the fundamentals of touchscreen design new projects can be viewed from above-the-board without getting bogged down into details.

Designing for All Ages

When building any product it’s vital that you spend time analyzing the target audience. Who would most likely be using the application? This question breaks into a number of genre-specific categories such as interests, gender, tech-knowledge, and certainly age.

Designing an interface which supports all age groups is easier than you might expect. This is especially true on touchscreens because toddlers and young children can behave a little more intuitively. This opens the door to very simplistic navigation and UI style which triggers a natural sense of connection.

The demographic you shouldn’t be too concerned with is teenagers up into early 30s adults. Most of those people already know a lot about technology, and even if they don’t it shouldn’t take long to learn. So good touchscreen design requires bridging the gap between the very young and middle-aged/elderly – both groups that don’t always know a lot about touchscreen devices.

One of the absolute best methods to learn is by studying what others have done. I’ve learned so much just by analyzing what other successful designers have created. Plus you don’t even need to pay for each application if you can find screenshots online.

Smartphones vs Tablets

Notably there is a large discrepancy between smartphones and tablet devices. Most app designers who have the production capacity will release support for all devices and operating systems(Android+iOS). Tablets offer a much larger screen and also more control for movement.

But how can you manage the differences when designing for touchscreen interfaces? Well to get started you have to pick one or the other. I find that it’s easiest to start with smartphones and build from there. Also keep in mind that each device can have a portrait or landscape view depending on how the phone is held. But not every application needs to support both views – each project will have different needs to be met.

Things get tricky when you start to expand interfaces for tablet devices. The screen resolutions are similar for iPads but not always for Android tablets. So as a designer you really need to be flexible and willing to change things up as needed.

Ultimately there is very little difference in the way of interactivity. All the same touch-based commands are received in the same order. You just need to design interfaces which are flexible and easy to establish across a broad spectrum of screen dimensions.

Screendesign Overview

The subject of screendesign is very large but makes more sense in the context of touchscreen interfaces. When designing for a screen you need to have a different approach compared to print. These two mediums can be broken down further into specific screen interfaces(websites, mobile apps, desktop software) or print media(CD labels, book covers, magazine ads).

Design is a very broad term but it encompasses many similar facets. In screendesign these facets are limited to whatever makes the most sense in context of the user experience. Or another way of phrasing this is how does the design best-suit the content?

Unlike print design, screens are meant for interaction. Screendesign is based on creating interfaces that can withstand mouse clicks and finger taps. Menus should animate, buttons should be clickable, and content should be readable. When discussing touchscreen interfaces we get a little more detailed, but still follow similar rules.

Avoid elements that appear too small for interaction. Keep important pieces of content above-the-fold even on smaller devices. This may be easier designing a mobile app but even responsive websites can accommodate to various screen sizes. The key is to incessantly remind yourself why you’re designing each interface – not just for the theme, graphics, or design style, but for the user.

Mockups & Wireframing

When just starting a new project I’d recommend picking up some wireframing tools and sketching out concepts. These could be on paper or in a program such as Adobe Photoshop. The end goal would be recreating the interface in a very simplistic manner. Touchscreen interfaces can be labeled for the effects and transitions which occur during certain interactions(swipe, tap, etc).

The best part about wireframing is that you can get ideas down rapidly. This step might take a while but you can put down 5-10 new ideas with relative speed and efficiency. Then by choosing an idea from the collection, you can expand that design further with more detail.

Traditionally most designers rely on Photoshop to do mockups. However a new contender named Sketch recently entered the marketplace. This is an excellent program if you have the time to learn how Sketch works. All the tools are very similar and design elements in the document are vector-based by default.

As a screendesigner you want to practice the wireframing and mockup stages as often as possible. These should be your bread & butter coming up with new ideas and fleshing those ideas into a preliminary concept. Touch-centric design often requires a little more finesse mapping out individual actions on the screen. But start off getting familiar with the basic steps of design and you won’t be disappointed.

The sooner you can start practicing touchscreen design the faster you’ll see improvement. Just like any other activity, the more hours you log the more you’ll get out of it. I certainly hope these tips can provide a reliable structure for building confidence in your own capabilities. Touchscreen design is very different from other interfaces but most of the rules have stayed the same – just remember to place the user above all else and you’ll stay on the path towards success.

]]>http://colorburned.com/touchscreen-interfaces-and-screendesign/feed/032 Amazing Minimalist Website Layoutshttp://colorburned.com/32-amazing-minimalist-website-layouts/
http://colorburned.com/32-amazing-minimalist-website-layouts/#commentsWed, 21 Mar 2012 14:10:15 +0000Jake Rocheleauhttp://colorburned.com/?p=53115Minimalism is a commonly adjusted technique for web and mobile design. When you strip a layout of everything except key elements you begin to understand minimalist design patterns. Visitors will often find what they need a lot quicker. …]]>Minimalism is a commonly adjusted technique for web and mobile design. When you strip a layout of everything except key elements you begin to understand minimalist design patterns. Visitors will often find what they need a lot quicker. Plus your website files are much smaller than average.

Web designers and freelancers look towards minimalism to elegantly showcase their portfolio works. I’ve put together a small gallery of minimalist layouts which you can check out below. Additionally if you have your own thoughts on minimalist web design please share with us in the post discussion area.

]]>http://colorburned.com/32-amazing-minimalist-website-layouts/feed/0Case Study: The Design of the New Colorburned Websitehttp://colorburned.com/case-study-the-design-of-the-new-colorburned-website/
http://colorburned.com/case-study-the-design-of-the-new-colorburned-website/#commentsMon, 06 Apr 2009 05:41:30 +0000Grant Friedmanhttp://colorburned.com/?p=1199As you guys know, last week we unveiled a new design for this website. The process of designing a new site literally took months to do. I have very high standards when it comes to designing graphics …]]>As you guys know, last week we unveiled a new design for this website. The process of designing a new site literally took months to do. I have very high standards when it comes to designing graphics for myself and I had to balance my time with other projects that came down the pipe. Needless to say, that when it came time to code the site into HTML and then implement it into a blogging platform, I was exhausted and a bit overwhelmed.

I am by no means an expert coder. I’m more visual, so when it’s time to do the PSD to HTML I tend to rely on experts to do the work. When I initially launched this website I turned to Lisa Sabin-Wilson, the author of WordPress for Dummies and founder of E.Webscapes to help me with the PSD to HTML and implementation. So when it was time to launch the new site, I turned to her again.

Last week, Lisa wrote a fantastic article detailing the steps that she used code this website. It is definitely worth a read if you are into blog design.

Also, if you need help implementing your blog ideas consider using E.Webscapes the next time you have a blog that you need launched. I have been very impressed with Lisa’s work and would recommend her highly to anyone who could use a hand.