So the other day, it was implied that I must be kind of old if I'm still designing websites in Photoshop.
With apps like Figma, which lets you copy and paste CSS straight into your IDE (who knew!), It's possible I'm making things more difficult for myself.
With age also comes wisdom about one's self, which for me is an addiction to wasting countless hours playing with shiny new objects! 😄
If I have an idea, I try to find the quickest implementation available.
This means that with the 12 years of using Photoshop, Illustrator and InDesign - my hands have some muscle memory that I can put to use.
By the time I've learned and played with the new app and gotten lost down the rabbit hole of shiny object syndrome, I could have the design finished.
Finding A Layout Template
I haven't done this for a long time so I needed to look up the best screen size to start off with.
I decided to go with a max-width of 1440px and found a Photoshop template with all the guides already laid out (which I HATE doing manually).
https://1440px.com is where you can download it too.
Ok, we're off to a good start. I like to move through things as quickly as possible and this one saved me a few hours of fiddling around.
Next up was to gather some materials that matched the idea in my head.
Inspiration
I had recently binge-watched really great artists, drawing mecha art and it got me in the mood for mecha design.
As the drawing days are long since gone for me, I decided I wanted to use my website to get that inspiration off my chest.
Googling around and finding a png site, I grabbed a couple of images to run with.
Next up, I add all of these images into Photoshop and let the muscle memory go to work.
Layout
While sticking to the grid lines, I usually start off with text and let the images come in to play later to fill in space and bring the layout together.
While they can be a bit restricting, the guides are there for a reason. With restriction, comes freedom. Freedom of making tough decisions as to whether the layout is balanced or lined up correctly.
Stick to the guides for 90% of the time and throw a curveball now and again to break things up a little bit.
From PSD To HTML
Once I get to the point where I'm just pushing pixels around and not really contributing to moving the project forwards, I slap myself on the wrist and to things to the next stage.
The whole website doesn't need to be in PSD, I just need to get down the overall design that will be repeated throughout. Font styles, buttons and details.
I whipped up "Create React App" through the terminal (No, I still don't custom build my boilerplate react apps) and started to plan out the site folder structure.
The plan is just to get the bare bones of the site down so I have something to work with.
There's nothing worse than staring at a blank canvas!
So just like an artist, I start laying down my brush strokes in the form of <div> tags and <p> tags.
To maintain an idea of where I am and what my plan was in my head, I use ID attributes to label the various parts of the skeleton.
It's ugly and probably not best practice, but it's easier to reason about when I'm context switching throughout the plan.
I find it extremely difficult not to add styling while I'm laying down brush strokes but the idea is to have the skeleton finished before I make it look pretty.
For large areas of text that I don't yet have content for, I use https://www.lipsum.com/feed/html.
It mimics text as naturally as possible and helps to fill out content areas.
Trying To Make Things Pretty
I recently learned about https://bulma.io/, I tried to implement it quickly by using their CDN and failed miserably.
After an hour of frustration I finally realised that you can't override CSS styles when they're being pulled in via a CDN, but by then I had already started looking for alternatives.
I discovered https://tailwindcss.com/ and decided to go with that instead.
It's pretty simple to install and get started with, the documentation is here https://tailwindcss.com/docs/installation/.
The classes that you have to use are quite intuitive and within an hour a found that I didn't need to refer to the documentation very much at all.
Above you can see within the className I have the settings for width 1. mobile 2. large screens 3. super large screens, then margin and padding for the Y axis (top and bottom) then X axis which I like to keep separate.
Unfortunately I haven't found a way to apply Tailwind to the dangerouslySetInnerHTML (love that name) so I had to use a few CSS changes in the main styles file to have my blog post match the rest of the site.
I also configure each component within my React app individually on the screen to keep things clear in my head and minimise how much caca has to load on the screen for each change.
I do this by just updating the home page within my React Router to be the element I'm currently working on while filling it with dummy content.
Wrapping Up
There's probably an easier way to get all of this done, like using Frontity or Gatsby.
I downloaded and spent around 2 hours playing with Frontity but there was so much bloat that I felt my shiny object syndrome coming on and killed the exploration immediately.
I couldn't justify spending so much time reconfiguring layouts and CSS when I could just do it myself in a bare bones fashion.
In my next post I'll dig a little into how I connected up my Wordpress installation, the plugins needed and hooking it up with my React project.
Top comments (0)