Design your website: the diy approach

Designing your own website is really difficult. You are your own client, you know what you like but for some reason you are just never done!

If you do a site for client, you will normally have to work with their goals and your taste has nothing to do with it. You are there to make their vision possible.

I have tried to design my website for a while now. My first mistake was hammering in my head:

Luisa, you are not a designer.

True, I don’t have the chops, I don’t have the problem-solving thinking skills that designers have but this doesn’t mean I can’t, with a little bit of work, create something from nothing.

I have a side project and I wanted to design a site for it, I wanted it to serve one purpose, I wanted to use it to learn a bunch of things on the way and I needed it to feel like home.

Some of my questions:

1. Should I hire a designer?

The answer was pretty obvious. I can’t afford one yet, plus I wanted to do the exercise myself.

2.  Should I go through my process to build my site?

I have a questionnaire, I have my layouts, I have my planning guide for clients, should I follow that?

3. Should I create my own graphics?

For the moment, my site is mostly text and watercolour illustrations which I photograph or scan. Unless I become fluent in illustrator, I don’t need custom graphics at this time.

4. Should I concern myself with branding? Do a branding exercise?

My side project is less of a business than a place to put my thoughts so, no, not at the moment.

5. Do I have a vision?

Short answer, No.

Ok, I know this goes against everything that we read about in web design but hear me out…

My brother-in-law is a woodworker, he and my sister have been married for 15 years and it was only last year that she had her kitchen cabinets finished. It’s the same with designers.

Any designer who sets out to design their own website will spend months if not years working at it, and when it’s almost ready they want to start over. So if you’re going the DIY route it won’t really help to have a vision set in stone.

So what did I do?

Here it goes:

1. Pinterest:

Moodboards are helpful but I discovered that a Moodboard for your own design project takes time. You can’t sit an afternoon and pin images like crazy and draw a conclusion. My moodboard has been brewing for a while. I’m ashamed to say how long though. It started with bold Mexican colours, it ended with the subdued South-of-France tints.

2. Design in the browser if you’re coding yourself.

Unless, of course you require lots of illustrations, you need a graphic for your header, you are planning on adding lots of font-icons or SVG etc. Maybe you might consider designing in photoshop, but what I have learned over the past year is that good typography can sometimes lift a design way more than graphics. It happens when we decorate our home as well, if we buy wall art we get tired of looking at it over the years. Of course it depends on your aesthetic and your taste, but I really recommend you design in the browser so you can get the feel of your site immediately.

3. Do a quick style-tile or if you’re more ambitious, as you design build your style-guide, either way get your palette, fonts and buttons, straight quickly.  My style guide was a sticky on my mac, since I’m not into pre-processors yet and generated a Kuler color palette.

4. If it’s your personal website and you are learning to code as you go, I strongly suggest you create a static site with the help of a static-site generator like Jekyll or Middleman. You will see all the pieces working together: creating templates, layouts, includes, modular code, git and github. I can’t recommend this enough.

5. Use Github to keep track of the things you want to tweak, add or change using issues. I found this to be the ultimate to-do list. Forget Trello, Wunderlist et al.

issuesgh

(Actually use Github for everything! Even free hosting!)

6. Document your process. Bookmark the tutorials that were useful, thank the people who wrote them, choose a reference site like the Mozilla Developer Network or any other of your choice and get comfortable using it so you speed up when you need help. Visiting Google search results makes you waste time, plus if you really want to understand how an element or property works, better to read the standard than to copy and paste code.

Lastly if you’re so inclined, write a blog post about the experience.

My side project is a website where I explore creativity from a different perspective, far, far away from the popular adage of “Do what you love (and then turn it into a job)”, I want to explore what is talent, artistic expression and creativity and what happens when you discover your one true creative outlet, how to protect it, how to hone it and how to be joyful in creating.

Designing the website was part of it. This is the current version which will certainly evolve.

jsescreenshot

 Do you design without considering yourself a designer? How do you go about it?

It’s Tea Time, Jekyll website finished.

This is  a cross post between my new website Je Suis Éclectique and Variable Skies.

There are wishes, some people want to call them goals, but I prefer wishes, they’re dreamier and not intimidating. These wishes are recurrent, they live deep down in your subconscious and they are fool-proof clues.

I was a web designer a long time ago. I wanted to refresh my skills and become a web developer. But the wish I kept verbalizing was: I want to build my website from scratch.

