1. Apr 20

    Designing with Typography

    I am currently working on a project which for political reasons will not be using a lot of illustrations. The reason is that illustrations tend to communicate particular norms and values, as well as being open for ambigous interpretations. For a website on a complex and politically sensitive topic, which does not want to be perceived to express any partisan views, it may be smart to stay away from non-abstract graphics which can be interpreded to carry meaning that was not intended.

    So, based on these restrictions I am looking at using typography to make the website interesting and pleasing to the eye.

    Finding the right Font

    There are several nice tools online that helps you find and compare font types. Here are some of the ones I like.

    flippingtypical lets you easily view and brows through the fonts you already have installed on your computer.

    fontbrowser lets you brows through and preview a long list of font types

    fontsquirrel and dafont are great places to download free fonts

    Manipulating Typography with CSS

    When you think of it there are surprisingly many aspects to typography that can be manipulated with CSS. Speckyboy.com has more information regarding CSS web safe fonts and font sizes in different measurement units. There are several tools available online for you to play around with these CSS settings. Below are some nice ones:

    typechart provides charts and downloadable CSS for web safe fonts combined with various CSS font settings

    fonttester lets you define several typographies, view them, and compare them side by side, and download the CSS

    Manipulating Typography by Dynamic Image Replacement

    If the CSS options for manipulating typography are too restrictive for your project there are several ways of using Javascript, Flash, or PHP to dynamically replace text in headers etc. with images depicting fancier fonts.

    I will get back to this more in detail in a later article. Now I have to work on my typography website design :)

    Expanding Font Options by Including Fonts on the Server Side

    Instead of using techniques generating images to replace fonts, as mentioned above,  you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

    Share/Save


  2. Nov 07

    Free Tools for Generating Color Schemes from Images

    Using an image as the basis for your color scheme is a good idea, particularly if the image is a part of your design. There are several online tools that can help you generate color schemes from any image. Nature photos often provide the most harmonious color schemes, so I used a photo taken while diving to test a couple of free color schemer tools.

    Color Palette Generator
    This tool asks you to submit the URL of an image and then generates a color scheme based on the colors present in the image. It provides you with a web safe color scheme containing five vibrant colors and five duller ones.

    Click to continue reading “Free Tools for Generating Color Schemes from Images”

    Share/Save


  3. Nov 01

    JavaScript Frameworks and Ajax Libraries

    Ajax (Asynchronous JavaScript and XML) has given us increased user interface responsiveness and rich interaction used in faster and more user friendly web applications.

    There are an increasing number of JavaScript Frameworks to choose between. Prototype, jQuery, MooTools, Dojo, YUI, and Script.aculo.us are some of the more popular ones.

    Below is a comparison of some the features offered by some of these frameworks, courtesy of Danny Douglas

    There is a more detailed comparison of more frameworks in Wikipedia.

    Click to continue reading “JavaScript Frameworks and Ajax Libraries”

    Share/Save


  4. Oct 31

    Free Image Effect Tools

    There are several free online tools that quickly and easily can add design effects to your images. Here are a couple that are simple and straight forward to use.

    Polaroid Spread
    Dumpr offers several free image effect tools for your uploaded or linked image, in addition to some paid options. the Polaroid Spread tool makes your image appear like a collage of smaller polaroid images.

    Click to continue reading “Free Image Effect Tools”

    Share/Save


  5. Oct 29

    A Look at Web Design Genres

    Web design trends changes as new techniques are introduced and browser technology evolve, but there seem to be certain central themes that are somewhat consistent.

    Minimalism and Functionalism

    Minimalistic web design focuses on content and function, and tones down the use of graphics. The layout is often very structured and design elements like position, size, color, and typology is used to emphasis the content.

    A great example of minimalist and functionalist web design is A List Apart which uses limited graphics and color, a simple grid layout, and a slight variation in typology for subtle emphasis.

    Click to continue reading “A Look at Web Design Genres”

    Share/Save


  6. Oct 27

    Old, but still good

    This award winning ad video manage to make something as mundane as a washing machine seem exotic and beautiful!

    It is a couple of years old, but worth visiting again…

    Makes you want to go scuba diving, doesn’t it? …or maybe do the laundry?

    Share/Save


  7. Oct 26

    Graphic Desktop Wallpaper Calendars

    I stumbled across these beautiful wallpaper calendars at Ton3.net today, and started playing with the idea of making some of my own.

    Time will show if I get around to it…

    Share/Save


  8. Oct 25

    My very first Word Press Theme

    Today I have finished my very first Word Press theme. Well, I guess you can question whether its actually finished as I have a tendency to never be entirely satisfied with something I’ve been working on. There is always just a couple of things that need to be improved…

    I learned quite a bit about Word Press, which was one of my goals, besides making my very own original Word Press theme for my brand new blog :)

    My inspiration for the design was the pretty colorful  design at Web Developer Wall, and their post on how to make a web design based on a CSS Large Background.

    Click to continue reading “My very first Word Press Theme”

    Share/Save


  9. Stylesheet Management

    Organization and separation of distinctly different aspects of a web application or website is good code manners and dramatically eases maintenance and adding changes. In application development MVC frameworks separates models, views and controllers. And in web development you separate functionality from visuals by using Cascading Style Sheets.

    In an article on Progressive Enhancement with CSS Aaron Gustafson at A List Apart discusses the separation and organization of stylesheets. Below is his suggested basic model which separates type, color, and layout from each other, and deals with the various types of media type layouts a website may be viewed in.

    The article also discusses how to deal with oddball browsers like N4, IE6, and IE7.

    Share/Save


  10. Oct 24

    Famous First Words…

    Welcome to my new blog :)

    I am planning to use this little corner of the Internet to muse about web design, design, art, and other eye candy. Any comments and suggestions are very welcome.

    Let’s see how it turns out shall we?

    Share/Save