2nd Version Is Always Better
Skills:
UI Design90%
Key Takeaways
Improving a blog design using Webflow CMS, adding dynamic colors, gradients, and typography, and creating a video background for the homepage
Full Transcript
[Music] so last week I tried to design and develop our new blog on web float in one day and you can't say that I've succeeded because we've launched it but I can't really say that I'm proud of it how it looks and everything so I want to spend today improving on it and completing all the tasks that I didn't get to do last week I'm heading to meet leor after all it's his blog so I want to hear his feedback or what he likes or he doesn't like about it and also have to visit a print shop uh to choose paper and stuff like that for a client that I'm printing the business cards [Music] [Applause] [Music] for [Music] this Print House does such a cool and beautiful kind of crafted work it really made me want to create my own sketchbooks so I'm thinking about maybe creating a bunch of them and then maybe if you guys want some I can sell it to you let me know in the comments below if you're interested all right so I'm back home for those of you who haven't seen last week episode where I did the blog so this is more or less what we have now with already real posts in the blog by leor we kind of have this header with a changing color here a little bio about leor the post here and then some more post our other project the new school in Prospero and sign up and this area is completely not done yet anyway we have a lot to do and I've kind of prioritized uh what I'm going to try to be doing today hope I'll get much of it or possibly even everything done today let's do it [Music] all right so it's been 4 hours of straight heavy concentration work and actually I'm I'm super wasted I'm really really tired but I want to take you and show you before and after everything that I did and how it was thinking about it so let's see what I did all right so let's start looking at the design I had last week and see how I tried to improve it so the first thing that bothered me when I looked at this was that there's too many things that trying to grab your attention when you look at this bait you have the Navar here that's black and it's uh very you know contrasted so you look at it you have the header here and you have the box here with leor there's it's just messy too many things going on so as you can see I've uh made the the navigation bar transparent I've made the hero section the green area larger and I completely remove the area about leor and instead I just put here by leor frankline if you click it you get to the about page so the result is much more you know clearer and focused on the text uh area I've also added this gradient uh that's automatically um being added to the color as I've explained to you last week every post has a Dynamic Color you can choose it when you write the post and the gradient just goes on top of that and when you scroll down you get here the Navar gets a color that's also changing dynamically according to um the post so that's really awesome and it was really simple to do with the web flow CMS um as you can also notice I've changed the fonts and the whole typography um leor kind of didn't really like the font that's that's font that I always use it's my favorite font sharp Suns um but we wanted to go with something that felt a little bit more hardcore so I changed the fonts everything here that I'm using is Google fonts and it's super easy to import the Google fonts into webflow so that's basically the the post page I've I did a little work also on the bottom here um also somebody mentioned in the comments I wrote here in the fter bye-bye and somebody mentioned in the comments that it's not really nice so now I wrote I'm a real person if you want to write me try email me yet and I put Lor's email I think that's a bit more personal the other thing that I worked on is the homepage so before it was kind of this was the homepage with a lot of in focus on leor because it's kind of a personal blog but we decided we want to make it more kind of an agenda uh of this blog rather than kind of the bio of leor so what I did is me show you first of all I put a a video background here with all kinds of gifts that I put together to kind of give the feeling of what this blog is about like technology the future the crazy world that we're living in so just trying to make something cool from gifts I put together the gifts in Photoshop gave them an overlay of black and white and upload them as a background video which is also super easy to do in web flow and then I kind of removed leor photo and I just made kind of a an agenda this is not the final Tex leor would change but kind of like what is the agenda of this blog with a signature and then who the hell is leor this will take to the about page about leor where you can actually read more about him all right so I feel much better with this version this week but I I still think it was important to launch last week even though last week I was really ashamed to show you guys what I did I felt really bad with it but I said okay I'm said I'm going to launch it this week so I did and now this week I feel much better with it um I did a lot of improvements still it's not perfect I didn't get to do the glitch effect on the titles because it turned out to be more complicated than I thought but every time every week that you work on it you push a little better and eventually it will I I hope it will look like a you know goodlook Vlog anyway that's all for today I'm super tired hope you guys have a great day I'll catch you [Music] tomorrow [Music] oh
Original Description
Working to improve the blog we've started last week:
scaredandexcited.com
-
Subscribe:
https://www.youtube.com/fluxwithransegall?sub_confirmation=1
-
Currently working on:
http://www.goprospero.com
http://www.thenuschool.com
-
Join the Flux community on Patreon:
https://www.patreon.com/flux_ransegall
-
Music by: Pusher - Emeralds
https://soundcloud.com/future/pusher-emeralds-edm-com
-
Twitter: http://twitter.com/ransegall
Instagram: https://www.instagram.com/ransegall/
-
Vlogging camera - Canon G7x: http://amzn.to/22dnCQt
-
Work Hard & Be Nice Poster:
https://society6.com/ransegall
Playlist
Uploads from Flux Academy · Flux Academy · 51 of 60
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
▶
52
53
54
55
56
57
58
59
60
Finding Great Partners As A Designer
Flux Academy
Distributing Your Content So Others Will Find It
Flux Academy
Productivity & Pricing Workshop In Jerusalem
Flux Academy
What Is Product Market Fit
Flux Academy
Money, Impact Or Fun?
Flux Academy
Scared Of Similar Logos
Flux Academy
I Suck At Scheduling
Flux Academy
Giving Up Your Loyal Clients
Flux Academy
Trying A New Business Model
Flux Academy
What Clients REALLY Care About (3 Types)
Flux Academy
How Much Money Can Designers Make?
Flux Academy
Holidays Suck! (for entrepreneurs)
Flux Academy
Increasing Self Awareness With Meditation
Flux Academy
It Pays To Eat Out
Flux Academy
Better Way To Build Landing Pages? (iGloo Review)
Flux Academy
Thoughts On Collaborative Design (Figma 1.0 Review)
Flux Academy
New Ideas During My Time Off
Flux Academy
Who Are You? | #SenKimsin
Flux Academy
I Don't Know What Works
Flux Academy
Thinking About The Next 5 Years
Flux Academy
Cool Features Are Not Enough
Flux Academy
All Cars Are GONE! (Yom Kipur 2016)
Flux Academy
Thinking For A Living
Flux Academy
Stuck In Shallow Work
Flux Academy
Trying To Challenge Myself
Flux Academy
VR Design: Getting Started With Unity 3D
Flux Academy
Communicating Clearly
Flux Academy
Skills VS Assets
Flux Academy
Setting Payment Milestones
Flux Academy
Designing Cover For My New Marketing Book
Flux Academy
Learning From Negative Feedback
Flux Academy
Everyone Here Loves Webflow
Flux Academy
Future of Design Industry (KiKK festival day 1)
Flux Academy
Beauty Matters (KiKK Festival Day 2)
Flux Academy
The Power Of A Story
Flux Academy
You Get What You Pay For
Flux Academy
Photography For Designers
Flux Academy
Starting A New Blog
Flux Academy
Hard Work is a LIE!
Flux Academy
Principals Of Poster Design
Flux Academy
How We Party In Thailand
Flux Academy
10,000 Subscribes. What's Next?
Flux Academy
Startup Logo Case Study: Nexar
Flux Academy
Super Talented, But Fired
Flux Academy
Cracking Under Pressure
Flux Academy
Frustration Is An Opportunity
Flux Academy
How Much $ Am I Worth?
Flux Academy
Are Contracts Worthless?
Flux Academy
Blog On Webflow VS WordPress
Flux Academy
iPhone App Design In A Day (Sketch + InVision)
Flux Academy
2nd Version Is Always Better
Flux Academy
Creating Your Dream Job
Flux Academy
Designer Exploring Jerusalem
Flux Academy
Designers Hourly Rate
Flux Academy
My Country Doesn't Value Design
Flux Academy
Designing My Week For Deep Work (Time Management Hack)
Flux Academy
Big-Shots Get Rejected Too
Flux Academy
Designing A Landing Page With A Hammer
Flux Academy
Becoming A Superstar Designer
Flux Academy
Negotiating Deadlines With Clients
Flux Academy
More on: UI Design
View skill →Related Reads
📰
📰
📰
📰
Before You Sync: Review What Changed in Your Dotfiles
Medium · Programming
Playwright Chronicles: Crafting Elegant Automation in JS/TS from Scratch — Part 53: Connecting…
Medium · DevOps
When OPA’s `semver.is_valid` Runs on What SemVer Rejects
Medium · DevOps
Breaking CI Guards on Purpose to Prove They Can Fail
Dev.to · Seth Wheeler
🎓
Tutor Explanation
DeepCamp AI