My failed first attempt to collaborate with a business owner

FourThings was an idea I had last year for approaching new businesses that I wanted to collaborate with in some way. I wanted to be able to initiate contact with business owners in a way that offered them immediate value while demonstrating competence.

I hoped to stand out by reaching out that way and give the business owner a reason to either get back in touch or think of me in the future when future opportunities to collaborate popped up.

The idea

I started FourThings because I hadn’t figured out what I wanted to do with Inkbike yet. I knew I wanted to work with other business owners in some way for personal and professional development, but I honestly didn’t (still don’t) have a clue what service I could offer – free or otherwise.

I came to the realisation that I should just treat collaborative work like I would my day job: if my manager gave me a type of project that I had no experience of working on before, I would just go away and try to figure something out.

Everyone has to start somewhere and there’s not much you can’t figure out on Google right?

Right.

So I decided I would investigate small businesses I wanted to work with, figure out what they were doing, and try to think of realistic ways they could expand their operation in some way.

These would become projects that I would outline, put into a document and send over in my opening email to a business owner. I knew I didn’t want to spend forever doing this for each business, so I decided to limit myself to four projects.

F-four…things – geddit..?

I hoped that by making four projects, I had four chances to come up with something that the business owner might like.

The ideal outcome would that they liked one of the projects, turn around to say;

Inkbike-person, you’re a brilliant curly-haired genius and I love your idea.

I think it could be great for my business but I don’t have the time at the moment to bring it to life – would it be something that you’d be interested in doing for me?

Imagine. the. scenes.


To achieve the desired effect, I wanted to focus on providing the business owner with value (while actively demonstrating the value I could provide), which meant creating something that went one step further than just pitching basic ideas.

I wanted to give a full break-down of what it would take to roll out the idea, costs and all, so they would have a step-by-step guide if they wanted to go ahead with it.

I thought it was a pretty good idea for being proactive about my development and was super excited.

Plan sorted, I went to work.

Execution headerThe company I decided to focus my efforts on was Cha Lounge. It’s a place I love (in case you didn’t already get that impression from the interview), have spent enough time in to have done some indirect research and I felt Mandeep (the owner) would be open to new ideas.

The four ideas I came up with were (*ahem*); Cha Spice, Cha Pots, Cha Classses and Cha Social. You can check them out in the way I presented them below or download a copy of the document by clicking on this link.



First page of the finished Four Things document

Second page of the finished Four Things document

Third page of the finished Four Things document

Fourth page of the finished Four Things document

Fifth page of the finished Four Things document

In the end I think I spent about a month chipping away at this. It worked out as a couple of hours here or there when I found the time in my evenings and weekends. I was pretty proud of how it came together!

Each point was made based on research that (I hoped) was detailed enough to be actionable while being low-risk financially.

Thinking it looked ready, I typed up an introductory email and sent it on over to Cha Lounge.

How I failed

Months passed and I didn’t hear back.

I started to get really paranoid that I might have accidentally over-stepped a boundary by mistake and offended the recipients somehow or that my ideas were so fantastically bad that Mandeep felt too uncomfortable to get back in touch.

In reality, Mandeep enjoyed the document but was busy running a new, growing business and so never found the time to reply.

Ultimately, the projects didn’t end up getting off the ground (although I did end up collaborating with Mandeep on other things), but that wasn’t why I considered my first collaboration attempt a failure.

The reason is because I was put off – I never made another copy of FourThings for other businesses I wanted to collaborate with.ConclusionsI maintain that FourThings was a decent first idea for approaching a new business. It forced me to creatively think in a way that I enjoyed and was a useful exercise  considering my interest in creating/managing something myself.

So it was absolutely no good that I allowed myself to be put off from doing it again just because I didn’t get a pat on the back as quickly as I wanted to.

Realistically, small business owners are likely to be stretched thin for time and won’t always have the time to get back in touch. Or honestly, they just might not like the ideas I pitch in the first place, but that doesn’t mean that no-one ever will or that I should’ve stopped trying.

I’ll finish by being objective and talking about this as if someone else had done it. The worst case scenario is that no-one ever replies, creating several of these would’ve still built up a kick-ass portfolio which for use in job interviews to demonstrate proactivity, research skills, creative design and more.

