Mindpeak - Website Building Call
tags:: Mindpeak #output/lecture Website
Notes
My Invitation
🌍 Friends!
Tatyana proposed I could host a workshop on building a website this fall.
How does that sound, to get your own little place on the internet?
A place to express yourself, or even sell stuff?
So Googling you doesn't return just another LinkedIn profile?
I've been building websites for more than half of my life so, well, I can talk for a while.
Help me out here to clarify what you'd want to learn.
- What would be the purpose of your site?
- What's holding you back from creating one?
- Would you like more focus on layout/design or technical details? Or even funnels?
Kisses and courage! ❤️
M
Reactions
Tatyana Fomina
( obviously) I AM IN!!!
-purpose: my digital presentation/face that creates an advantageous impression about me and shows my work/projects/personality (!)
- I’ve got several reasons:
- I won’t pull it off by myself
- I am afraid of time/prices
- I am afraid to define myself as I am in the very beginning of my career and life
- I’d love to have layout/design and LOGIC behind creating a website ( cuz probably someone will do it for me/ I’ll use the simplest web builder). So it also intersects with branding strategy and graphic design
Cassidy Chapman
NO WAYYYY I just decided today that I want to create another website that isn’t my current one for my book funnel and for speaking gigs ect,
https://www.envealing.com/(here is my current website that I build myself on Kajabi) because I want a different URL and all as Cassidyamberchapman which you are going to get me to buy right now ahhah!
I got so freaked out at the idea because I wouldnt be able to use my Kajabi because you can only have one URL so I would have to build it which legit got me sweaty thinking about 😂
WOOWWW alright I hear you universe
Yes please please do this workshop
I have created many funnels but I am so comfortable on Kajabi but idk how to build something on say Wix or web press and I wouldn’t want something that costs too much I already spend $150 on Kajabi a month (which I do not mind because it is soooo user friendly and I can build out funnels pretty good) if I wanted a second website it would be $399 a month which is too much of a difference lol might as well have two different Kajabi accounts 😂
Technical details would be great / helping find something user friendly
Also can you build a funnel with those types of sites or do you have to buy sites separately 😂
Laura Stefany Gutierrez Perez
First of all. What is fall? 😂😂
I'm interested because IDK how to create a website.
Like Cassidy I've used Kajabi because is so easy and you can automatize many things for your digital business. 😅
However, I would like to have all my services in one place and I don't know how.
Thanks Marcel and Taty for this idea🙌🏻
Mónica
OMG I'M IN AS WELL! 😍😍😍
-
After MVU, my #1 determination is to launch my career as a Coach, so my website would help me on that! Offer my services, a blog so people can get to know me better, a place to have free and pay resources... I have a basic background on Wordpress, but don't know how to build a website from scratch
-
What holds me back is the lack of knowledge and the costs... I don't wanna have to pay a lot a month if I won't be generating too much revenue from the website from the start (that's why I haven't joined kajabi hahaha)
-
A bit of everything... your recommendations to start from scratch, easy funnels to use, hacks on design made easy haha
OMG I'M SO EXCITED ABOUT THIS! THANK YOU GUYS ❤️
Aaron Elsner
Marcel, thumbs up for the website!
Valentina Garay
This is really cool!!! @Marcel Samyn Thank you for being willing to host one and @Tatyana Fomina Thank you for the idea
I have a website for my brand ( www.design-hacks.co [I have not updated it in over a year]) , I know a bit of Wordpress and switched to Wix because I got tired of the coding part taking forever. I have also designed some websites for some clients (Just 4 so far, I have not pursued web design as the projects are too long), and not at all at the level that Marcel or Tim may be at... I'm just a visual person :)
I feel like a big part of my purpose is floating around since MVU and I want to update my tool knowledge for when it lands and settles in
I'd love to join seeking for inspiration on improving mine, best practices, I may have to rebuild/redesign/rebrand my site as what I do has evolved from when I did it last time
Marcel I love your website, mainly I admire the commitment you have to content generation and how clear everyone's purpose is... I'm considering having a space for digital presence as me, not my brand but Valentina, but I'm not really sure if I should have it, if the work will outweigh the pros, if I only want it because it's a best practice recommended by others and I don't really need it... I guess I'm confused hahah.
Delyana
Hey guys 👋, I haven't been active here for a while since I've been traveling with my family but things are getting calmer now and I'll have more time for Mindpeak.
1️⃣First, welcome to all new mindpeakers 🎉🥳 I'll read your profiles in the upcoming days. I'm super excited to get to know you!!
2⃣Second, I'll update my own mindpeak profile cuz... Honestly I don't even remember what I put there 😂
3️⃣Third, @Marcel Samyn YES YES YES, I'M IN!! It's so interesting that you suggested this @Tatyana Fomina cuz I literally thought about creating a website yesterday 😆.
❓To answer your questions Marcel,
- the purpose: to showcase my personality, document my journey and build my personal brand
- the thing that's holding me back is that I have too many ideas of how I can structure it that I get overwhelmed (and never begin)
- I'd like to focus on the layout/design and the logic behind how to structure it in an easy to navigate way.
Joao Sa
I'm in!!! 🤩🤩 technically I already built some, but always with a lot of code and never with the purpose of showcasing my work 🤔
🌃 Purpose: Show casing, possibility documenting and in-depth exploration of the projects and hobbies I am working on 💥 Kind of a Mindpeak profile updates very soon 👀, but without the more deep and vulnerable part 🤣
❌ What's holding me back?: I would say my biggest barriers are:
1. UI (User Interface) 🖼️ you know... If I'm going to have a website, I need to consider it aEsThEtIcAlLy PlEaSiNg and shit 🪷 not having good design is a dealbreaker for me, and I'm not that good at coming up with a good design (YET)
2. lack of time ⏱️ if I decide to build it, I'll build it with HTML and CSS. And it will take AGES, specially because of the UI problem.
3. pride and shame 🙄 "ahh, but who said you needed to build it with HTML and CSS?" >> You know, the thing with being a developer... It's that it's kind of "weak" to not build it yourself using HTML and CSS 😅 specially because I develop web apps 🤣🤣 So yeah, there is some pride that is blocking me from using a no-code tool and possibly accelerating my progress A LOT
4. some other mindset blocks like "is it worth it?", "why bother?", "nobody cares", etc etc
🔦 Focus: layout and design, 100%
Summary of Reactions
Challenges:
- Price
- Hard (or feels like it)
- I can't code
- Coding takes a lot of time (Sa "and I MUST code it because I can")
- I don't want to code
- Design
What people want:
- A place to present themselves
- Blog
- (Some) selling products
Quotes to include
Story: Roger Elbert, film critic, lost his voice and started blogging. Elbert knew his time on this planet was short, and he wanted to share everything he could in the time he had left.
If your work isn't online, it doesn't exist.
Imagine if your next boss didn't have to read your resume because he already reads your blog. Imagine being a student and getting your first gig based on a school project you posted online. Imagine losing your job but having a social network of people familiar with your work and ready to help you find a new one.
A website is a Serendipity Vehicle.
Visual: attractor model with dots. Website extends your amount of dots, or makes you bigger. Relate to Leverage Stacking.
Shout it from the rooftops.
My stories:
- Published .NET Core article and got emailed about a guy wanting to put it on his news blog
- A guy contacting me "hey can we work together about mobility videos"
- Always opened up conversations in recruiting. Pre-approved.
- From age 7 I was making websites for other people. This is because I put myself out there, made it clear who I was and what I could do.
- 2013-05-30: 200 USD for graphic design contest
- Lockerz Website
- Litoziekla website massively increased our income
Framer looks like a really good website builder. https://www.framer.com/
Meh it's too Photoshopy. But maybe nice for someone like Val.
There's als Webflow which looks...the same?
Ecology of Talent.
Tell them that humans are interested in other humans, so put that forward. This is how you build a relationship, which is what it's about in the end.
Do not abandon your website for the newest shiniest social media. Don't give in. This is what will stay for the long term. Build a good name, keep your name clean, do good work. Over a long period of time. That's all that matters.
Overview / Brainstorm
My goals
I want to serve as a leader.
- Motivating you
- Make you Minimally Viably Competent
- Giving you an explicit path to your first website
Brain Dump
- Making the Minimum Viable Product
- Less Looks Better
- Should feel "filled"
- So pick a good starting point
- Drop the fanciness
- Reverse Engineering your Website
- Purpose-Driven Development
- Start with the end in mind, trace back user paths
- Design = Rhythm
- The Key Point First
- Create a Guiding Path
- Consistency. Consistency. Consistency.
- Developing
- Simple is Simple, Everywhere
- If you're up for it, code! It's really not that hard.
- The features, the pages, the purpose can be changed later
- Surrender to the Template
- Simple is Simple, Everywhere
The Four C's
Celebrate. The ambition in this group, willingness to learn, willingness to step into the unknown, out of their comfort zone, and learn a new highly important but not easy skill.
Confront. You aren't getting results because you're trying to do everything at once and you're overwhelming yourself. You're trying to do too much, too soon. You're not starting small and learning the first steps.
Challenge. Make your website 1% better every day.
But we'll flip it: run before we walk. Make a website first, then learn how. It'll challenge you.
Charge. Start building today. Never leave the scene of decision without taking specific action towards its realization. Make a Massive Action Plan. Make your serendipity explode.
The Three Stories
Interact with the audience in each story by "bouncing" in and out with them at different moments in your story.
- The Oldest Story of the Planet: Life.
- My Journey: 19 years of building websites. You get better as you practice. You can always change it.
- My story of choosing a website builder / framework for customers.
- Emotion: letting them down, changing my mind, not knowing what's best for them
- My story of flipping to coding myself. It's simple.
- ?
CTA Crescendo Loopback
Today is the start of a new chapter for many of you.
You've come here with a dream, and you're leaving with a plan. (Hopefully 🙂)
A plan to claim your piece of cyberspace.
A plan to allow yourself to be seen—really seen.
A plan to let your memes multiply and bump into all kinds of wonderful random, beautiful things.
Because you're building a website.
And it's the best serendipity vehicle there is.
Thank you.
GPT-3's Outline
- Introduction (5 minutes)
- Why do you need a website?
- What are your goals for your website?
- Website Planning (15 minutes)
- What is the purpose of your website?
- Who is your target audience?
- What content do you want to include on your website?
- Domain Names and Hosting (10 minutes)
- What is a domain name?
- What is hosting?
- How do you choose a domain name?
- How do you choose a hosting provider?
- Website Building Tools (10 minutes)
- What are some popular website building tools?
- What are the pros and cons of each tool?
- Designing Your Website (10 minutes)
- What are some important factors to consider when designing your website?
- Creating Content for Your Website (10 minutes)
- What are some tips for creating great content for your website?
- Promoting Your Website (10 minutes)
- What are some ways to promote your website?
Content
Module 1: Introduction (14:10)
The Story of Life
Let's go back in time.
Before VR.
Before the smartphone.
Before the internet.
Before computers.
(Wait wasn't this call about websites?)
Before electricity.
Before the Dark Ages. Roman Empire.
Before text or numbers.
Before language.
Before...humans.
Before dinosaurs.
Back to the oldest story of the planet. The story of life.
At this point the landscape was some rocks and some liquid drab or something. Very, very boring—nothing was really happening. Or was there?
If you remember from chemistry, reactions occur when the right molecules slam into each other. There are thousands, millions, billions of molecules drifting around and generally not giving much fucks about what's going on around them. But once in a while, a good pair slams into each other and something else comes out. That usually continues not giving much fucks about the rest of the world.
This continued for, oh, just a couple million years. But at some point something interesting started to happen. For some reason this new kind of molecule that came out, kind of facilitated the same reaction happening again. Maybe it was magnetically attracting the right ones, or just giving an intermediary step that made it easier—anyways there's this thing that makes more things appear. A self-replicating...organism? Is that what we start calling it? The point is, this just happened.
Over time, more and more of our grey drab turns into things, these proto-organisms. They're a bit bigger so they bump into more stuff, and apparently if this extra bit of stuff hits it in the right way, it attaches and the things replicate even faster! So then after a while our grey drab becomes mostly this proto-organism version two.
And so on and so forth, and so it turns out that these tiny little things, let's call them genes, replicate much better if they have this big complicated structure around them. It protects them, and helps them duplicate. In the end it's still about the right bits of matter bumping into each other in the right situation, but we've built this whole machinery around it so it happens much more often. We've built a serendipity vehicle.
Random is random, sure, but we can drastically increase the chances of serendipity with the right vehicle.
Memes
Cool. We've tackled the origins and meaning of life. Getting a bit closer to building a website. Hope you've got a glass of water.
In our modern world, there's not much biological evolution happening anymore. Most people survive without trying really hard, there's not much evolutionary pressure, so we don't really evolve in a specific direction.
But where evolution does still and mostly happens today, is in the layer we humans built on top of biology. We have this capacity to communicate complex thoughts. We can...replicate...ideas. Some of them are easier to remember, and some are easier to share. Some are both. With language, ideas duplicate into the brain of the listener.
So we can apply the same evolutionary thinking as we did to genes, but to ideas. These are—you guessed it—memes. They're not the internet pictures, they're ideas in general.
Red being a dangerous color is a meme.
Language itself is a meme.
Your identity, or at least how you're known, is a meme.
Manufcaturing Serendipity
Who here has experienced serendipity before?
Where something really great just...happened? The right molecules bumped into each other? Well sure literally, or figuratively. The right memes got exposed to each other and exploded into a beautiful burst of insight.
Are you seeing the dots? Approaching each other, about to collide?
Remember how we talked about the serendipity vehicle? It takes the genes and makes them collide more with each other, so more wonderful serendipitous moments happen.
If you want more magic coincidences in life, you have to build a serendipity vehicle. Something that takes you, your ideas, your memes, and gives them the chance to collide and interact and create new beautiful things out of pure luck and randomness.
This is what happens when you put yourself out there.
When you shout from the rooftops who you are.
When you start writing, speaking, creating.
This is why you need a website.
Housekeeping (14:15)
- My goals:
- Motivate you
- Make you minimally viably competent
- Give you a clear path
- This session won't be that much technical. Homework.
- There will be moments for questions and answers.
- Interrupt me if something's not clear or if I'm going too fast.
Why? (Your Responses) (14:20)
- Show who I am
- Show my work
- Sell stuff
Congratulations, these are the best reasons.
If your work isn't online, it doesn't exist.
This is not just 1's and 0's—it's your life.
The world runs on the internet.
Imagine:
Imagine if your next boss didn't have to read your resume because he already reads your blog. Imagine being a student and getting your first gig based on a school project you posted online. Imagine losing your job but having a social network of people familiar with your work and ready to help you find a new one.
Making it Achievable (14:30)
"Find your voice, shout it from the rooftops, and keep doing it until the people that are looking for you find you." – Dan Harmon
- Just-in-time story / example: my history of websites
- You don't have to be a genius. We're all amateurs.
- Just-in-time learning bypasses overwhelm
- Just-in-time example: this note
- Structure, features and purpose can change. Story: Agile & Refactoring.
Module 2: The Design (14:40)
Why Design
- Most important part of website. It's visual.
- This makes the site click and be understood.
- People get interested: personal & career.
- People buy: financial.
Purpose-Driven Design
- Story (when I look at others, Infrabel, Huapii?): Design is about clarity.
- Start with the end and reverse engineer
- Create a shitty first purpose draft
- You don't know your voice until you start using it
Visitor Stories (14:50)
Write out what your visitors would be looking for, what they see, how they feel.
Exercise: Write Visitor Stories.
Wireframes & Design Fundamentals (15:00)
- Beauty can be seen from far away
- The user is drunk
- Rhythm & Hierarchy
- The Key Point First
- Create a Guiding Path
- Consistency. Consistency. Consistency.
- F-shaped reading (...kinda)
- Big is important. First is important.
- Reduce choices, literally or visually.
- Typography rules: line width and height.
Exercise: Create a Few Wireframes.
Defining the Minimum Viable Product (15:15)
Story: Nudges at Huapii.
Everything can be added later.
Choose quickly and change things.
Launch the container now. Add incremental value.
Exercise: Pick 1 Visitor Story. Recreate the Wireframe(s).
Do's and Don'ts, examples, Q&A
- Don't try to be too fancy
- Don't stick hard to your wishes (surrender to the template)
- It's a negotiation with the next module
Module 3: Developing (15:30)
Why developing?
"Carving out a space for yourself online, somewhere where you can express yourself and share your work, is still one of the best possible investments you can make with your time." – Andy Baio
- Rubber hits the road.
- This is the work that you think of
- It's where people struggle because there's so much to know
- Your growth is here.
- Teaches you clarity, structure, time management.
What is a website?
Domain names & hosting.
Tools for doing it
- Coding yourself
- Static site builders
- Wordpress, most popular way (blog-focused)
- Other CMSes: Drupal, Joomla (page-focused)
- Page Builders: Carrd; WP's Block Builder, Elementor, Divi, Brizy, Visual Composer
- Visual builders: Framer, Webflow
Story: Choosing builder and changing my mind for customer.
Story: Flipping back and forth to coding myself.
I would recommend Wordpress.
Up & Running With Wordpress
- Register a domain name
- Create a wordpress.com account
- Surrender to the Template
The Block Builder
- List View
- Styles
- Stay away from styling individual blocks
- Templates & Template Parts
Understanding Blocks
- Rows and Columns
- Exploring a few blocks
Simpler Alternative: Carrd
If you just want one page.
Do's and Don'ts, Q&A
Wrapping Up (15:50)
And now, it's time for your biggest challenge yet.
I've given you all the tools you need, but now it's your turn.
You've come here with a dream, and you're leaving with a plan. (Hopefully 🙂)
A plan to claim your piece of cyberspace.
A plan to allow yourself to be seen—really seen.
A plan to let your memes multiply and bump into all kinds of wonderful random, beautiful things.
Because you're building a website.
And this serendipity vehicle is just the start of your next level of evolution.
Thank you.
Workshop 2
Brainstorm
HTML
- What is everyone using to build their website?
- Technology background
- HTML: semantic markup language
- F-shaped flow, like text
- Block model
- Margin, padding, border
- Principles of responsive design
- Server-side vs client-side code
- JavaScript
- HTML Elements
- Headings: h1, h2, h3, h4, h5, h6
- Paragraph: p
- Text formatting: em(phasis), strong
- Lists: ul, ol, li
- Block (division): div
- Image: img
- Video: video
- Markdown is an easier markup language
- Getting the most out of a website builder tool