Website Inspiration: Texture and Grids

By Erika Goering,

  Filed under: KCAI, Online Presence for the Artist
  Comments: Comments Off on Website Inspiration: Texture and Grids

What I’m drawn to in web design is breaking the boundaries of what it means to be digital. I like texture, gradients, non-rectangular shapes, and recognizable (real-world) imagery, like coffee cups and notepads. I don’t want the web to feel cold and sterile. I want it to feel like real life.
But I also want it to be organized and structured, with a classic grid-based layout.
  • http://www.spoongraphics.co.uk/
    • This site appeals to me because it’s got a tactile quality that I appreciate in web design. As I mentioned before, I like blurring the lines between digital and analog.
  • http://koffieverkeerd.be/
    • I like coffee.
    • Actually, I like showing evidence of interaction with coffee. It adds a uniquely imperfect human element to the design. It says, “Yes, I’m addicted to caffeine because I don’t get nearly enough sleep because I’m constantly working because I’m so dedicated. So hire me.” Although, that may be a bit removed from what most people probably see as just, “Hey. I like coffee.”
  • http://www.rga.com/
    • This one doesn’t have the same textural qualities as most of the others on this list, but it does have something the others don’t; a very strong grid on a fluid layout. I resized my browser window several times, and each time, the site sprung back to a perfect grid. Even the images resized automagically. Beautiful.
    • I almost never design a site to be fixed-width. I worry that people with giant hi-res screens will feel shortchanged and people with tiny low-res screens might end up scrolling sideways. So, I usually just make it all fluid and call it a day. Everyone gets a full-screen experience.
  • http://fuelbrandinc.com/#/about
    • Subtle gradients give this site a sense of depth that I like. None of that flat, boring website stuff.
    • The background color gracefully changes as you venture into different areas of the site.
    • Subtle highlights and shadows on navigational elements give it even more depth.
    • Yay, depth!
  • http://timvandamme.com/
    • This site gives a digital home to a familiar business card format. Pretty cool idea.
    • I like the idea of bringing analog ideas into web. (I know, I said that a few times already.)
  • http://www.interexpresso.pt/
    • I love when website textures aren’t just arbitrary and “cool.” They’re best when they have conceptual meaning and linkage. This one uses a woven coffee bulk-bag texture to advertise their coffee makers. Pretty sweet.
    • I love coffee.
  • http://www.brizk.com/
    • Depth & clarity. Two wonderful things.
    • There’s a nice simplicity about this one. Monochromatic, but visually interesting compositionally. Kind of whimsical with the clouds in the background and the flight path of the bird. (At least, that’s what I interpret that to be.)
  • http://www.cutler.it/
    • I’m just REALLY drawn to this layout. I like the slideshow at the top, and the grid-based layout everywhere else.
    • The black & white, high-contrast thing is nice. It separates the sections in a very clear way. The little breaks between sections kind of stitch the pieces together.
    • The only color on the site’s home page is from the projects being showcased. That makes the website itself kind of fade into the background while the work stands out on its own.
  • http://www.thisisbrandnew.com/
    • This wall & handwritten thing is what I have in mind for a new layout for my process blog. I want to make my process blog look like it’s pinned up for a critique. Because, like much of what I’m doing, it’s just another work in progress.
  • http://forabeautifulweb.com/
    • I’m digging the floral wallpaper. Again, analog ideas brought into a digital realm.
    • Pretty elegant, organized design.
  • http://secondandpark.com/
    • Grid, grid, grid! Yay, structure!
    • I also like the slab-serif typeface here. I’m pretty sure it’s Clarendon. I loves me some Clarendon. It’s strong, yet elegant.
  • http://www.amuki.blogspot.com/
    • Fixed-width isn’t my thing, but I do enjoy the bunch of things like paper, staples, paperclips, and drawn elements.
  • http://spoutcreative.com/
    • Texture and grid. Two wonderful things together.
    • The color scheme is both fun and sophisticated. Which is great for a designer. I think it shows versatility.
  • http://www.giblette.com/
    • This site definitely conveys a specific feel. Neo-retro kind of stuff. Nostalgic, in a way. It kind of reminds me of Hammerpress.
  • http://hammerpress.net/
    • Texture and grid. Yay!
  • http://www.skialpine.com/
    • This one has a pretty sweet navigation bar. It’s got texture so nice I can almost smell it.
  • http://www.deniseandrade.com/
    • This one has a very hippie feel, which appeals to me because I’m the daughter of an old hippie. And I have dreadlocks, so… Yeah. I’m a bit of a hippie too.
    • The paper roughness and the intricate, but subtle pattern, combined with a watercolor illustration in the header makes it feel very familiar and inviting.
  • http://doejo.com/
    • Taking a totally different approach is this site, with a very structured 4-column grid and fearless use of bright colors. Web design can be soft, loud, structured, or freeform. That’s why I love it so much.
  • http://www.kiluka.ch/#/portfolio
    • Holy crap. Amazing design.
    • It looks like it’s all Flash-based, though. But that doesn’t have to be a bad thing.
    • The user experience is nice. You click and drag back & forth between projects, and it uses the intensity of your dragging motion to determine the speed and resistance of the scrolling. You can even fling it a bit if you want to. Subtle detail, but much appreciated.
  • http://www.cherokeemills.com/
    • Another paper texture site. Nice tactile feel.
  • http://www.artflavours.com/
    • Lots of different textures here. And handwritten stuff. Because it’s real-world design. On the web. But it’s real. Mind-blowing.
  • http://www.prowseed.com/
    • This site is so sexy I want to dig my fingernails into it. And nibble on it for awhile. It’s delicious.
    • The wallpaper is dimensional and elegant. And the ribbons give it an even more decorative feel, while still being clean and simple.
  • http://www.narfstuff.co.uk/
    • I love the top of this website. It’s got analog elements and a  nice use of color.
    • However, when you scroll down past the exciting part, it all fades to white. BO-RING. And no fancy footer. They missed an opportunity here.
    • The top half of the website is nice.
  • http://www.organicsupermarket.ie/
    • I rarely come across a good grassy website. This one is pretty great. I feel like I’m in the environment, standing over a plot of land. I can almost smell the grass…
  • http://adaptd.com/
    • The texture here is more subtle than I usually care for, but it’s done very tastefully.
    • The color palette is modern and classic at the same time. Pretty timeless, I think.
  • http://www.electricpulp.com/
    • This one has a navigation bar that, when you scroll away from it, a mini version of it pops down from the top and sticks with you to guide you through your journey of the site. This is definitely useful for pages with lots of scrolling.
  • http://www.friskweb.pl/
    • The footer is pretty clever.
    • The contrast between the text and the background for the rest of the page isn’t great, though.
  • http://www.designsponge.com/
    • They recently re-designed their site. Their last version was okay, but this one is pretty wonderful. Lots of photographic, analog elements all over the place. I want to pick up those ribbons and play with them.
  • http://www.carbonica.org/
    • This site makes me want to recycle. It looks very recyclable and eco-conscious, which is what they’re going for.
  • http://www.helmy-bern.cz/
    • The rough torn cardboard is a very beautiful part of this site. It provides dimension and texture, and makes the site feel real.
  • http://henryjones.us/portfolio
    • Here’s a portfolio site with a leather and wood feel. Which is perfect for a classic portfolio.
    • It sets a mood for the whole thing; sophisticated and experienced.
  • http://www.rzmota.com/
    • Bird’s-eye view of a workspace. Nice. But a bit heavy on the Apple products.
  • http://www.thebrowncorporation.com/
    • Hand-drawn on a cardboard texture. And it’s hilarious to boot.
  • http://www.ernesthemingwaycollection.com/
    • Wood, paper, and coffee. Need I say more?
What I ultimately want my website to become is something balanced between clean and textured, digital and analog, design and fine art. I want it to show every aspect of who I am as a designer, artist, and geek.

Comments are closed for this post.