Even better, you might end up researching an idea that could end up being a business in it’s own right!

The moral of the story, don’t do a me. If you have an idea, don’t be put off by the first set back. Learn from it and keep working.

After all, good things happen to those who hustle (at least according to their Instagram feeds).



If you enjoyed this article, then why not sign up to get my latest posts delivered straight to your inbox?

I post content new issues once every sometimes so adding your email means that you’re being both super supportive (yay!) and avoiding the need to check the website for new content.

Just type your email into the box at the bottom of the page and the job’s a good’un!

Fin.

Image optimisation: What you need to know to get the best out of your pictures

At a glance

The difference between Raster and Vector file types

When it comes to graphic design in any way, shape or form, the most important basic to learn is the difference between these two file types and knowing when to use them. Use Vector images to create clean work with perfect lines and precision, and raster images for photos, digital sketching or paintwork.


Lossy and Lossless Compression

Super important to know when it comes to maintaining the quality of an original image – make sure you understand which image file types use which type of compression and the impact that’ll have for storage, image quality and online experience.


The Basics of Resolution

Ever been unsure of what is actually meant by resolution and the role of pixels? Me too.

All you really need to know is that you measure your workspace in pixels and the size of your workspace is super important in terms of working with and exporting raster images.

Let me preface this article by saying, this is incredibly useful information to have as a foundation if you’re looking to work with visual content professionally.

HOWEVER, this is not a casual read and you WILL need caffeine to power through.

I attended a 4-hour course to learn all of the below and I found it so useful. Before hand, I never paid much attention to what file type I saved my photos or digital artwork under but now I realise exactly what an impact they can make.

You can honestly irreversibly ruin your artwork if you’re not careful.

For me the value of this information is in being able to demonstrate experties when working with clients, because if you produce content for them then they WILL expect you to know this stuff.

Being able to demonstrate specialist knowledge builds client confidence in you as a professional – something which is well worth a 15-minute read.

Let’s start off by explaining the three core digital image types: ‘Raster’, ‘Vector’ and ‘Metafile’ file formatsRasterRaster files store visual data as a series of pixel quantities and approximate locations.

No doubt that if you’ve spent time using any dedicated graphics software for anything from light photo-editing to digital painting, you’ll have worked with Raster image files.

In a raster file, the computer looks at the image and says ‘ok, that colour goes there and this colour goes here…’ many times over until each of those colour dots together form an image.

Because the information is stored like this, a raster image will look the most clear at the resolution that the image was originally created at.

What I mean by original resolution is the size of the original work space that the image was created on, which is measured in pixels.

So if the original workspace for the image was 1800 (pixels in length) x 1200 (pixels in height) when it was created; when you export/save that image as a Raster file, your computer knows exactly where every single pixel/colour lives in that exact space.

But then say after that you want to make that same image appear full sized on a workspace which is 3840 × 2160.

In this workspace you have a greater density of pixels to work with and using the raster file, your computer doesn’t have any other information to fill in those extra pixel spaces.

This means that the image looks a lot more washed out just because there are gaps or blank spaces in between each of the coloured pixels that are displaying colours.

This is something we’ve all seen before, but the same effect is demonstrated in the below image to make sure we’re still all on the same page.

raster-image-high-low-resolutions

Examples of images file types which store data as Raster information are things like;

    JPEG,
    PNG, and
    GIF.

The kinds of programs you’ll be familiar with which work with Raster data are things like Paint, Photoshop and Lightroom among many, many others.Vector headerVector images are visual data files which are saved as a series of ‘intelligent’ instructions.

By instructions I mean like the lines and shapes in your image are stored by your computer as mathematically graphed equations.

For example, a circle drawn in a vector file is not thought of as a circle by your computer, but rather it’s 2πr2 saved on a set of definite co-ordinates on a x-axis and y-axis in the workspace.

You can actually see this if you open a vector file in a text program like Notepad rather than an image program. Doing so would open the file, but instead of showing a picture, you’d see a list of instructions.

This is all probably going to sound incredibly confusing if you’ve never actually worked with a vector drawing tool before (or even if you have – I had to re-read my notes like 4 times to make sure I was clear enough to be able to write this section) but don’t worry, you don’t need to understand exactly what’s going on in the background for this to be useful for you.

