My notebook is where I keep random notes, experiments and bits of research. Some of these become full posts in time, others stay here for prosperity.
This was going to be the cover image for my report on Insurance Brokers. However, it didn’t work as the usual “Lloyds of London” cliche didn’t come out.
Still, I think it has merit in its own small way. The skyline was drawn out across a photo knocking around, then the strips added afterwards. I used an opaque fill for the skyline – I didn’t want it to block in as that looked rubbish and wasted the stripes.
Stock photography: what’s available free and for a fee?
My article on using stock images to liven up your content marketing included references to a few stock libraries. These are sites where you can find images to use, either free of charge or for a small fee. There are pros and cons for each, although generally I’d suggest you limit free images to general blog posts.
I will review and extend this list as I come across more. Being included on it does not imply a recommendation.
Free Stock Libraries
Flickr’s been around a long time and been through various incarnations. It has an extensive selection of photographs, although most are not available to use. To find ones you can use, search with the “Creative Commons” filters enabled. Quality is highly variable, primarily because it started as a personal photo-sharing site (think Instagram before it was created).
A free to use stock library where everything is free to use and modify (with some restrictions). The quality appears quite high and varied styles are available.
Unsplash is a free to download stock library with a wide range of available images. All of the images can be downloaded, modified and used for commercial purposes. However, when I have found images that are used widely, they usually trace back to Unsplash. If you want something a bit less common you may be better looking elsewhere.
Paid Stock Libraries
Chinese owned photo sharing website. You can find free to use images here if you look hard enough, although the search function doesn’t make this easy. Images which need paid licences link off to other sites. Although interesting, I don’t find it particularly useful.
Building off of their creator’s network, Adobe Stock offers a wide range of photographic styles and content. It uses a subscription licence, around £20 a month where up to 10 “standard assets” can be downloaded. Unused assets can be rolled over each month up to a maximum of 120 over 12 months.
An artist owned co-op which has some quirky and left field imagery on site. The quality is consistently high and has character and personality. Subscriptions start at $12 a month with unlimited downloads. They sometimes release limited numbers of free to use images.
Comprehensive and long-standing stock library service. Quality is exceptionally high with a price to match. It’s particularly useful if you need time sensitive images around current events, or images of celebrities and personalities. Images can be bought individually and start at £150 for a small size, to over £3,000 for a pack of 10 high resolution images. It could be too expensive for a small business, unless you want to make an impact.
Long established stock library that has a reputation for quality imagery at a reasonable price. Prices vary from monthly subscriptions to pre-paid packs to one-off images. Not all uses are covered by their licences, so you may need to check before you make your first purchase.
Which ones do I use?
There are 3 libraries that I tend to use. Flickr is where I’ve sourced images from time to time purely for blog posts. Occasionally I post Creative Commons images there too. Death to Stock and Getty are both sites where I’ve found images for commercial use.
Google Image Search
Just a friendly reminder that Google’s image search is not a place to source images. If you download something from there and put it on your blog expect an invoice or court summons.
Fixing “Page Title Not Defined” in Matomo analytics
For months I’ve had “Page Title Not Defined” popping up in my Matomo analytics. I was concerned about the impact is might be having as it seemed to be fairly consistent “1 per day” coming through. Did I have a bug in my site I needed to fix?
The short answer is no.
After a bit of hunting through server logs I found the culprit. I’ve been subjected to daily spamming through my contact form at a fairly regular rate. The spam’s pretty generic – usually someone trying to sell a freelance writer a bunch of essay writing services. It’s annoying but harmless.
Spammers use software which allows them to fire messages into contact forms and supposedly bypass any captcha or other protections in place. A (welcome) side-effect of this is it doesn’t trigger Matomo properly, hence the “Page Title Not Defined” error.
If you do find “Page Title Not Defined” popping up it is worth having a quick check of your site just to make sure you’re not missing a <title> tag in your heading, as this can also cause it. Otherwise double check your server logs for a correlation between contact or comment form spam and the appearance of the warning.
You can then safely discount these from your analysis, which Matomo has probably done already.
How I create charts for reports without using Excel
After I published my review of mobile product page designs, I had a couple of people ask how I put the charts together in the article. Their working assumption was I’d created them in Excel and they wanted to do the same.
Sorry to disappoint, but while the data was held in Excel and I did use charting to help with some analysis, the charts on the site were all hand-cranked.
I have a few templates for charting and infographics in Affinity Designer. One of these formed the base, although I adjusted it to have a portrait format rather than my usual landscape. It seemed more appropriate given the topic of mobile device design.
The template has its own grid, the base axis for the charts, base bars and text styles defined. Doing this up front makes creating repeating charts that are consistent across a piece a lot quicker and easier.
Working out all the bar lengths would have been a pain in the neck, had I not cracked it a couple of years ago. The bars are created with 1 pixel width representing 1 percentage point. A bar representing 90 percent of something is 90 pixels wide, 50 pixels for 50 percent and so on. At this stage they’re too short, so I resize all the bars together to a more appropriate length. The correct proportions are preserved, the chart is accurate and the design is balanced.
Using this approach it took about 10-15 minutes to get one chart done.
Tip for your own blog: build up a few templates for things like charts that you’ll use quite often. It saves a lot of time when you need to create them, and you’ll get consistency across your blog posts and reports.
You can read my report on mobile web page design here.
Exploration of tubes, shapes and colours
A simple experiment looking at lines, shapes and colours would work together.
I created a simple 3D tube and layered them in a rough curve. What I was interested in was how the ends of the tubes would interact with a background of the same colour.
It’s interesting how the curve seems to break when the top matches the colour of the background.
Experimenting with “hello”
I was looking for ways to use type to break a page up. I wanted to use ascenders and descenders to create grids on a page.
The one I settled on is above. It was pretty obvious in hindsight, although it popped out in the middle of my brainstorming. Maybe I was avoiding the obvious!
One alternative had the descender coming off the O. It didn’t work – it ended up making it look like a q.
Another variation on the o motif. With a little more work on the O it might work. Running a vertical away from the e almost worked.
A celebration of my Nokia 8110 “Banana Phone”
Over a year ago I decided I’d had enough of being tethered to an iPhone. I ditched it – recycled it to one of my daughters, and bought a Nokia 8110. It’s a design classic and a thing of beauty.
It has form and shape. There are curves and changing textures. It sits easily in the palm of my hand and it’s pretty good at making and receiving phone calls too.
The graphic is a homage to my favourite mobile phone.
Architectural drawing experiment
An experiment using Affinity Designer to create a perspective based drawing. Part of my ongoing efforts to improve my illustration skills with some simple, quick sketches.
Started with a basic set of perspective guides. These are created from a series of overlaid triangle shapes. The height and apex can be adjusted to create the correct perspective point. This is easier if you change the triangle to “curves” in designer and drag the apex node to where you need it.
The build sketched. This is simple, so I used a simple block building.
Note to self: do elements on the same perspective line at the same time. I made the mistake of drawing one of the windows on the right side at a different time to the left, which threw it out. Same mistake not made next time!
Detail filled in. I used one of my “city skyline” templates for the background. Not 100% convinced about the shading.
Job done. Took about an hour. Key lessons:
- converting a triangle to curves and moving the apex around is far easier than trying to adjust a triangle shape
- use multiple “triangles” to make drawing shapes easier
- do elements on the same perspective line at the same time (e.g. do all the windows on the same floor at once!)
Affinity Designer’s vector brush tool
Affinity Designer on iPad is a neat piece of software. It’s where much of my work starts life, although I might use the desktop version for finer finishing details like kerning and pixel placement.
This is an experiment with the Vector brush. I rotoscoped an image I took a year or so ago. The aim wasn’t to create photo-realism, rather to test the accuracy of the tool and a style I was playing with.
There was a second objective. In a year or so I’ll go through a tech refresh, which will probably mean replacing my iPad and MacBook Pro with a single, 2-in-1 laptop. I wanted to test whether Affinity Designer was a reasonable replacement for Adobe’s Procreate.
There’s a few problems with it, not least it sometimes decides where it wants to place nodes rather than where I want them. Being able to go back and edit the line is a bonus though.
Experiment to create a perception of shadow and light. Part of my ongoing quest to fight back against “flat” design in illustration.
Someone inside Huffpost thought this was “good design”
I can’t imagine the conversation that took place when someone said, “Yeah, let’s have the video fly out and start playing automagically”. It’s not like we haven’t distracted them enough with the crowded adverts, subscribe box and the fixed top menu.
Don’t be like Huffpost.
Choices – an experimental illustration
I’m still evolving my illustration skills. They’re a bit weak, but things are getting better.