Breaking From The Expected In Modern Web Design

As the modern web matures, visitors are savvier. We would argue that they can smell a design template, a stock photograph, or a cliché a mile off. It might be worth going the extra mile to distinguish your brand.

bootstrap

An irreverent comment on the futility of using off-the-shelf templates? Sweary words redacted.

The screenshot above is from a joke webpage that pokes fun at the myriad companies using Bootstrap templates for their web presence. Bootstrap is a front-end framework originally designed to allow developers to create Rapid Prototypes of their ideas using simple and repeatable code patterns.

It has since morphed into a quick and cheap way to build simple websites, with off-the-shelf themes available either standalone or baked into countless WordPress or other platform templates.

The trouble is, it shows. Alongside the ubiquitous skyline shot, or corporate shaking-hands-in-front-of-a-fancy-glass-building stock photograph, the same familiar patterns keep popping up. Each time losing potency. Losing the audience’s attention faster than a ‘share this on Twittergram’ button.

read more →

Web Design Inspiration Gallery #3

Qasimi

Screen-Shot-2016-02-17-at-4.22

 

https://www.qasimi.com/

 

read more →

Websites are Not Print: Pay Attention to the Movement.

loading

The front-end of a website is, naturally, the part that visitors see. The branding, images, illustration, typefaces, overall layout. That these visual aspects are crucial is a given. Every touchpoint of the brand needs to be consistent, and deliver the correct message and tone.

But website pages are delivered across networks, to a variety of devices on networks of different speeds. A page might be beautiful, but if it takes five seconds to load, with all sorts of funky stuff going on in the meantime (90s style progressive-image reveals, pages jumping around as bits get loaded in, FOUC) this disrupts the experience. It reflects on the brand and the perceived usability. It has been shown to dramatically affect engagement. After three seconds of loading, up to 40% of users will abandon your site. It also contributes to search-engine ranking!

There are a number of strategies to improve performance. Here is an overview of just a few of them.

read more →

Web Design Inspiration Gallery #2

88and90, Lexington Avenue

Screen Shot 2016-08-21 at 5.27.49 PM

 

http://88and90lex.com/

 

read more →

Webdesign Inspiration Gallery #1

Presenting our first showcase of favourite recent designs from around the web. Be inspired by them, as we are.

“To steal ideas from one person is plagiarism; to steal from many is research.” – Steven Wright

 

Michi ramen

s4

 

http://www.michiramen.com/

read more →

Desktop and Web Typefaces – An Exciting New Era for Designers

webfonts

Today Myfonts.com announced a new service allowing designers to subscribe to a vast number of desktop typefaces by Monotype foundries. Over 2200 to be precise.

Combined with webfont subscriptions provided by fonts.com (or typekit), web designers now have an incredible arsenal of fonts to try out, with complimenting systems that make experimentation convenient and cost-effective, contributing hopefully to more interesting design.

read more →

Simple Search Engine Ranking Reports

search ranking

We usually provide custom SEO services to improve our clients’ search engine ranking. This requires consultation to craft an optimisation strategy that suits you. Researching your industry, reviewing your current website content and code, and choosing keywords to target and advertise on.

Such custom services can be too expensive for some businesses. But we now offer a simple product to help you monitor your search engine ranking for 15 keywords on 4 search engines.

read more →

Chinese and Other Non-Latin Typefaces for the Web – Google Noto to the Rescue

If you’re designing for multiple-language web interfaces, you’ll want to consider Google’s beautiful Noto typeface as a great starting point for non-English views.

noto-chinese

Google’s Noto typeface was designed specifically to support all scripts in the Unicode standard. It is a huge ongoing project that was released into the wild in 2013 to help with font support and consistency on their Android phones.

You can read about the rationale and learn more about it from Google’s own Material Design specifications.

While Google are using this in their mobile device interfaces, we can also use them to our benefit when designing and developing for screens, or even for print.

read more →

The Irregular Grid – The Layout to End All Layouts

We’ve been using irregular grid layouts a lot recently. Of all the options for laying out items of content this one keeps asserting itself as the best tool for the job.

PINTEREST

And here’s why.

read more →

Contemporary design: considerations for a modern web project process.

responsive design example

In the age of responsive and animated websites, presenting and agreeing designs before moving to code is not what it once was.

Turtle Media project stages used to – and to a large extent still do – follow a Waterfall model, where we first gather requirements and preliminary assets and text, then create wireframes (if the site is warrants it. read why this company doesn’t).

Once we have agreed the structure and possess some project assets, we are ready to create mock-ups of the intended site design for approval. Typically we show key pages; perhaps the home page, a product or service page template, and a blog article page. These are delivered as JPG files, so they don’t move or adapt to different screens. Now that mobile audiences are increasing for virtually all types of websites, we show two versions of how each page will look: desktop and smartphone. Then we ask for approval to begin the coding.

read more →

 

Let's make something. Contact us.