All this means is that because Vector images are stored as a set of instructions and not pixel information, you can make a vector image extremely large or small with no loss of quality or sharpness.

This is because no matter what the resolution or pixel density,  your computer knows exactly where it needs to fill in pixel spaces because it has a set of instructions to follow. Pretty swish.

Examples of software which use Vector imaging include Adobe Illustrator, Coral DRAW and Inkscape. Common Vector image file types are AI, CDR and EPS.

Still with me?

Metafile header

Metafiles are files of data which save multiple types of data in one file i.e. both vector and raster information in a single file.

We didn’t cover this too much in the course but some quick research suggests that this file format isn’t particularly stable and can be prone to errors.

Converting Image File Types


So those are the three main types of image files.

Another important thing to know is that data stored under one of these file formats can be transformed into another file type.

So if you get a vector file but want to save it as a raster because you want to edit that image using a certain type of software, or upload it to a website, you can do.

The only thing you have to remember is that the data you’ve changed will start functioning under the rules of the new file type.

So for example, if you convert a vector file to a raster image then you’ll no longer be able to make that image bigger without loss of image quality.

Converting images from Vector to Raster files is much easier to do with minimal loss of information, whereas converting Raster to Vector files can be slightly more difficult.

Doing so incorporates a process known as ‘Image Tracing’, I would be lying if I said I could explain this properly and in all honesty would just be paraphrasing the Wiki article on it.

Instead of doing that, I’ll just link the article here if you want to learn more about how it’s done.

Now that’s a good foundation of information to build on, but the bit that’s probably useful for you to know is the different sub-file types and how using these can impact your work.

File Compression Types


When you are working from your core image and you save to another format, there are two types of compression to bear in mind when deciding what format to save your image as;lossy and lossless.jpeg

Lossy | This format compresses a file size through dumping information which it considers unnecessary.

An example of this type of file is a JPEG – each time you save something as a JPEG, you lose more and more information. You can pretty much make an image unrecognisable by doing this repeatedly.

Lossless | This format compresses a file size without losing information (i.e. quality isn’t compromised).

An example of this type of file is ZIP.

If you ever aren’t sure, or just want to keep up with a best practice approach, you should always keep a high quality original source file at your disposal.

If you ever compromise the quality of your image by mistake, doing this means you have a backup.

Another rule of thumb is to work from the programs source file type until you have completed your work on your image, only after you’ve finished should you start saving your image through compressed mediums.

Different types of image files


JPEG headerA JPEG (or Joint Photographic Experts Group, if you were curious) is likely the most widely known image file type.

As previously mentioned, JPEG uses a lossy compression algorithm which means that it will remove data from a file in order to compress it to a more manageable size.

JPEG files achieve a smaller file size by compressing the image in a way that retains detail which matters most, while discarding details deemed to be less visually impactful.

Because of this, JPEGs are the most common file types for displaying visuals on the internet – since pictures can be compressed to a fraction of their original ‘full’ size with little obvious change made to the quality of the picture. Smaller image sizes displayed on a webpage mean that they load faster on a browser when a visitor heads to your website.

JPEG files are able to store and manage up to 7.2 million different colours making them extremely proficient at displaying visual information with great quality.

However, they are generally much better suited to displaying photographs rather than painted images.

The reason for this is because photographs more typically have smoother transitions between colours.

In painted, sketched or line images, there are more likely to be sharp contrasts in colour between adjacent pixels, and these stark variations would become subject to a more pronounced loss in quality after JPEG compression takes place.PNG HeaderThis is an updated image file type of the GIF and was created as a solution to the limited 256-only colour palette of the GIF file.

In the mid-90’s, monitors that were able to display many, many more different colours simultaneously become much more common and so a new file-type solution was required.

The most notable difference between PNG and GIF files is the inclusion of Truecolour colour palettes which make PNG files much more suitable for displaying more complex visual information.

Another significant difference is that rather than being a lossy file type, PNG is a lossless file which means that no data is lost when you save an image as a PNG file.

Comparing PNG with JEPG


JPEG format can produce a smaller file than PNG for photographic (and photo-like) images, since JPEG uses a lossy encoding method specifically designed for photographic image data (which is typically characterised by soft, low-contrast transitions).

Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize with negligible gains in quality.

