Building Ana’s Website, Pt 1
My process of creating a website, from start to finish.
Starting from the beginning. My friend Ana Guerra started thinking about creating a newsletter and we talked about creating some kind of landing page for that. However, there are a few more things she’s into — she also writes and has a podcast. So we thought we should take it a step further and just create a full website to serve as her personal home on the internet to house every project she has going on, and for future stuff as well!
This is the beginning of a series where me and Ana will document the full process of building her website. I’ll write here on Medium and on my website, and she’s doing it on her podcast. Here’s the first episode!
After we landed on this conclusion, we met for a coffee after work to chat a bit about what this website should and shouldn’t do, and what content should be in there. Basically, we defined the general concept/idea.
What kind of website will this be?
I would call this a personal website. On the home page there’s gonna be a short introduction of who Ana is and what she does, and then 3 different sections to showcase the different types of content she creates (podcast, the blog, and the newsletter), where the podcast and the blog sections will have the most recent episodes/posts.
Besides the home page, there will be a few other pages:
- a page specifically for the podcast with all the episodes
- the blog, with all the blog posts
- a page for the newsletter
- a contact page
- and in the future we might build a gear page, to showcase all the different equipment she uses on a daily basis.
Colors, typography, and overall feel
Ana has already defined the color palette for her brand, and she’s also been using Raleway as the main typeface, so that’s awesome. I might introduce another one a bit more neutral for body copy, but I still need to explore a bit on that.
I’m happy that the colors are pretty bright and vivid, because that reenforces who she is: a person full of energy and with lots of will to do stuff!
Overall, the goal is to make this look simple, modern, young and to the point.
First steps
The first thing I did was to create the folder structure on my computer. I have 4 different folders here:
- Docs: where I’ll save all kinds of documents Ana sends me
- Assets: for images, icons, etc
- Design: this will be where all the Sketch files will live
- Shared: the folder where I’ll put everything I want to share with Ana, like final designs, assets for her to use, etc.
This was highly inspired by Jesse Showalter’s method. I recommend you to check out his channel for awesome design related content!
What I also like to do is to create a couple of artboards in Sketch to build the color palette and even though in this case it’s nothing complex, I also like to create the sitemap.
Lastly, I make sure I get all the written content that should be displayed on the website so that I can design around the content and not the other way around — after all, the content is the most important thing!
What’s next?
Ok so next I’ll be exploring a bit on pen and paper just to get my ideas going on how the layout could be.
Another thing is to look for other people’s personal websites just to get a sense of what’s out there, and after that, it’s time to start designing!
I’ll leave this for the next post, which shouldn’t take too long to come out.
See you in part 2! 👋🏼
Edit: here’s part 2
—
I also write on byvasco.com, and I’m sharing work on Dribbble and Instagram. Feel free to check it out!
