Summarify.net

How I Design Beautiful Websites (Without Being a Designer)

HZLHIWv2Po0 — Published on YouTube channel Gobie Nan on September 20, 2024, 7:46 PM

Watch Video

Summary

This summary is generated by AI and may contain inaccuracies.

- Speaker A wants to share the resources he uses to get inspiration from for his SaaS products. He thinks three contributors which developers get wrong when they build a website are fonts, colors and spacing. - Speaker A talks about where he gets his inspiration from. He recommends dribble for design inspiration and Code drops for web design tutorials and inspiration. Speaker A explains how to use a certain element of it to give the site something special. - Speaker A talks about bento grids and uncoverlabs. Speaker A is a website that has a ton of great designs for designers and developers. Speaker B is a chat page for developers to ask questions and report the errors.

Video Description

Watch Next: https://www.youtube.com/watch?v=ZydjoyupPzY&list=PLtu71D9QGuou0ySREGE9ncUXIjBlO-Uhp&index=1

If you are looking for the design resources.
Here you go: https://gobienan.com/resources

Spectral Gradient used from Damon xart.

Projects I created:
https://ResumePhoto.ai
https://Resoume.com
https://Chapterize.ai

Find me on the internet:
Website: https://gobienan.com
Twitter: https://twitter.com/@gobienan
Linkedin: https://linkedin.com/in/gobie-nanthakumar/
Instagram: https://www.instagram.com/gobienan

⏳ Timestamps
0:00 - Intro
0:30 - Design Fundamentals For Developers
2:40 - My Favorite Sites
5:55 - Encouragement and Takeaway

Transcription

This video transcription is generated by AI and may contain inaccuracies.

Hey, welcome back to the channel. Today I want to share the resources I use to get inspiration from for my SaaS products. Getting design inspiration is always a struggle, but over the years I have collected some amazing websites that have helped me to build clean, professional and user friendly websites. One thing that has really helped me to stay inspired and get creative is to know where to look for and for this video. I have actually put together a website where I have collected all the resources I am using to build my product and no, awards.com is not on that list and I will tell you why in a minute. Design isn't just about making things pretty, it's about functionality and the user experience. And I think there are three contributors which developers get wrong when they build a website. Fonts, colors and spacing let me give you an example. One of my current favorite fonts is geist by Versailles. It's clean, modern and extremely versatile. Perfect for tech websites. Guys can act as your main font for things like the body tags, menus and general information. It's easy on the eyes and keeps things clean. But when you want to highlight something important like a headline or a call to action, you can bring in thunder, for example, to make people look at it right away. This kind of pairing, simple and clean from geist and bold and chunky with keeps your design balance by guiding people to things you want them to see first. And when it comes to text on your website, you have to add spacing to it to give your site enough breathing room, avoiding a cluttered look. Designing without consideration for spacing is like trying to write a book with no paragraphs. It's just hard to read. I am not gonna dive into colors too deep in this video, but to give you a real life example, I have recently built a chart component with different colors. My primary focus was to make this component work first, so I used the brand colors for each bar. But as you can see it ended up looking like, well, I don't know, a kid's toy. But once the component was working I focused on the colors and you can see now clearly the difference. This updated version now looks like a proper product for the b two b sector. The impact color can have on your product is huge, but the topic color is also too big for this video and if you are interested in learning more about color, let me know in the comments. Alright lets talk about where I get my inspiration from. The web is full of amazing resources but these are my favorites. Lets start with dribble. Dribble is still one of my go to for design inspiration. It's well known out there, but they got amazing uis and web layouts and quite a lot of creativity in one place. I always browse dribble when I want to explore original creative concepts for web design. Yes, I know some are a bit over the top or not really usable for Zaz, but it still has a great collection of designs. And this is also the reason I don't like awards. The pages there look amazing. They are state of the art, they are pushing the boundaries, what's possible on the front end. But these pages also tend to load very slowly. You have to scroll quite a lot to understand what's going on. And all of that doesn't help when it comes to making a sale. Well, at least for SaaS products. And that's what I'm focusing on in this video. Alright, let's move on to the next one. Code drops code drops has been out for ages and it's one of the best resources for web design tutorials and inspiration. Codetrops not only shows you visually rich designs, but the code is actually open source so you can check out how it works in details. I know a lot of examples here are also a bit crazy, but you can also just pick a certain element of it and use it to give your site something special. And that's also what I did for resume photo. Aih, I have a section here where I wanted to show the selfie which is the before image, and the AI generated headshot which is the after image. And when you hover over the image you will see this transition from before and after. Let's move on to bento grids. Bento grids have become increasingly popular over the years. I'm not sure if Apple in invented them, but they definitely made them popular. And I'm also a huge fan of the layout. They are modular, flexible and allow to organize content into visually appealing titles. To be honest, I also struggled to come up with a nice looking design for bento grids. That's when I discovered the website. Well, also called Bento Grids and they feature. You can guess it, they have a ton of examples from from other products and websites and this actually helped me to come up with my own band to grid for resume photo alright, the last page I want to cover is uncoverlabs. This is a page I have stumbled upon recently. It has a ton of great designs for designers and developers, especially if you are working on SaaS websites and applications. They have a growing library of ready made templates for Figma for example. You can grab a hero section, pricing section or even a newsletter call section without having to design them from scratch. It's all there. Personally, I found these designs to be clean, modern and very sas focused, which makes it super easy to plug and play without overthinking. I have like 30 more resources on my webpage and I only wanted to pick the ones I am using on a daily basis. And if you are a developer and you struggle with design and trust me, you are not the only one, try to challenge yourself to build something you have seen on dribble or on ventricle. Use whatever tech stack you want, react view, it doesn't really matter and just try to copy what you see on the screen. By recreating those components you will improve your skills exponentially. Try to do this a couple of times and you will quickly realize that by doing so you will get a better understanding of the small but important details. That's also what I did when I started to learn design. I tried to replicate what I have seen on dribble or behance. So if you are struggling to get into development or design, I get it. You see a beautiful website out there and you think that's something I could never build. But trust me, you can. All the resources you need are out there and on top of that we have now something like chat GPT where you can ask questions and report the errors you have to improve your code. I'm using it all the time to bounce off ideas or to fix some issues I have with my code. I hope you liked the resources I have collected. If you did, please leave a like and subscribe to the channel. Keep designing, keep building and I will see you in the next one. Bye.