interfacesketch

It's a satirical tweet, but I find it interesting the tweet is 6 year old and reflects how little has changed in website design. I’m undecided if this a good or bad thing.

For startups and SaaS websites this layout template is instantly recognisable. Is it a cookie-cutter approach to website design? Or a boring but reliable layout template?

I recently started designing t-shirts aimed at gamers. It's not art, more like graphic design. I uploaded the designs to a Print on Demand (POD) service. Sales so far are zero (which is what I was expecting) but the main movitation was to improve my design skills.

Here are mockups of some of the designs:

https://postimg.cc/KkLKJkxd

What I would love to hear from anyone (especially gamers) is:

Are these designs any good or likeable? Or something you would never wear?

The game controllers are not meant to imitate actual game controllers (e.g. Xbox) but are a stylized interpretation. But I wonder if gamers prefer a copy of their favourite console controller instead of something more generic or abstract?

And for those interested in more detail...here's what I've learned so far designing t-shirts:

- Keep it simple: A design that is easy to understand and be seen from a distance can work well.

- Choice of type matters: This makes a big difference. I haven't mastered this by a long shot. Still learning and practising.

- Colour is important: finding a pleasant-looking combination of appealing colours is really hard.

Fun fact: The design with the wording 'Ready to play' was rejected by the POD service. I later discovered it was because it is a trademarked phrase!

Thank you everyone for your encouraging comments. As with any product, there's always the fear of "if I build, will they come?" But without building, I'll never know. So time to get building :-)

I hope it's OK to piggyback on this question and ask: are there any opportunities in designing (and selling) website themes, particulalrly non-Wordpress themes?

Many replies here say don't offer design. But presumably, even when you're developing the backend, you need to reach for a front-end design or template - either free or for sale. The market for HTML/CSS themes is completely saturated though - is it fruitless to pursue this avenue?

You might not need a static site generator for a single page website. Why not simply author it directly in HTML and CSS? It might actually be faster (and simpler) to code by hand.

Here are two dummy test pages I made a while ago to see if I could create a fast-loading, fairly lengthy text page for slow mobile connections.

There is no table of contents, but you could add that as a simple list of links to the top of the page.

Version A (no font loading): http://interfacesketch.com/test/energy-book-synopsis-a.html

Version B (loads custom fonts - an extra 40kb approx): http://interfacesketch.com/test/energy-book-synopsis-b.html

> A blog is really fast if you don't put anything but text in it basically

Here's a dummy test page I made a while ago to see if I could create a fairly lengthy, fast-loading text page for slow mobile connections. It's hosted on a cheap shared hosting plan, so it may well fall over (or not!)

Version A (no font loading): http://interfacesketch.com/test/energy-book-synopsis-a.html

Version B (loads custom fonts - an extra 40kb approx): http://interfacesketch.com/test/energy-book-synopsis-b.html

The image at the top of the page hasn't been optimized (about 40kb), however I do think aesthetics are important in page design and I'm against reverting to a plain HTML look with no CSS styling. The test pages above are plain looking but, I hope, reasonably pleasant to look at. (The custom font version looks nicer in my view than the no font loading version, but of course it adds a bit of extra page weight).

Thanks for trying out these test pages.

Version B has two different font weights from the same family: Regular and Medium/Semi-bold. Version A relies on the fonts already installed on the user's computer.

Dropping the semi-bold font weight would save approx 23k, but having a regular and bold font weight felt like the minimal styles needed to support the page.