In comparison, when storing images that contain text, line art, or graphics – images with sharp transitions and large areas of solid color – the PNG format can compress image data more than a JPEG can.

Additionally, PNG is lossless, while JPEG produces noticeable losses in clarity around high-contrast areas.

So where an image contains both sharp transitions and photographic parts, it can be a little tricky to decide which file type to go for.

If you’re struggling to choose, best practice would be to try saving your image to both and take a look at;

  • Image quality around areas where colour changes sharply,
  • The size of the resulting file.

Another factor to consider in this scenario should be JPEG’s lossy compression which also suffers from generation loss.

This is where repeatedly decoding and re-encoding an image to save it again means that information is lost each time, which means that the image loses quality.

Generational loss doesn’t happen with repeated viewing, copying of an image or anything like that, it’s only where the file is edited and saved over again (and again).

PNG has the benefit of being lossless, making it more suitable for saving images which might need further editing later on without compromising the quality of the image.

There is also the option that an image can be stored losslessly and converted to JPEG format later if only for distribution, so that there is no generation loss.GIF HeaderNot typically as popular today in the same way as in the past for displaying still images because of the limited colour palette of the file type – 256 colours in a single image only compared with 7.2 million colours in a JPEG file.

The reason for this is that when GIFs were first created in the 80’s, it didn’t seem relevant to include more colours since monitors which could display more than that many colours at the same time were not affordable for most people.

Image types which are better suited for GIF formatting are those with big blocks of same-type colours i.e. things like diagrams, icons on websites like share buttons or simple logos but not photographs or any other colour-heavy images.

Images which contain fuller colour palettes (i.e. more than 256 unique colours), when saved as GIF files, result in blotchier images. The reason for this is because GIF files have to compensate additional colours by adjusting them to a closest approximate colour within an image to be compatible.

The way compression works functionally with GIF files is that the lower the number of different colours used, the smaller the size of the file after compression.

The benefit of this is that simple images like a Facebook share button with like 3 colours on it can be tiny and downloaded RAPIDLY by a browser.

GIF files also utilise interlacing techniques when uploaded on to a website. What this means is that images load progressively on a webpage rather than all at once.

So basically, on a slow loading website, an image will start out as blurry and then grows sharper as more data loads rather than not appearing at all until the image is fully loaded.

The reason for this is that this was a more popular file type to upload on earlier iterations of the internet and this feature was more useful on slower browsers – but as browsers have grown more proficient and advanced, they are able to cope with larger and more complicated image sizes.TIFF HeaderListen, I’m not going to lie to you and tell you I fully understand this one and honestly if anyone reads this article and fancies commenting to let me know what the deal is with TIFF files in plainer English than I’ve found online then please PLEASE do.

From what I understand, this file type has a size restriction of 4GB. It supports true colour images (i.e. it can handle information on 56M different types of images) making it brilliant for colour-rich images and is typically much, much bigger than standard JPEG images due to the amount of information which can be stored inside it.

This also means that it can contain extremely high quality images which, combined with it being lossless makes it the ideal home for ongoing design projects where you’ll need to keep editing and saving your work.

Things to bear in mind though;

  • These files can get to be 100MB+ in size fairly easily so you might need to consider storage if you have multiple images you’re working on at a time.
  • Because these are so big, you’ll need to consider how you’ll share these images if that’s your intention. Because of the size, you can’t just chuck a TIFF file on an email because it might be too big, likewise, images that get to that size can’t readily be uploaded onto a website since that would cause the page to load incredibly, in-cred-ib-ly sl-ow-ly.

As with the PNG file though, you can always have your original image saved as a TIFF file before saving a copy as a JPEG or PNG to distribute out further – options!SVG Header.jpegCredit to www.lifewire.com for their brilliant article on all of this.

A file with the SVG file extension is a Scalable Vector Graphics file and being such, an SVG file can be scaled to different sizes without losing quality. A lot of website graphics are built in the SVG format, so they can be resized to fit different designs later on, making them more sustainable.

SVG extensions also use lossless compression meaning that information isn’t lost when you save an image as an SVG. If an SVG file is compressed with GZIP compression, the new file will end with an .SVGZ file extension and can be anywhere between 50% and 80% smaller in size.

How to Open an SVG File