Every time I started to learn a new technology, I went back to: yes but I will build my website from scratch.

I started learning HTML5 and CSS3 again. Then I decided to take up on WordPress.

This blog was built off a free theme and I just fiddled with the CSS. Not my website.

In December 2013 I bookmarked a Github pages tutorial that appeared on 24 Ways. (It could use a little updating though).
At that time I didn’t even attempt to try it. I was too busy with WordPress, learning it and hating it.

Ashley Baxter has written about the importance of having a project when you want to learn something.
If you are going to learn to build websites, you need to have a project. A real one or it won’t work. (More so if you want to build an app lest you lose yourself in the million and one tutorials out there, your life will pass you by.)

Let me restate that: You need to have a project that you care about.

What did I build?

This year I discovered I could draw. It was an accident, I stumbled into it after years of wishing I could draw. Not only did I know how, I also discovered that drawing soothed my anxiety like nothing else.  In three months I went from drawing this to this.

This discovery pulled me away from web development for a while which was salutary.

Inspired by the colours of the south of France, I built a website about finding and pursuing your creative outlet and artistic expression. It’s not like all other creativity sites. This site is basically the foundation for a book I’m writing titled “The Someday Creative”.

It’s easy to go from inspiration to pollution, from collecting to hoarding, from intention to paralysis. I decided to create a simple site where I can be free to explore and maybe help other people in discovering where their creative outlet truly is.

The site in question is Je Suis Éclectique (I am eclectic). I chose that name because it’s really the way I conduct my life, even if everyone else is screaming focus! focus! I realized I’m not like that. Hence, this path to the font-end is illogical and has only the best bits that work for me.

So hop on to my little (ultra-fast) site and if you wish to plunge into your artistic expression fully and with abandon, leave your email in the blue-violet box. Only good stuff.

You can also follow my repository on Github and see my code.

 

Back on track.

I’m not going to be a freelance web developer. That was never my aim. I wanted to learn how to develop websites to have a part-time side gig. But I soon discovered that what I needed to learn was not what I wanted to learn.

Rounding up

*I love simple, fast, easy to read websites.
*I like websites that feel like someone’s home.
A WP site doesn’t feel like that. I visited many Jekyll sites. They were simple, mostly built by developers but later I discovered a few that taken their Jekyll sites further with lovely design.

That’s what appealed to me, something that works, something that weights very little and that allows people to read the content without a million sponsors and distracting widgets.

It made sense for me to focus on that simplicity.

The Tools:

*Github Pages offer free hosting. They allow only HTML, CSS and JavaScript
*But I wanted a blog, so Jekyll was the immediate choice.
*A CSS framework, I chose Foundation.
*Sublime Text
*Git for version control
*Terminal

The tutorials I followed:

Getting Started with Github Pages
Understanding Jekyll
Jekyll by example
The most comprehensive Git tutorial
Jekyll Documentation which could be a bit more accessible for non-developers.
Websites built with Jekyll I spent quite a bit of time here because many of these are abandoned sites, but to be listed there you need to have the source code public, therefore lots of bits to learn.

Is there a market for Static Websites?

I have no idea. I imagine so because there are several tools to generate static sites, some are Open Source like Jekyll and Middleman, or Statamic (a proper CMS which requires a license).

The problem is that these tools would be challenging for non-technical users.

To update your content you need to go into your code and into the repository so this represents a poor choice for clients who want to manage their sites on their own.
And you can’t publish on a whim from your phone but then again, sitting down and composing a post is more mindful than dictating it to Siri.

There are a few tools like Octopress (which I haven’t tried) and Prose.io to quickly create blog posts, you still need to pull those posts into your local repository (which  I forgot and then spent hours trying to figure out why my repositories were different.)

Normally I compose my posts on draftin.com which allows markdown and then copy/paste them into sublime text, commit and push live.

I know it’s kind of retrograde when I could simply login to a WordPress dashboard and type away, hit publish and be done, but building my site with Jekyll has allowed me to learn how to build a workflow for myself and it allowed me to learn things in context.

So why again?

Because a portable website,
I want to have it in my hard drive
I want security
I don’t want to have to update plugins and versions and be afraid of losing everything if an update goes awry.
I dread databases
I don’t want a bloated CMS injecting p tags all over the place.
I like writing in Markdown
And I want free hosting.

So after all this, I’m drinking my black tea with milk  and marvelling at the fact that I built my site from scratch (ok, minus Foundation but I just wanted the grid).

