Posts Tagged ‘Web Design’

Tips

— Posted on by

Typography for scanning.

When I read online, I use my cursor to highlight a line of text every now and then as I’m reading through longer form content. I don’t know what this is, but it feels like a form of tactility. I feel like I’m grabbing the words… securing myself somehow to the text. I find it hard to concentrate on reading, because there’s usually so much distraction on web pages.

Language for the internet

Parametric typography + responsive web design = bingo!

Value of an image

Images are actually pretty crap online. They take time to load, they scale poorly, getting different image formats to work together in a page is hard, you can’t search their content, content administrators have difficulty with them, they probably often communicate ZERO to visually impaired users. But then again, reading on screen sucks too. This communication revolution is actually pretty shitty.

Network design

Information Architecture is not like Architecture. Post-Modern Information Architecture… could that be a thing?

Maybe one day…

Building what you design

I’ve been reading ‘Models & Constructs’ by Norman Potter, and something that’s obvious is his intimate understanding of the real and practical construction of objects and spaces. Having the skills to build what you design increases the likelihood of it’s proper functionality and strengthens any theoretical explorations one might be toying with. To think of a website as an object is actually very helpful.

A modernist designer of websites

The internet itself is a modern context (is the internet a place? …yeah I guess that’s been established now.) but obviously that doesn’t mean that designing for a digital screen makes the practice inherently modern. In fact I wouldn’t know how you would classify web design today. The most applauded products still mostly seem like the bastard child of newspaper design, visual merchandising and scrapbooking. An honest modernist approach is needed to get us to the ‘new dawn’ of digital and interactive design.

A Modernist Programmer

Search Within the Problem

Simple Sites

I want to design simple sites. Web design seems to have developed in such a way that excess is anticipated. In a digital environment more polluted by noise and static than any other media stream we expect to be presented with an unreasonable amount of shit in and around whatever content we’re actually after. Web design didn’t progress slowly like early book design where there were real limitations and thoughtful consideration that helped define typographic and compositional standards… Web design launched straight into a hysteric free for all and we can’t slow down to consider what basic principles of the discipline might be. It’s not easy when clients are desperate for WOW factor.

Reading, Writing… Repeating Ourselves.

— Posted on by

I have been returning to the discussion on Elliot Jay Stocks’ recent post, an interview with the eminent “Typographic Designer” Erik Spiekermann. I would recommend watching the interview and reading through some of the responses despite the chest beating of a few dudes.

Working these days primarily on the design of websites, I have been thinking about the new medium and the echoes of the past that are sounding from it’s progression. As Spiekermann points out, the interactive screen is just a new medium which graphic designers must now work with.

For websites, pixels are the raw material and HTML is our toolkit, through which an endless number of technologies exist. The design act is still very much a task of the composition of sensory material to accurately communicate a message. Our closest collaborator is still the writer and we are still simply a bridge to publication and communication.

We can see as digital design evolves many of the same controversies that faced designers working with the development of printing & typography, industrial design, architecture, advertising and so on. Themes have resurfaced such as artistic expression and ornamentation vs. utility and minimalism, as well as questions of the roles of business, fine art, technology and other philosophical, social and political influences. We can see the attempts to imitate styles from the past with more advanced technologies that have their own visual predispositions (Apple’s fondness for skeuomorphism). The same thing happened with printing and typography in the transition from calligraphy to movable type in the 15th C. and again in the mid 19th C. and was the source of heated debate which involved people from inside and outside of the design world.

Designers have long experimented and argued extensively around these themes, but how much can we say we have learnt from this?

Do we need to take the long way round all over again to become masters of the new medium?

Would it be possible to skip a few steps and make a few educated guesses? Or do we need to go through the motions once more in order to come to a collective understanding about what the web actually IS.

I design websites in Illustrator and I’m not sorry.

— Posted on by

Photoshop has always been the web-designer’s go-to, but as we learn more about designing and building websites, the less crucial Photoshop really is to the process.

I started using Illustrator to design websites because I was more comfortable using the program. I don’t like sifting through 100 layers and groups looking for a highlight to a bevel. I don’t like it when changing a colour used throughout multiple pages of comps, having to do all of this manually – shape layer by shape layer. I don’t like photoshop grid lines. I could go on, but my dislike for the program in these ways is not the point.

My designs tend to make use of simple shapes and textures that are easily created and adjusted in a program like Illustrator and transformed into html and css without the need to export many images beyond a logo and maybe a background. The new-ish ‘snap to pixel grid’ feature in Illustrator is great, and the fact that I can work on multiple page designs in a single file is good for site wide amendments. (I could continue with why I like to use Illustrator, but again, that’s not the point).

I work closely with a developer and have some front end skills building basic wireframes, using frameworks like foundation to test the design as I go and ultimately provide flat PNG files to clients for approval and the developer for reference, which act as a guide to the structure of the site to be built. I’d imagine in the next few years my process will become even more hands on with the development side, though always with a goal of improving the design’s finished product.

Developers who charge extra for accepting Illustrator files and supposedly making them ‘production-ready’ or whatever are wasting their client’s time and their own. If designs are provided that can’t be built, it needs to go back to the designer or client to discuss why and change the plan. If someone designs a website in inDesign, it will not suck because it was designed in inDesign, though it may suck because the designer doesn’t know what websites are made of. In fact, I see interesting parallels between tidy paragraph and character styles in inDesign and neat typographic css styles.

The point is, that when designing websites, it is firstly important that the designer knows the restrictions and potential of html and css. Good comps or mock ups are ones that; a) communicate the end result accurately to a client and get the concept approved and b) can be built in clean html by a developer. For me, an interface design could be painted in oils as long as a developer can translate it into divs, lists and headings.

9 things I know about web(design)

— Posted on by
  1. People judge first by the quality of their content (a website is not an interface)
  2. People are searching
  3. People expect more
  4. One can only assume
  5. If/And/Or/Else
  6. Websites are programmed (One size fits all)
  7. Websites want to be hit by people
  8. Websites are design problems
  9. Websites always say “Hello” to people in some way, but rarely say “goodbye”.

Website Design Lesson: Life Drawing Class

— Posted on by

Aims: To break free from typical interface concepts. Encouraging spontaneity and creativity whilst developing the student’s implicit understanding of the constraints of html and css.

Outline 1

  • Working from a simple wireframe, ‘sketch’ a user interface on paper with pencil and other media.
  • Sketches should be roughly full size. Focus should be on quantity over accuracy and abstraction over detail.
  • After a number of drawings (say 30) are done, review and analyse patterns.
  • Choose one or two and build them in basic HTML to test their effectiveness.

Outline 2

  • Working from a wireframe, ‘sketch’ an interface using html as the medium. For example:
    • replace the stick of charcol with the div tag
    • replace line and tone with h1, h2, h3 and so on
    • replace shade with p
    • create perspective and highlight by replacing forground with a and input
    • Begin with several quick, loose, timed sketches then stop to review and for analyse patterns
    • Develop into more extended studies