Design

WordPress design

WordPress as a Design Platform: An Exploration

I make much of my living with WordPress. But, the content editor leaves a lot to be desired. WordPress can sometimes fall short from a UI (user interface) design standpoint.  Any website building platform should…

Squarespace website design

How Much Does a Squarespace Website Design Cost?

So you’re interested in Squarespace website design? Squarespace is a popular platform that offers an easy-to-use interface and relatively low cost.  You can compare Squarespace to other platforms such as WordPress and Drupal, but it…

Online shopping

Deceptive Design and Dark Patterns

As we are in the midst of another holiday sales season, it’s a perfect time to examine the intersection of design, marketing, and sales techniques.  The best design clearly communicates a message or concept. Great…

Grid overlay via CSS and a PNG

While working on a site’s CSS, I’ve been using transparent PNGs to overlay a grid image on the page in order to align design elements to the grid. Previously, I specified a repeating background grid image on the body tag, and commented it out when I didn’t want to see the grid. That works fine, but any child elements that use background images or colors will sit on top of the grid, obscuring it. And the repeating grid image will take the place of any background image which is supposed to be part of the design.

Photoshop 960 grid template

Here’s a Photoshop template for a page based on a grid 960 pixels wide. I have found this combination to be useful and start most projects with a variation of this file (the color palette I start with is different).

Color accuracy and screenshots

Let’s say you need to take a screenshot of a website for your portfolio. A common task, right? If you are on a PC, simply print screen, paste in Photoshop, and away you go. On the Mac, use some unintuitive key combination, open in Photoshop, and wait! The color is different.