How I created my website within weeks (not really)
--
At least I’ve tried to.
This post was written in mid 2020 — when I understood that my life’s gonna change, and I need to find a job due to the virus outbreak. I decided to do what I always wanted — design and development. Planned to keep writing about my experiences, but gave up quite early. Making content is hard, especially when you have other struggles on your plate, including issues with mental health.
Today is my bithday, 28th of April, and I want to share a part of my experience.
I’m releasing the text as is — it’s unrefined, and not as polished as my usual content, but I hope you’ll find this piece of content from the old days at least entertaining or a bit useful.
Share your thoughts in comments or DMs. Subscribe to my Twitter, Instagram, YouTube, and Telegram. If you need a website, then choose a subscription — Georgy.Design.
Have fun.
Designing websites is difficult in the beginning. A newbie can be overwhelmed with huge amount of information and knowledge which required to design a website. Same goes for me: I’ve done lots of research to understand how to design website efficiently. In this blogpost you will find my way of thinking while preparing to design and actual website building, what steps I followed to make a website.
Mostly, this post is a raw piece of thinking, a notebook, an unpolished guide how to make your portfolio. It won’t tell you what you should and shouldn’t do rather show my own perspective on web design and design in general. You will see how I make websites and what it is — making a first website.
P.S: Actually, I just didn’t have enough pages in my notebook and I didn’t have other free notebooks to use, so I decided to do all the writing stuff in Notion, heh.
I feel kind of unprepared • 07/25/2020 18:15 (GMT+3)
I feel like I miss something, I need to do other things such as finish my Notion pages design (homepage, Georgy’s Journey, blog, business stuff), write down the whole roadmap of the portfolio design, make a goalmap (like a roadmap) with my goals, what I want to achieve, etcetera.
But I don’t have time for this.
I need to build a website as soon as possible because my Webflow subscription will be expired in two days (28/07/2020 9:00 AM (GMT+3)). I feel like shit because I’m still not ready, not prepared.
Still I have no choice: I need to make a personal website within two days.
Let’s do it then.
Preparation for inspiration • 07/25/2020 18:24 (GMT+3)
I have a goal to watch all videos which I think can inspire me and help to prepare to design my very own website.
There were a lot more tabs! I’m glad that soon I won’t have this amount of tabs again. Probably. I hope so, haha.
It’s already 18:30, but I still didn’t start watching God damn videos. Holy crap, this is a tough shit, man.
How to Build BEAUTIFUL Websites in HOURS 07/25/2020 19:03 (GMT+3)
Now I’m watching “How to Build BEAUTIFUL Websites in HOURS” by Futur and Ran Segall. I’m watching on 2x speed and it’s already 9:50. Right now is 19:04 (don’t ask what I was doing before sad_emoji.jpeg). I will create a separate page for every video or piece of content I watched. Maybe I’ll compile everything in one huge guide, but I might leave it as is.
Building a Responsive Website in Webflow | Grid and Flexbox | WebDev For You • 07/25/2020 21:01 (GMT+3)
I dunno why I’m watching this video because I already know the responsive design. That was my first thought caused mostly by video’s length 1:25:33. However, I decided to watch it so I’ll recall the information I’ve learnt before. Also, I might find new tips in the video to sharpen my skills.
Woah, just finished the video. It’s already 21:01 😞
Making Cool Diagonal Sections With Webflow
A video on how to create diagonal sections in Webflow. Nuff said
Groceries
Went to the chain grocery store to buy food for my grandma. Let’s call it a short break.
Ultra-Fast Website Redesign With Webflow • 07/25/2020 22:05 (GMT+3)
Not gonna create a separate page for this video because it is just a Webflow showcase. I expected to get some tips, but it’s merely a Webflow ad (quite a good one tho).
Webflow CMS Project | STEP by STEP | Farm Equipment Sales Website 07/25/2020 22:08 (GMT+3)
I love this kind of step by step videos. The real example is always better.
Backpacks Websites Review • 07/25/2020 22:45 (GMT+3)
Useful information on web design.
It’s time to hit the hay • 07/25/2020 22:46 (GMT+3)
Gotta sleep, man. It’s almost 11 PM already. I wanna be fresh in the morning to continue working with more power.
Good night! 🌃
Rise and shine, Mr Alaverdyan, rise and shine • 07/26/2020 11:10 (GMT+3)
It’s 11:58. I woke up late because my relatives kinda annoyed me in the morning. I’ve made a cup of tea and one more of coffee for myself and my mom. So, I’m ready to go.
TOP 5 WEBSITES EVERY WEB DESIGNER SHOULD VISIT: Mind-blowing web design | March 2020 • 07/26/2020 12:00 (GMT+3)
Video link. I’ll just list the sites here:
- rouserlab.com (engaging interactions with the website: you can move the bubble and then it explodes when you scroll down)
- ed.com.au (creators of rouserlab.com; hilarious testimonials written by creators’ moms)
- theyearofgreta.com (3D model of Greta which rotates while scrolling; different images appear while scrolling which open articles or videos related to Greta)
- superherocheesecake.com (creators of theyearofgreta.com)
- useplink.com (astonishing usage of 3D models and animation; also has invert effect which helps to engage with the content: user can find a QR-code by moving a cursor)
- autumn.amsterdam (creators of useplink.com; just a decent looking site)
- 5scontent.com (“It takes 7 seconds to make an impression, we do it in 5” — sounds cool; they have lots of layering which makes interesting engagement with the site; color palette changes every time after reloading the site, also color changes too when you click somewhere on the site)
- amandabraga.com (website’s art direction is just super nice; lots of text but because of typography, color scheme and composition site looks awesome and fun to engage with; has a fun effect of dropping pictures while hovering the cursor on the main screen)
Portfolio Review: Self Taught Indian Designer
Didn’t get a lot of information out of the vid, but the work of that self taught Indian designer is inspiring. Looked real smooth.
Lunch time
I had a lunch. That’s it. Well, to be honest, I didn’t mention it before but I was fasting whole day yesterday. The day before yesterday I had shaverma for lunch, so you may count that day or not, I did not. I was looking for at least 4 days fasting, however today is my dad’s b-day, so I need to eat to respect him, not make him sad, etcetera (actually, there is not much to do at the gathering, so I don’t want make it awkward for myself). Still I couldn’t eat, but I did. Will start fasting tomorrow. I plan a week fasting which might look crazy, but I have reasons for that. No, I’m not that fat as you can imagine.
BEST WEB PORTFOLIO: Case Study of Web Design
A case study! Yas-s! That’s super useful. As usual here is the video link.
Really insightful video for beginners. I would definitely recommend to watch it.
UX/UI Portfolio Review: Robert Smart
Not much info here. I didn’t like this portfolio that much, but it had a nice layout for case studies.
TOP 5 STUNNING PORTFOLIO WEBSITES: Inspiration for portfolio website
I watched this one a while ago. Still I want to rewatch it to get some more insights for my personal website project.
- Ilya Kulbachny (has interesting layout and effects; huge photo of the designer on the main page and when you scroll down it zooms in a black sweatshirt of the designer, after that text pops in)
- Damian Watracz (has loading effect (when you open the site), a photo of the designer on the main page and a huge word ‘designer’ (almost transparent) behind the photo; the layout is super clean as a whole website too)
- Abishek Jha (cool loading effect; amazing website art direction; inverted text colors; impressive scroll interactions; gifs usage is a nice addition; also has layering on same pages)
- Davide Baratta (emojis!; horizontal scroll to see the works; seamless transitions to other pages, specifically works ones; hover causes gifs to pop up on info (about me) page)
- Robin Mastromarino (basically a whole website is a portfolio showcasing works; has fancy horizontal scroll transitions;
E-COMMERCE BEST WEBSITES: Awesome web design 2020 • 26/07/2020 15:16 (GMT+3)
Nice e-commerce sites. Look great.
Came home kinda late
Well, I’m home. I’ve spent half a day for some useless stuff (kind of), but I must go on! It’s 14:19 right now.
Still starting…
Watched a bunch of videos, read a few articles and it’s time to sketch. Holy Molly, I don’t have much time. Well, shit happens (I guess lol).
A quick note
I’m watching videos and reading articles right now. Decided to speed up the whole process. Maybe I will write what I watched and read here. Talk later.
Hell yeah, starting point • 07/27/2020 17:22 (GMT+3)
There are two courses I need to read/watch before actual wireframing and sketching.
The one is Creating a custom portfolio by Webflow and Design and build your agency website by Tom Johnson.
The time is running out and I think I wouldn’t make it, but I might have enough power to work at night if I finish the design and the only thing left will be a site development.
OK, let’s continue.
Design and build your agency website
https://webflow.com/blog/design-and-build-your-agency-website-in-webflow
Creating a custom portfolio
https://university.webflow.com/lesson/portfolio-website
I N S P I R A T I O N
Yes, guys, we did it. Finally, I arrived to the point when I’ll start doing instead of learning.
I will track time to know how much I spent for this or that website creation part.
Also, I will check animation tutorials, so I can implement fancy engaging interactions on my site.
But first I will start with an idea and contet strategy to understand what I want to get from my site, what informations and ideas I want to deliver to end users and how I want to structure the site.
Turned on Figma
Approximately 4 hours and 15 minutes spent for inspiration and sketching procedure.
It’s 00:44 and I’m moving to Figma to create wireframes.
Gonna sleep…
It’s 1:37, and I want to sleep. So I’ll resume work in the morning.
Gnite~
Working
Woke up at 9 AM and went for a medical check with my mom. When I came back home, watched Trash Taste podcast episode 7 and had a breakfast. After that continued to work on my website. It’s 13:26 right now and I’m working.
Wireframing complete
22:45.
I’ve spent whole day to create a wireframe. In the beginning, I struggled with the site pages and what kind of design I would like to see, so I “enhanced” the content strategy by adding additional elements in the homepage. Literally, I’ve made a fast design description and systematic layout. For example, I’ve mentioned header, what it includes, like text and button.
However, right now I feel that I’ve should write an entire content strategy first which would include everything: pages what I will have, layout on the pages, content on it with explanations and reasons for that. Still I have kind of an abstract idea in my head, but it would be a way better to make it on paper.
Anyway, I already finished the homepage wireframe, so tomorrow I won’t do the content strategy in the beginning of the day, rather complete the design of the homepage, so I will have an understanding of the site and how it feels. Maybe I would do it anyway, I’ll see.
Well, I am going to sleep because it is late and I want to sleep. And get enough energy, yes, that’s important.
Good night ya’ll!
15:33 and I’m just starting
It might seem that I am slacking off, but that’s not true. Woke up quite late because I was reading Oyasumi Punpun (Goodnight Punpun) manga which is an amazing piece of art. Definitely a must read.
Now I will write content strategy first and then I will work on homepage’s design.
The Homepage Content Strategy Day
Nuff said. I’ve spent a whole day for the content strategy. However, I didn’t manage to write full content strategy, but just for the homepage. I need to analyze what’s wrong. It worth to mention, that I didn’t do it for 8 hours (I guess) because I had breaks (shower, lunch, dinner, watching something). Also I woke up quite late. Well, Oyasumi Punpun is a very interesting manga — I was reading it all night long yesterday.
Now I’m going to finish watching The Peanut Butter Falcon and after that I will go to sleep. Tomorrow I will finish the full content strategy, and start designing the homepage based on my wireframe.
Long story short • 07/31/2020 14:18 (GMT+3)
Yesterday I was talking to one girl all day long, so I didn’t even work on the site or did anything else (just ate and went to the well).
Now I’m going to continue to work on the content strategy.