Dropping the header image would save 40k. (Note: the header image hasn't been optimised using something like the HTML srcset attribute which can load different picture sizes for different devices).

Text articles are probably the most widespread type of content on the web. Most web sites are not web apps. But many developers want to re-construct web sites into web app architectures even when there's no benefit to the end user.

I posted the links below on a previous discussion about AMP. They are two examples of basic, javascript-free web pages with text content. There's about 2500+ words on these test pages, but the page weight is still much smaller than, for example, a medium article with one tenth the number of words (250).

Try loading them on your mobile on a 3G (or slower) connection. Do they load fast or slow?

Version A: http://interfacesketch.com/test/energy-book-synopsis-a.html

Here is an identical version to the above but one that loads custom fonts (approx 40kb extra).

Version B: http://interfacesketch.com/test/energy-book-synopsis-b.html

Thanks for trying out these test pages! When I created them, I tried loading them in different locations on my phone. Surprisingly, even in busy city-centre locations (using 3G), the pages weren't always loading instantly - but they were fairly fast, enough to feel usable.

Do we really need Instant Articles (Facebook) and AMP (Google) when we can accomplish fast loading pages with plain, uncomplicated HTML and CSS?

I feel that many web developers don't realise that simple HTML and CSS is often all you need to make clear, fast loading pages. No complicated tricks or techniques required. You can make the page reasonably pleasant in appearance too.

Think of the sites you often visit: news stories, blogs, magazine-style sites, discussion sites. These are mostly text, not web apps.

I hope I'm not hijacking this thread, but I'd like to ask if readers find the web page links below fast to load on their mobile phones? They don't use AMP.

I created the pages below as a test because I was (and still am) frustrated by the slow page-loading speeds when using my phone with a 3G connection.

The page links below represent a common article/blog/report style of page. There's about 2500+ words on the page.

The page content is CC licensed but the pictures from the original synopsis are not included despite the references in the text (since this was just a test)

So is it fast?

Version A: http://interfacesketch.com/test/energy-book-synopsis-a.html

Here is an identical version to the above but one that loads custom fonts (approx 40kb extra). Is this slower?

Version B: http://interfacesketch.com/test/energy-book-synopsis-b.html

If you need to support older browsers without Flexbox, another option is to use a tiny (less than 1kb) CSS grid system called Pocket Grid.

The grid system lets you position blocks of content side-by-side similar to Flexbox, and blocks can wrap to another line when there isn't enough space. It's not an equivalent to Flexbox, but for some types of layouts it could be used as a possible fallback.

Pocket Grid has been around since 2013, it's a shame it hasn't gained more attention:

http://arnaudleray.github.io/pocketgrid/

Take a look at Pocket Grid. It's not a framework, but a tiny responsive CSS grid system. Given that many websites are relatively simple in layout and presentation, it may be all you need. It's a shame this grid system hasn't gained more traction (it's from 2013)

http://arnaudleray.github.io/pocketgrid/

And now for a bit of a rant...

For many websites, you don't need a framework. My (completely anecdotal) impression is that few web developers trim the fat from the frameworks they use. That is to say: the websites they create have many unused CSS rules and unnecessary scripts. This amounts to substantial extra KB being downloaded by website visitors even when it's not needed.

Additionally, many sites are over-engineered with excessive Javascript to render simple web pages (even when the site is not a web app).

I hope it's fine to post this link, but I have some simple, free sketch sheets of phones, tablets and web browsers. These are designed for printing out and sketching on paper. They are in SVG so you can create your own sketch sheets. The files are CC licenced.

http://www.interfacesketch.com

I only discovered this CSS grid recently (even though it's been around since 2013) and was very impressed. It's a shame it hasn't got much traction.

I agree with some things in this article and disagree with others.

First, digital has opened up opportunities for hundreds if not thousands of film makers (whether they are amateurs or aspiring professionals). Now, filming in all its myriad forms is within reach of so many people - that's prety amazing and largely down to digital.

However, digital is only now beginning to catch-up with the high resolution possible with physical film. For example, 70mm film is over 50 years old and yet, if you've ever seen it projected on a giant screen (in letterbox format, not imax) you'll know it can show enormous, stunning images. I don't know if 4K digital can match 70mm film resolution, but I'm glad to see digital resolution increasing.

For me, going to the cinema has always been about seeing a film on the big screen. But plenty of cinemas don't have big screens. In fact, many multiplexes show their less popular movies on smaller screens. I always find it disappointing to walk into an auditorium with a small screen: you're paying the same price as those watching a film on a bigger screen in another auditorium, but you're getting a poorer experience.

If you look at the history of cinema-going, you can see there was a great deal of "showmanship" that's completely gone today. For example, how many cinemas have curtains? There's a simple pleasure in seeing the lights go down in the auditorium and the curtains drawing back. I can remember a time when a lot of cinemas would show pre-film trailers or shorts on a smaller-sized screen. Then the curtains would close - there would be a pause - and then they would open again to reveal the screen having grown to full ginormous size. Simple, but awesome!