If you have questions, about Jekyll or Github (or about drawing and painting)  feel free to contact me. I’ll try to respond but I’m not an expert yet!

Walk before you run or lessons learned on the path to the front-end

Here is a recap of my lessons learned in my path to the Front-end up to now.

(I’m still in a tiny village in France, I had coffee and cookies and I’m pretty happy overall, except for my hair.)

  • I insist, too much screen time won’t get you there sooner, modulate.
  • The most difficult thing to do is: deciding what you want to learn first
  • The most damaging thought: client work and money in the beginning stages.
    We all want to make a living doing what we like, but this was one of my biggest blunders.
    I read on multiple occasions that the best way to take risks is by saying yes to things you don’t know how to do, this way you’ll just have to learn. It all depends on your tolerance to stress. Mine isn’t good. I’m too hard on myself and I have GAD so taking on a first client when I didn’t know the first thing about WordPress nearly gave me a breakdown! That being said, my client was really patient and became a friend so maybe this lesson is to be applied on a case-by-case basis.
  • The worst habit: reading and watching tutorials non-stop.
    Watch a couple, then read the Docs.
  • I say that again: read the Docs.
    I’ve wasted hours watching outdated tutorials. I get so frustrated when I realize that even though it hasn’t been that long since the tutorial was posted, in internet time, even a month is long. My last experience was Jekyll, hardly any new tutorials because It’s not widely used. When you find a tutorial refer to the docs often and example repositories with recent commits.
  • Use Git, use includes, make it a puzzle, one piece is easier to examine than the whole thing
    Oh dear, tackling a page is what us beginners do. So when after hours of laborious coding you mess up and one line of code ruins the layout you want to die and abandon everything, but if you have puzzle pieces (includes) you can fiddle with your nav bar as much as you like and not get lost in the spaghetti.
    And learn Git. It’s the equivalent of popping bubble wrap.
  • Use Twitter as a search engine. Don’t follow every developer in the world, you’ll end up in the rabbit hole but most of all you’ll get seriously overwhelmed at how much you think you have to learn. Some people only Tweet links and think it makes them part of “the industry”. Use it as a search engine instead. When learning Jekyll I searched the most updated tutorials. Google will give you the “most relevant” but Twitter will give you the most recent. When following a tutorial you want it to be recent.

I’m happy to say that my Jekyll site is up and running here. It’s still a tinkering playground and I have not decided on what it’s for.

For the moment I just write in it but lifting it up the ground and as they love to say: shipping it, gave me a huge satisfaction.

Also, thanks to the podcast Working Out for the last nudge in episode 10, Why are you not shipping?

Jekyll: I don’t know what I did

So I set out to build my first Jekyll website. I followed a tutorial that was waiting in my to-do list since December.

Everything was working fine until I got to the part of viewing my page on http://localhost:4000

Nothing happened.

A tutorial has an expiration date and once you hit the first bump, you should always refer to official documentation and pick it up from there, otherwise it will be hours down the drain.

So, I used this tutorial to start, it’s outdated to a certain extent but it’s still valuable. Especially when it comes to making your gh-pages branch your default branch.
I also found this Guide to Using Github Pages, although it is only a guide to create the repo and build a simple HTML site.

Then I had Jekyll’s site for reference and  Using Jekyll for pages in Github

The main problems I ran into were:

  • I installed Jekyll as per the first tutorial BUT if you’re using Github Pages you must install it as per the Github Pages instructions.
  • Since I had installed Jekyll on my own, it generated a feed.xml file, which conflicted with the build on my gh-pages branch. I had to delete it. Note: I need to investigate how to create it again if I want to use my site as a blog.
  • If you push changes to Github and your site does not display, check your settings on Github. You will see a message there if there is a problem and it will refer you to troubleshooting documentation.
  • Jekyll opens a local server to view your website locally. All tutorials say it’s localhost:4000, but this was not happening. Sometimes you need to kill the server. Instructions are in the Jekyll documentation.Finally I could view my site locally in a very strange local address: http://0.0.0.0:4000/

It’s fun though. It ignited my obsession again.

I will be building this slowly without any real plan. For the time being I only have an unstyled page about How to Become an Artist.

Why Jekyll?

I’ve seen some lovely pages made with it, plus it’s super fast.

Two examples:

Insurance by Jack
Working Out podcast

Have you tried any static site generators?