aesthetics

Designing Digital Badges

Posted on by Jon K.

The idea of designing a digital badge should be daunting. Much like how there’s a lot of discussion that web design is too complicated now (with front-end specialists. back-end specialists, UI, UX, branding, Javascript rockstars, and so on), designing a badge is a complex task. With a learning outcome, it’s fairly straight forward, you gather together a couple of sentences that express what you hope the learner to accomplish in a period of time. I’m drastically simplifying the writing of a learning outcome, because there’s great nuance in a truly well-written one. And there’s lots of ambiguity in poorly written ones…

With that said, badges are much like a learning outcome, plus all these other, sometimes complex, visual ideas that can entirely sabotage your badge before anyone has earned it. Is the badge ugly to the one who might earn it? They’re unlikely to be motivated and it could turn them off learning in your context.

With all that said I’m not a design expert, but I have bookmarked quite a few sites that give differing opinions on what a shape, color, design or visual idea might mean. If you’ve studies semiotics, you’ll fully understand that this is really a brief and cursory view of a deep and nuanced subject. If you’re a visual designer, you’ll really understand that there’s a lot for people to dig into with building a badge. This is just a taste to get your palate satiated, just a start to get the creative ideas flowing…

Understanding Shapes Better

Understanding Colour Better

Online Badge Design Kits

Badge Design Worksheets

Free Icons

 

 

1 Comment

The Value of Aesthetics in Education

Posted on by Jon K.

“I think that educators also systematically undervalue art and aesthetics. Educators (especially academics) most often thrive in text-driven cultures and rarely equipped to understand — let alone build — visual and interactive media. “

Kurt Squire via Henry Jenkins here.

I’ve been thinking this for years, and I suspect that the educators who understand that they need to present their information in aesthetically pleasing ways, will be able to better share that information. That’s where an LMS can come in handy, that’s where learning design can come into play.

No comments yet

Usability and Images

Posted on by Jon K.

Been thinking about online communities a lot the last few days – specifically thinking about what makes a successful community, and the aesthetics of the online environment that the community flourishes in. Take Facebook – probably the most successful online community website going. Now, one can argue that Facebook’s design aesthetic is to get out of the way of the community’s relationships… but perhaps it’s not the design aesthetic at all. Maybe the aesthetic is irrelevant when the content is overwhelmingly useful to the end user. Previously, I and many other web designers had tried to ensure that if, as a designer, you wanted to build a website that encouraged community, that pictures of people should be there to enhance the connection users have to the site and to each other. Yesterday in a meeting I suggested that one “had to have pictures of people” in the header of a website, in that it helped humanize the experience. My hypothesis is that without those pictures, the experience becomes too sterile. The counter argument a colleague brought up was that a 2-D representation of a person does not mean that people feel more at home or in a community.

Then why do designers use pictures of people so often as a short cut to engage people? Is it because it’s easy and a cue to users that people (of a certain stripe) are welcome here? Anyone have any studies that have looked at images of people and the user’s effect?

1 Comment

Color

Posted on by Jon K.

Considering I’ve been back on the aesthetics bandwagon the past few days (further carving out a niche as someone put it in an e-mail to me) I began to think about color. First thing this morning, an article about choosing the right color for your website – which got me thinking about the right colors for learning spaces online. Typically, I see white backgrounds with black text and maybe some selected images (much like this blog I suppose!).  I’m fairly certain that the reasoning for this is twofold. One, it harkens back to text, and particularly textbooks – so by designing with a black and white scheme and fonts that recall texts, online spaces gain a level of authority. Two, typically, black and white design has been viewed as “classy” and it’s easier to get something to look good with a limited color palette (black, white and grey).

Of course, that requires an understanding of complimentary colors and color theory. Color Matters has a good page on color theory which for some of you will recall grade 5 art class. If you don’t want to be bothered with the theory, just want to get down to brass tacks, Color Scheme Designer will give you a good selection of possible combinations to use in your designs.

Neither of those sites really talk about the psychology of color. The more I dig into it there isn’t much research that I would bet the house on, but Pantone has a good article about it as well. Well of course, Pantone will… they’re the biggest marketers of color (and consistent color) in the world. Is there real evidence of color psychology or is it just smoke and mirrors?

2 Comments

Type

Posted on by Jon K.

As part of the ongoing aesthetic interest I have, I discovered a link to this blog post that discusses the basic properties of type (and fonts). As I was reviewing it, I realized that a lot of textbooks are set in serif fonts (such as Times New Roman) and wondered if that had some psychological effect on how people viewed sans serif (such as Arial) type. Will my blog seem more “professional” or “academic” if I use a serif font? Recently George Siemens redesigned the elearnspace blog, moving from a sans-serif font to a serif font. I wonder if that has changed initial opinions of his blog?

