How I Learned to Design in the Browser
Last week was my first week at HackerYou and it really got off to a running start.
I made my first project! More about that towards the end of this post, but for now it’s time to talk about the exciting realm of designing websites in the browser. This might seem like a boring concept for those who are neither designers or web developers, but I’m going to do my best to explain it in a more accessible way. Over the past week this concept has blown my mind a little bit and also been a huge challenge for me to overcome and get comfortable with.
Okay, so, traditionally when I’ve designed websites at my job at a marketing agency, or even on my own as a freelancer, there was a pretty straightforward sequence of events that took a project from start to finish.
At an agency:
- After receiving the clients specifications on what needed to be included, I’d create a wireframe or sketch out a rough idea of where things would go on the page (like in the picture above).
- I’d then design the homepage + one other page of the website in Photoshop that we’d send to the client. We’d send them a flat jpg image that had no interactivity whatsoever, it’s just like a screenshot kind of thing.
- After they approve the design I’d design the rest of the pages in Photoshop.
- After those pages get approved by the client we’d then ship them off to a developer to code them.
- We’d then go through lots of back and forth with the developers to make sure that everything matched the original design.
- Finally, after lots of bug-testing and back and forth with the client and the developers, we’d get a finished website.
As a freelancer this process was a little more simplified because my clients were smaller and I did the development:
- I’d meet with my client and we’d define what their website needs.
- Then I would research different WordPress themes that I liked and I thought could work for the project.
- I’d take a few screenshots of the theme before purchasing and mock-up a home page and subpage in Photoshop of what the theme would look like with my client’s branding and a few CSS tweaks that I knew I could hack.
- After getting approval I’d install the theme and then try to make it look like my Photoshop design with my limited CSS knowledge.
- Eventually we’d arrive at a completed site, but often it didn’t look quite like I wanted it to look.
My new process as a Designer and Developer
- Sketch out a design on paper of how where I want to place important things as a rough road map.
- Open up Sublime Text 3.
- Start building the website and design as I go along by switching back and forth between my code editor and my web browser so I can see how everything is looking.
- For finer details in design, I really like using Chrome Developer Tools. This way I can make an element really big, or a different colour, or reposition it on the page without having to mess with my code in the editor.
This process is so much faster than before and instead of sending clients a couple static jpgs of what their site will look like, I can send them a working prototype of a couple pages of their site so they can click through it themselves and understand how the website will actually work and not just how it will look. Being able to actually use a website in the early stages of it’s design is such a wonderful thing and it’s an amazing added value for clients. Because there isn’t a developer as a middle-man and I’m the designer and the developer, if the client wants changes, I can be the one that makes them – which means a faster turnaround time.
But now, onto the really cool stuff.
My first assignment with HackerYou was to code a single page website and make it as awesome as I want. We could choose any topic, business, or imaginary client and most people designed a personal website. Since I already have a personal website and before coming here I made a lot of websites for clients, I wanted to make something that was just really fun. I have a lot of pictures of breakfasts on my computer and a lot of them are pretty cool looking so I was like, “hey, I’m making a breakfast website.” So without any further ado, here she is: