Category Archives: Eclecti.ca

Web Design Foundations

Web Design WireframeThere was a request on Reddit today asking for some resources on how learn web design skills.  The response was great.  So great that I’m just going to copy it here. I really appreciate how the list starts with typography.  This is very much about visual design and not code or other kinds of crunchy hackery.

The information is clearly in the context of web design, for the most part. However there is quite a bit of information here that is just about visual design in general.  I’ve added a few books to the list that I find useful and continue to refer to, a couple of links that I like; in particular I added some links about wireframing.

If you have some links to share, please let me know.  I’m think about how this might evolve into a resource page as opposed to a post.

Many thanks to avogadrospimp for asking the question and to materialdesigner and Luchian for the awesome answers.

Typography

Typography Intro
Typographic History
Typographic Terminology
Typographic Hierarchy
Mixing Fonts
The Elements of Typographic Style (Book)
Thinking With Type Revised Edition (Book)
Stop Stealing Sheep & Find Out How Type Works (Book)

Typography on the Web

Web Typography
Web Typographic Guidelines and Techniques
Choosing the Right Font
On Web Typography

Design Theory

Web Design Theory
Principles of Design
The Lost Principles of Design
Principles of Good Web Design
Design Principles
50 Free Lessons in Graphic Design Theory
Teach Yourself Graphic Design
Universal Principles of Design, Revised and Updated (Book)
The Design of Everyday Things (Book)

Gestalt Design Theory

“I believe Andy Rutledge’s Gestalt series is the best way to grasp the fundamental principles of design. Reading these articles, and many others found on his site, helped me focus on the important aspects in a design and provided a clear understanding as to why elements on a webpage should, look, be positioned and behave in a certain way.” - Luchian

Figure Ground Relationships
Similarity
Proximity, Uniform Connectedness, and Good Continuation
Common Fate
Closure

Design History

Design Is History
Design History

Layout

Whitespace
Designing With The Grid
Outside the Grid
Rhythm
Visual Hierarchy

Wireframing

The Importance of Wireframes In Web Design
Ultimate Guide to Website Wireframing
The Importance of Wireframing
Get Wireframing: The All-In-One Guide
35 Excellent Wireframing Resources

Colour

Colour Theory in Web Design
The Meaning of Colour
Colour Contrast
Colour Lovers
Kuler Theme Generator
0 to 255 Colour Variations for Web Designers

Art Direction

Art Direction and Design
Print Design
Logo Design
Branding

Image from http://www.flickr.com/photos/rohdesign/3307873748 Some rights reserved

Wifi @ Drupalcon Chicago

There has been some complaints of the wifi at Drupalcon dropping.  The organizers took a moment to explain what’s going on.  Here’s the rundown of the wifi usage during yesterday’s keynote:

  • 2032 concurrent wireless users
  • 3842 active dhcp leases
  • 4373 unique devices – please keep in mind there are 3000 people at Drupalcon
  • 70M down the 100M pipe available
  • 2.4 ghz frequency range was complete saturated.
  • 5 ghz frequency range had lots of room

So it turns out, the problem is old wireless hardware…and almost 1.5 wifi devices per person :)

The thing I love most, is that they took five minutes to explain this to us today.  These…these are my people :)

Photo by http://www.flickr.com/photos/jkannenberg/3678423649/sizes/s/in/photostream/

Hacking Night In Canada

Spent then tail part of my Saturday watching hockey and coding.  I’m sure Jamie would be proud.  And likely doing the same thing.

It’s always great to decide to fix some code and things pretty much work out the way you want.  Tonight I wanted to add a listing of the Tags for each post to Single Post view to the theme I’m using for this site.  Cellar Heat is a great theme and working with it was awesome.  Its a great theme with great code build on the pure awesome of WordPress.

Pretty much the only thing I wanted in the theme that wasn’t already there was the listing of tags for each post.  I don’t mind tags not being included on the post excerpts on the front page and side bar.  I did think that tags should be included with the full post view…so I added them.

First I found the WordPress documentation on the calling the Template Tag “the tags” (a bit of unfortunately confusion naming by WP there…).  Easy and straight forward, I dropped in some code to get the tags in the full post view.

Keeping in mind I’m using the 1.0 version of Cellar Light, I added this div just before the second”<br clear=”all” />”

<div id="tags">
 <?php the_tags('Tags: ',' • '); ?>
</div>

I then added a bit of styling.  I wanted the tags to be visible but not a visual focus.  To accomplish this, I dropped the font size down to 10px, moved it to a right alignment and used the opacity style to soften it’s look.  I started off with just using italics, but it still looked too heavy.  I was delighted that I just assumed there was an opacity feature in CSS, having never used it before, and then found exactly how to do use it on Quirksmode.org.  The article includes important tips on IE compatibility for the opacity effect.  I’ve tested with IE 8 and I’m happy with that.  Here’s the CSS code I added to the stylesheet:

#tags {
      font-size:10px;
      text-align:right;
      opacity: .35;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE(8) opacity magic
      filter: alpha(opacity=50);                    // more IE(7) opacity magic
}

And that’s it!  Good times.  Good Hockey.  And even caught some of The Rockey Horror Picture Show.  All in all, a lovely evening.  I think I might move the dark version of the Cellar Heat…the rounded corners and the look of the footer is tipping the balance.  I expect this code to just work with the dark version, if I do end up making the switch.

You can see the result of the changes I made at the bottom of this post…or any post.  If you like this work, you’re welcome to it – although I would appreciate a comment or email telling me that you found this helpful.

First Post

Here I am, starting another blog.  What’s different about this one?  Well, they say to build readership to focus on a single, strong, compelling topic.

That ain’t me.  I have tried, but really I have a lot of interests and I want to write about them all.  So instead of keeping lots of little focused niche blogs, I’ve decide to have one not-so-focussed niche blog <grin>.

Hope there’s something here you are interested in…chances are you’ll find something you like.