Another conflicting idea is that online spaces should have fonts set in sans-serif type, because on screen resolutions are low, and serif fonts are not always displayed with the same clarity. When doing web design (not so long ago now), I usually defaulted to setting clients websites into Arial, Helvetica and sans serif. I wonder what impact that had on the end user?

3 Comments

First Impressions

Posted on by Jon K.

I’ve harped on a lot about how good visual design helps manage  the first impression someone constructs. Here’s a link to the article that discusses the way we process first impressions (in PDF format) and the Guardian article that discusses it. What’s fascinating is the conclusion that we process our first impressions of people the same way (and the same part of the brain) that we process our first impressions of objects. Now, I’m slightly skeptical of the methodology – they used pictures of people on a screen rather than real people – which to me is perfect to study how people make first impressions of pictures, maybe not ideal otherwise. Additionally, it’s interesting to see that part of this is done by an area that controls emotion, so logic is out, emotional responses in.

No comments yet

5 Things To Do To Improve Your Visual Intelligence

Posted on by Jon K.

I’m using the term visual intelligence to refer to an ability to produce an aesthetically pleasing photograph, document or web page. Much like any other skill, experience is king. You have to learn by doing. The inspiration to do is sometimes a key problem. Here’s a couple of photography exercises that will help your visual intelligence.

1. The 365/10 project. On Flickr, take a photograph everyday and post it with the 365/10 tag. I’d go one further to geo-tag it and give it descriptive tags to help people find it.

2. The Dailyshoot is along the same idea, shoot something every day/week, but this time grouped around a theme. It goes one further to post a link via Twitter. Sometimes having someone give you constraints is a good way to focus on technique rather than finding something interesting to shoot.

3. Digital Photography Challenge is another photograph on a theme challenge, but it’s also a contest where you can vote on best shots.

4. Running From Camera is something Alec Couros posted on Twitter moments ago, but a cool task for a different shot. Of course, looking through the entries, some of them are composed very similarly. I wonder if you could work within the constraints of “running away” but shooting on a diagonal? Would the picture still work?

5. In addition to shooting more, critique more. Be very critical and selective about shooting and framing. Be reflective in your practice, think about what you could do to improve your shot selection. If you can’t come up with what you can do to improve your shots, review the basic theories that govern design, and choose one to work with exclusively.

1 Comment

10 Pages For Composition Education

Posted on by Jon K.

I’ve decided that I’d be totally remiss if I didn’t try to compile some sort of list of resources. So here they are (in no specific order):

1. Composition and the Elements of Visual Design is a well written article giving some basics around different techniques for composing photographs, but these techniques extend to document and website design as well.

2. The Principles of Design discusses several key issues in web design, and how those issues are echoed in print design. Pulling from the classics (balance, rhythm, proportion, dominance and unity), this article gives you a good overview of web design.

3. Composition and Design Principles from Goshen College is an interesting case – I nearly didn’t put it in the list because it’s an atrocious website (for instance, I’m not fond of mixing serif and sans-serif fonts on the same page for body text), but the information is great. As Google is fond of saying, “content is king”. It’s primarily targeted at people who might be teaching art, but my audience being mostly educators, so you should be able to relate. Also, you can sometimes learn from what not to do, which brings us to the next site.

4. 5 Common Visual Design Mistakes outlines some basic errors that designers make. Of course, rules are made to be broken, but when you are trying to communicate a message you need to ensure that  rule breaking is consistent with the message.

5. Principles of Design from About.com is a decent tutorial with examples and questions to cover the basics of design.

6. IBM’s Design Principles Checklist gives you 17 aspects of visual design that they intend to use in software design, but I think they translate to the web and page as well. To me, the last point is critical; cluttered design is one that will only confuse and distract from the content.

7. The Artist’s Toolkit provides a quick tour through the elements and principles of art, which also are applied in design and user experiences. After all isn’t what we experience with art a “user” experience?

8. Art, Design and Visual Thinking is an interactive textbook from Cornell University. Well, it’s interactive if you consider clicking on links an interaction (also the design is dated). This online book is tailored more to the art student, but the first few sections are an excellent and go into areas that other suggested sites don’t cover. Gestalt? Color psychology? Important concepts, but often glossed over or overlooked in primers on design. This site will give you language to dive deeper into an area of design that interests you.

9. Design Psychology is a blog article I’ve referred to a couple of times over the last year or so, as a lot of what I do is web design dressed up as e-learning. While Andy Rutledge appeals to the commercial designer, the message shouldn’t be lost on educators. Educators are competing with commerce for attention, while we have content down pat (in fact content coming out our ears!) we may not design things in such a way as to hold attention or keep it. This post is a touchstone for me, essentially re-centering me when I’m far out in left field.

10. Aslam Memon’s Blog has 45 blogs and twitterers that provide design inspiration. That’s the biggest piece of composition education, looking at and analyzing designs you like, and seeing what was done to create them.

No comments yet