Building Ana’s Website, Pt 2
My process of creating a website, from start to finish.
Onto the second part of this series where I’m creating a website for my friend Ana Guerra and documenting the process of doing so! To get some context of what’s going on, here’s the 1st part.
She is also doing it on her podcast, here’s the first episode, the second one is coming soon.
A quick recap from the last article:
- We know what kind of website this is and what the goal is — to serve as a digital home for all the content and projects Ana has.
- And we also know all the pages needed.
- Decided on what direction to follow regarding look and feel for this.
- Got the color palette and the main typeface.
- And finally, I created the folder structure on my computer for this project.
After this, I have kind of a clear idea of how the final product could look like.
Starting out
First, a confession of a bad habit I have.
Usually, in the starting phase of a project, I go straight to Google or Dribbble to grab some inspiration. I think this is a bad habit because I’m not exercising my mind to come up with an original solution for the given problem.
But there’s also another side of the coin. I don’t believe in pure, 100% originality. Because I need some kind of influence.
What I do believe is that I’m in a constant “sponge mode”. Constantly observing the world around me, the products and interfaces I interact with, the movies I watch and the books that I read. As a result, I’m building like a mental library of ideas that I can use in my work.
Everything is a Remix by Kirby Ferguson is a great video that relates to this line of thought.
So, this time, I grabbed a pen and just sketched the ideas that were floating around in my head. Nothing fancy or stunning.
To the screen
When I feel that I dumped all my ideas onto paper, I move to the computer, where I start to play around with typography and colors.
However, my process is kind of organic. What I mean by this, is that I don’t follow a strict path or series of steps. I like to go back and forth between my notepad and my computer.
It was at this time that I realized we should find a typeface for body copy.
Ana has been using Raleway across all her assets, and I ended up finding Inter UI, a somewhat neutral looking typeface that was designed to be easily legible on computer screens. I love how they look when combined!
Creating the first Home concept
After exploring a bit, I started to make a basic mockup for the Home page.
One thing that went through my mind was that, besides the blog posts, there’s not much text to put on the website. And I wanted to find a way to somehow use typography to keep things interesting but at the same time maintaining the clean and simple vibe to it.
So I played around a bit and ended up creating this concept for the Home.
There’s no pictures or colors, I just wanted to figure out how I could layout the different sections to use the content we have using the chosen typefaces.
Here’s a quick overview of its different parts, starting with the top section.
The header will have the same picture of Ana uses on all social media channels on the left, and a basic navigation menu on the right, with links to the other pages.
I think the “Hello you” and the “This is Ana Guerra” blocks help to create some movement, instead of just having a straight, centered column of text. And it’s also the same way she introduces herself on the podcast, so we can keep that consistent here on the website!
Now, on those 3 sections (Podcast, Blog and Newsletter), the idea is that each title works as a divider between them, and while we’re scrolling through the page it slowly slides to the left.
I think Raleway looks great on larger sizes, especially on heavier weights, and it works wonders for this concept.
This title part actually started with a dash in between the words. But then I had the idea of replacing that for a piece of text that communicates the posting frequency.
I like it!
The Newsletter section is a bit different than the other two.
The newsletter is delivered through Whatsapp.
So the idea here is to have like a mobile device on the right side, displaying the Whatsapp’s chat UI, on the left a button to join and another to the dedicated Newsletter page (which will also serve as a landing page) in order to get more information.
To finish things up, there’s the footer.
It basically consists of a series of icons that link to all the different platforms where Ana is.
Inspiration
Well, in this particular case I almost did no research to check out what’s currently out there, mainly because I got to that concept I showed you above pretty quickly after exploring for a few hours.
I already had a list of 4 or 5 websites that served as a reference, that we collected on the first meeting we had. Other than that I only navigated a bit through my Typography Board on Pinterest and Typeonly to get the creative juices flowing.
Communication and getting feedback
Me and Ana have been using Whatsapp to talk and to get her opinions and feedback regarding the work, I’ve been using Marvel to do that job.
Next things to do
The next step is to create the mockups for all the remaining pages.
Once I get all done, I’ll bring some colors in and take care of things in a more detailed level.
See you soon in part 3! 👋🏼
—
I also write on byvasco.com, and I’m sharing work on Dribbble and Instagram. Feel free to check it out!