The easiest and quickest way to open an SVG file to view it (not to edit it) with a modern web browser like Chrome, Firefox, Edge, or Internet Explorer – nearly all of them should provide some sort of rendering support for the SVG format.

This means you can open online SVG files without having to download them first.

If you do already have an SVG file on your computer, the web browser can also be used as an offline SVG viewer. Open those SVG files through the web browser’s Open option (the Ctrl+O keyboard shortcut).

SVG files can be created through Adobe Illustrator, so you can of course use that program to open the file. Other premium design software which can support SVG files are Adobe Photoshop, Photoshop Elements, InDesign, Adobe Animate, Microsoft Visio, CorelDRAW, Corel PaintShop Pro, and CADSoftTools ABViewer.

If you are looking for free software which can be used with SVG file extentions, check out Inkscape and GIMP, but you must download them in order to open the SVG file. Picozu is also free and supports the SVG format too, but you can open the file online without downloading anything.

How to Convert an SVG File


If you want to convert an SVG file into a Raster image, deciding how to go about should depend on the size of the original file.

If your SVG file is pretty small, you can convert it to a Raster file type quite easily online using websites like Zamzar (looks a bit spammy but works brilliantly). They can convert .SVG files to PNG, PDF, TIFF, GIF, JPEG and more so it’s brilliant – even better it works without you having to download any apps to your PC, it can either email converted images to your inbox or let you download them straight from the webpage.

On the other hand, if you have a larger SVG file or if you’d rather not use third party websites, most dedicated design software will let you save and convert the file straight on the interface.


So there you have it! Some fun reading for budding young graphic designers – I’ve only covered the basics and there are many, many more file types to look at if you’re hungry for more.

Although honestly, I would just be impressed if someone made it to the end of this article and is actually reading this section….h-hello..? …anyone still there..?


If you enjoyed this article, then why not sign up to get my latest posts delivered straight to your inbox? Just type your email into the box at the bottom of the page .

I post content new issues once every sometimes, so adding your email means that you’re being both super supportive (yay!) and avoiding the need to check the website for new content.

Fin.

[How to] Build a website!

At a glance

Key Learning Points;

 

You don’t need any expertise to make a great looking website

When I’ve told friends about Inkbike, a lot of them tell me they would have no idea how to even start making a website and it puts them off. With platforms like WordPress, Shopify and Squarespace you absolutely don’t need to be – you can make a fully functional website without ever seeing a line of code. Templates baby. Templates for days.


It doesn’t cost much 

You could buy a domain and have a running website with WordPress by paying a one-off fee of £36 (£3 a month).


Don’t sweat the name too much

It feels like a big decision to pick a domain (i.e. your website link, like Inkbike’s is http://www.inkbike.com), but you can change your domain at any time without losing the work you put into the website.


There are plenty of options

Like I said in the first point, you’ve got plenty of web-building platforms to choose from to suit your needs. Want to make a website where you can sell stuff? No problem, there’s Shopify or Squarespace. Just looking to build a blog or website for your business? Easy, WordPress, Squarespace or any others.

Fun fact: my web-design process went something like this;

Step 1. Purchase a basic WordPress account with a domain

Step 2. Realise you have no idea what the hell you even want your website to be yet and despair.

The depressing thing is that getting between steps 1 and 2 wasn’t even a quick process – I spent an alarmingly amount of time trying to figure out what the domain name was going to be before I even finished the first step which is totally unnecessary.

Anyway, that’s me getting ahead of myself…

(*puts on deep, reassuring grown-up voice*)

In this article I intend to give you a full breakdown of exactly how I went about creating the website Inkbike lives on. My goal is to provide (a) a step-by-step that you could follow if you wanted to create your own website, (b) a track of my thought process for decisions I made while making my website so you have something to inform any similar creative decisions you might need to make, and (c) details on any mistakes I made along the way to help you avoid doing the same.

Also just a heads up and make sure I’m not being misleading, in the article I’m talking about building a website using WordPress rather than manually building it line-by-line so please feel free to ignore this post if that’s not what you’re after.

Step header

Ok so this is pretty much the first thing you’re going to have to consider when you build a website and it definitely feels like one of the most important decisions you’ll make early on since the name of something can often be its most powerful piece of branding.

This is ultimately down to preference though, so instead of trying to come up with a smart process to write, I’ll just provide a few tips.

  • Use a domain searching tool to show you whether or not your desired website name is available or already in use. I personally used Lean Domain Search.

  • Read around the topic of domain name trends – just to be clear I’m absolutely not saying pick a name because it’s trendy, it should always be something you love too. It’s more that if you’re trying to create a name which portrays something, like modernity, looking at trends can potentially help give you ideas for a name which matches your concept.

  • Have fun! You’re bloody naming something, like a thing that you’re How amazing is that?!

Step 1 Complete.
Name Chosen: Inkbike.


Oh and in case you’re interested, the name Inkbike originally came about as a title for me to post digital art under; Ink by Kaeyo became ‘Inkbike’. After I decided to work mostly on the website instead, the name had just kind of stuck with me so I kept it!

An important thing to remember though (he says reassuring himself), is that you can always change your domain name later. You aren’t stuck with the first name you create!

Step 2 header

So the next thing you need to do is choose a platform to host your website. There’s a growing market of webhosting platforms you can choose from but the two I found to be best known are WordPress and Shopify.

WordPress is best known as a platform for bloggers and creating more passive websites (i.e. websites where you come to view information or media without interacting with it). Shopify on the other hand is built for e-commerce, where users will create online stores to sell their wares.

Another option I’ve been hearing more about recently is Squarespace which is marketed as a web-development site with an emphasis on modern templates but with simple drag & drop customisation interfaces. It’s geared towards versatility, offering options for e-commerce as well as more passive designs.

They offer a couple of other options too, like a basic logo developer and access to webinars which is a nice touch. It’s also worth noting that they often have discount code promotions running along with influencers that can get you a discounted subscription price for the first few months so definitely have a search for those before you commit.

Looking at the options though, I felt like WordPress was most suited to my needs, especially with its staggered pricing model – free to build a basic website or £3 a month for a ‘Personal’ account if I wanted to include a custom domain (i.e. www.inkbike.com). This meant that I didn’t have to pay much to get the domain and start playing around with how posts could look etc.

In fact, WordPress seemed generally cheaper than the competition, it’s certainly the only platform out of the three mentioned that provided 2 options for less than £10 a month.

wordpress-923188_1920

It also helped that while the basic accounts (Free and Personal) don’t come with a lot of template options, upgrading to a ‘Premium’ account (£7 a month) comes at a discounted price when upgrading from a ‘Personal’ account. This meant that I could wait until I was more competent editing with WordPress tools before investing more money and moving Inkbike onto a template with more customisation options.

Finally, since I didn’t have any intention of selling anything on inkbike.com, I knew that Shopify wasn’t the platform for me and between WordPress and Squarespace, WordPress had been operating longer which was a benefit to me because it meant that each of the templates on it would hopefully be more stable.

Anyway that was my thought-process for choosing WordPress.

Step 2 Complete.
Chosen platform: WordPress.


IMG_0535

Again this is preference, but I did find that WordPress has a good selection of varied templates. This is also the time when you might start to consider other subscriptions with WordPress – at this point, I had purchased the ‘Personal’ membership which gives you access to their basic template library.

If you want to use one of their premium templates then you either need a Premium account, which is billed annually at £7 a month and gives you access to all premium templates, or you’ll need to buy access to specific templates.

The thing is a lot of the premium templates are more expensive to buy then an annual pass for a premium account – so I just paid for the account instead.

Whether or not you want to do this is entirely up to you, the only reason why I did is because I knew I wanted a website which used mostly images to display content with very few written words outside of articles. My thinking was that this would make it much easier to create a modern, attractive website without having to spend lots of time editing texts and layouts to try and achieve the same effect.

WordPress didn’t have any templates which fit that description in the basic section, so I decided to upgrade my subscription so I could use the one that did.

So to that end, the template I chose is Hermes.

Step 3 Complete.
Chosen template: Hermes.


IMG_0536

If you’re like me, when you get to step 4, your brain is saying this: ‘Ok so you have your domain and you’re on your platform, you’ve smashed it, your website is going to be the next motherf*cking Google’.

Then you look at your blank, barren website and you start to realise that you have no idea what to do next. You have no menus, no posts, no images (unless your template has some stock photos) and no idea how you could or should start creating any of them. I mean, what should your website even look like?!

Or maybe you’re way more together than me and you know what to do next, I dunno. Regardless, in this section I’m going to walk you through some basic steps for website design on WordPress.

Two of my most frequently used areas are found under the ‘Manage’ header; Site Pages and Blog Posts.

Site Pages contains every screen which is possible for a website visitor to access, apart from Blog/Article posts. This is also the area where you build the pages which can be displayed on your website navigation menu (so on Inkbike the Site Pages displayed here are ‘Support’, ‘Interviews’, ‘About’, ‘Blog’ and ‘Contact’ as well as the Home screen).

cms-265127_1920

Blog Posts, as you might expect is the tab which contains all of your website articles. The page provides some general metrics for each post including date/time published and number of views. Clicking the ellipsis next to the Featured image for each article then gives you a couple of extra options like editing the article (which you can also achieve by clicking on the title), a more detailed stats overview of views to that post, a comment overview and the options to either duplicate or delete the article.

Both areas give you the option to keep your page/post as a draft for you to work on without them actually needing to be live on the website – to switch between published and live you just need to navigate between the tabs at the top of the page.

Next up, under the header ‘Personalize’, next to themes is a button called ‘Customize’. Clicking on that opens up a view of your live website on the right, with a Control screen on the left. The options displayed on the Control menu can vary depending on the theme you’re using but generally you’ll see the following;


Site Identity

This is where you add your site title, tagline (optional), logo and website icon (i.e. the little image which appears in the browser when the user lands on the web-page.

Colours & Backgrounds

Change the colours of certain areas on the website, I think the amount of control you have in the section depends on what template you’re using though. As far as I can tell, the only change I can make on Inkbike is in the colour lines which underlines article tags so…..not messed with that too much.

Fonts

This allows you to mess with the font that article text is displayed in by default. There are quite a few options too! I ended up going for the one that looks the most like it could be in the guardian so I could trick myself into a sense of false-inflation by thinking I write ‘articles’ and not ‘blog posts’.

Menus

This one takes getting used to, but this is how you build your website navigation menu. You start by adding the top ‘Parent’ pages you want your menu to display by clicking ‘Add Items’; these are the pages you will have created in your Site Pages tab.

Next up, if you want you can add sub-menu options to your ‘Parent’ pages – your sub-options can include loads; Categories (that’s what I use), Tabs, Specific Posts, Custom Links and more. To make them sub-menu options, just add everything all at once and then click ‘Reorder’ at the bottom of the page which will allow you to indent options to appear under whichever Parent Page you want.

CSS

Honestly not too sure about this, I’m pretty sure that this is for advanced customisation but unless you’re comfortable with CSS or are following specific instructions, I’d leave it alone.

Widgets

Widgets are the sections of your website which contain menus, so for example the search bar, social media and navigation tool at the bottom of this page is a widget. Some templates allow for multiple widgets on a single page – the contents of the widget are managed through this tool bar.

Homepage Settings

This section lets you control whether or not the home page for your website displays a static screen where the same information is displayed regardless of any other changes made to the website, or a page which displays your most recent posts. I chose the latter!

Theme Options

This one varies depending on the theme you use, but for me it just allows me to decide whether the web-navigation menu appears on the left or right. I left it as it was because who cares.

IMG_0537

That pretty much takes you to the end, the only thing left to do is start filling your website with content!

I hope this has been helpful for you, or at the very least has reassured you that making a website isn’t hard, requires extensive skills or even much money. Certainly, if you’re looking to scale up your business or include website bespoke features then you might need the help of a web-developer but otherwise I would absolutely recommend building your own. At the very least, you’ll have gained some awesome skills which can serve you extremely well going forward. On the otherhand, you could get the experience but also walk-away with a gorgeous website that you can be proud of. Plus, building something helps you get intimately familiar with it which means that if anything goes wrong, you’re in an excellent position to fix it on your own.

If you decide to give it a shot then let me know – I’d love to see your sites! If you ever want to ask for any help or chat about it then drop me an email at kaeyo@inkbike.com. If emailing feels too official;

Twitter: @Inkbike
Facebook: @lnkbike
LinkedIn: Kaeyo Mayne

Fin.