From idea to layout: How I approach designing a site
ฝัง
- เผยแพร่เมื่อ 20 ส.ค. 2024
- Eagle Homepage: en.eagle.cool/
Eagle Browser Extension: en.eagle.cool/...
A look at how I got from my idea, or concept, do my research, collect assets, and start designing the first draft of a layout using Figma. Hope you enjoy it :)
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowel...
---
Help support my channel
👨🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
I'm just starting webdev, this channel is a goldmine!
Same!
Don’t give up, I started 7 years ago
@@AA-MM how's it going now? 👀👀
@@OfficialUnderratedMusic pretty good
What videos would you recommend? Would truly appreciate it
Maaaaannnn! This guy deserves 10 millions subscribers. This is the best commercial I have ever seen for a product.
Sooooo True.
Finally I save hours of inspecting pages by simply using that tool 💚
I love your channel because at first when I started doing self-taught courses, I really didn't think about how my website looked on mobile. I had more of a web first approach. But after watching your videos and seeing how MUCH emphasis you put on making sure things don't break at smaller screens, I really got the scope of how important it is for websites to be dynamic. A large portion of people will visit your website on mobile because they're around 50% of your demographic.
A lot of designers will now follow a "mobile first" approach, because the amount of mobile devices that could access your website soooooo far outpace the desktops etc it's not even worth thinking about really. Sure, you should think about it, but yea..
I really needed this video, even after 3 years of web dev my design skills are my weakest aspect and my biggest block when starting a project. Your videos are definitely helping.
God, I couldn't relate to this any more! I've been coding for around 18 months and I'm yet to complete any of my own personal projects because I have no confidence when it comes to css and design.
@@MeAsMeButMe just keep at it, I am working as a full stack developer now, you can do it too
@@Smackindaface Oh wow that's amazing! Good job! How did you land your first job if you don't mind? And are you a self-taught developer? Thanks for the encouragement! ;D
Hippity hoppity, your workflow is now my property.
Love you kevin, thanks for all literally all of your videos :)
Oh no! Eagle does not support linux :(
(Crying inside)
"Eagle" was EXACTLY what I have been looking for for a long time!
Thanks!
Hi Kevin, thanks for this video. Is there a part 2 on this where you walk us through your process on converting the final design/layout to code? More power to you!!!
Yes! This, please
Eagle is kind of blowing my mind, not gonna lie! I have google drive folders for my design inspirations that I try to organize with subfolders and have to take the time to upload to after screen-capturing, and then deleting the image off the desktop. All that work, and zero of the functionality that Eagle has! Very excited to start using this, thank you!
I know the eagle thing was just an ad, but it’s also really useful, and seeing you use it really made it clear why. I’m trying to become a better front-end designer and your attention to detail and sense of what looks good and what doesn’t is really helping me improve! I’ll be starting a full stack portfolio project today and this video is everything I need 🥳🙌🏽✨
Like it before watching, Kevin does not disappoint
LOTS of great asset sources in this video, PLUS a quickie overview on how to use them. THANKS, Kevin!
The combo of your content and the YT algo reading my brain has been working great.
Designed a couple websites for friends who stream or drop ship, and was finding myself with spaghetti code and spending more time making it “respectable,” after it was built. I decided yesterday to take the overall idea and approach of designing it more seriously. When I did this for games like prison architect, I was able to build entire cities whereas before I could barely fill 4 plots. Using the same idea of making use of diligent planning, I believe this video will help me a lot and I look forward to rewatching it
thanks for this video and pointing me to Eagle. what a fantastic piece of software that is!
I-LO-VE-THE-VI-DEO!!! Great work KEvin, I love to see how you work in that design part where I'm normaly stuck. Really useful the tool Eagle. I have to try it. I hope there is a second part where you share the result or at least a more advanced design in this idea. Thanks million for your work!
I have been following this channel from last 4 months or so... and it helps me a lot...
Best decision eagle ever made...
5:52 Hi Kevin! :D You can set a destination folder for your screenshots. It goes on the desktop by default, but it does not have to :)
wow, I have learned a lot, that's how a design comes out, thank you Kevin for demonstrating this process !!!
Kevin this is fantastic! My go to for saving inspiring sites is bookmarks. Needless to say I eventually run into the problem of trying to remember what bookmark goes to what site (there's no visual representation of course), then I'm loading different links in a million tabs trying to find the right one and...it becomes a nightmare. So this is a game changer, thank you so much for sharing it with us!
Hi Kevin, this hit the spot well done. The only comment I would make is that the 'process' is very design orientated. I would like to see the creation process including the customer spec and a lot more on the 'structure' of the page to help potential sales. E.g. where to position call to actions, correct active wording, popup implications, optin forms, etc. To help the client gain more sales.
The look of the website is important, but as important is getting viewers to take action and of course, the SEO side of design. How to structure a page with the correct amount of H1, H2's etc. The SEO implications of bullet point lists versus paragraphs, how the formatting can affect the SEO readability for the layout, etc.
Perhaps some follow up videos...?
It's been a while but I appreciate this. I have been struggling a lot lately with coming up with a design for a personal website of mine.
Kevin, thank you for all you do to help me out with your great videos. Loved the vids on css and figma and all your topics. Now maybe I can help you just a bit! On one of your figma videos, you struggled zooming in and out with Ctrl + and Ctrl - . A real easy way is Ctrl + scroll wheel. Zooms in and out smoothly. The bonus for this shortcut is if you point at a spot on your Art Board, it will zoom in on that spot, perfect for aligning things perfectly. It's an old Adobe thing. Try it in Illustrator and Photoshop.
You've probably already figured it out, but what a time saver.
Again thanks for all you do. Getting better all the time.
Thanks for this great example of getting started with design/initial ideas! Very clear and helpful for implementing easily!
This channel is incredible
Thanks Kevin for this. Goes a long way
Half way through the vid. Loving it so far.
Big respect, Kevin. This channel has helped me a lot...
yeha i love it! i have to try it. Thanks!!! Gracias!!!
Not even 3 minutes in and you already show me something useful (Dribble). Ill need a second brain at this rate to fit all the information you're giving me lol
Guy is brilliant, makes it simple, which for me. Sold
This is good stuff. Very practical. Basically my whole life as a designer.
I enjoy watching your videos. You are explaining in a very great method. Thanks.
Love the process videos. I also liked the shortcuts for Figma. Super.
I might do a Figma shortcuts video at one point, there are some more obscure but really useful ones :D
@@KevinPowell That would be great. Still learning.
Thank you so so much for this! Watching someone else’s workflow is both educational and affirming. This was very helpful! Much appreciate d
Thanks! Learned a ton again
That’s a nice solution for creating mood boards
I though you needed first the content you need to include first, but it's not. Great to see how a pro works. Please, make more videos like this, real life videos.
Kudos, Kevin, for spelling colour correctly.
Another Homerun from KP! Thank you!
Glad you enjoyed it!
Love your videos - huge fan!
Thanks Kevin, this was/is an absolute gold mine.
nice and simple design!
Thanks :)
This video was insanely amazing. Thank you Kevin:)
Thanks a lot. I've learned lots of CSS from you.
Glad to hear that :D
Your a very good teacher, thank you Kevin!
Man, I was waiting the entire video to see if he'd capitalise the words 😅 That aside, I love your channel!
Awesome, thanks for sharing Kev, I'd say this is one of your very best.
Really liked the video! And a big thanks for the Eagle tool, it's awesome :D
Awesome tutorial. I'm inspired by each n every video of yours. Thanks a lot Kevin🙏
Can you do a video on the do’s and don’ts of layout grids? As a designer I have a difficult time figuring out what the rules are when I’m laying things out in for example a 12-column grid, and how the engineer on the team will be building it out. For example, can we ever create an element that doesn’t perfectly fit between columns, i.e. can I have something which is, lets say, 3.5 column wide?
I like how in your look for assets, the usage rights check is not forgotten. But, I think your message could be stronger in this area, about how your inspiration items (from the general web) are different from your assets (licensed, attributed, public domain, etc.). You might even consider a tutorial on attribution where you put the attribution either on page, in tool tip, on a separate attribution page (or whatever the creator requires).
Usage rights are mandatory to anyone who even claims to dabble in desing. It should never be a point for any explanation.
@@krzysztof6591 I was thinking more for those who are entering the field--despite all the publicity surrounding rights issues, some people never learn. But yeah, I get your point.
Hi Kevin, i subscribed to your channel and watched many of your videos and i learned a lot how you make codings become manageable, which i'm really grateful for! And too i love this video on how you approach design.. very applicable! As for the next video, would you consider showing us how you convert your so-far design to codes, especially by applying the grid system for the layout without using bootstrap? Right now, i still cant imagine how to calculate the width for each column in the codes when it doesn't take the entire viewport and reflect the calculation in the codes to get desired positioning.. Thanks in advance!!
Plz do more Figma tutorials!❤️
@Kevin Powell: On a Mac…Please press Command + Shift + 5. Click on Options. Now either pick a folder that you recently used, or choose any other location on your machine.
Maybe it's because we have a small team, but we rarely draw things out before we start the project. Most of the front-end work is just throw components into a framework. It's more about efficiency than anything. I wish I had time to sit down, relax, and do some "artwork". unfortunately, most of us don't have the luxury.
I'm there with yea. I've primary worked with small teams and deadlines, not that it's not good advice but sometimes it's just not doable depending on the context and your environment.
Love your work! I'm definitely a fan!
Thats some really cool app! Will definitely use it on my next project! Thanks
Absolutely fantastic video. Thanks!!
As I was watching I got an ad about a website that used one of the images you used here. haha what a coincidence
This is fcking awesome holy moly !
Glad you enjoyed it!
Coding has been my favorite thing to do - but an approach to design has always been the hardest thing for me - I appreciate videos like this - as it helps to structure a project - thank you for a great video!
LIKE
Thank you for sharing all this cool tools!!
Excellent. Kevin, can you also share some of your 'design' ideology? Especially for the CSS people, how to learn some of the basics of design, color theory and other important things?
It's in the plans :)
@@KevinPowell Fantastic! and also, regarding your latest Demistified email, do you think we can do most of the things you show here, in Notion? I see some of the things are quite neat, but from your perspective, can we get by with Notion instead? Notion does save the actual page, so if the content change we are lost!
loved you on web dev simplified :) was much fun
More videos like this please 🙏🏻🤞
Thank you Kevin
You deserve way way way waaaaaay more subscribers than what your channel has now.
Great stuff. Thanks Kevin.
I've just subscribed to the channel and the tutorials are very helpful.
Hey Kevin! I meant to like and comment with my personal account but here i am on my alternative account. I just want to thank you for this. I think if there is anything else you do when approaching design would be great for a future video.
Fantastic content, thanks!
On Windows 10: start + shift + s is pretty good for collecting inspiration.
but then you have to paste it somewhere
You can actually set up FF devtools to automatically save also, I believe it even has a hotkey
Would be nice if they had a last folder used when dragging images so you don't have to go through 3 different clicks to get to your folder that you want/need
Loving this channel, I just find the topics and your delivery exciting. Eagle is quite a nifty tool.
Question about Figma. Do you name the objects and components you place in your frame, or you just settle for the auto generated names?
I am interested in knowing how you organize them before proceeding to development.
It's Eagle right?
Great solution
Thanks
Thank you!
I want to learn more about this from you :)
loved it sir.
Pls make more videos like this
Bonjour Kévin, un super tutoriel comme toujours, je suis moi même préparateur physique et nutritionniste et je suis en train de faire mon site, cette vidéo tombe donc plutôt très bien !!! 😂
Je me suis inscrit sur la liste pour le cours CSS, il me tarde..
This is going to save so much time as I practice my skills, thank you so much for making things efficient!
Windows (10?) has "windows+shift+s" for area capture fyi.
Your keyboard click noises are so pleasing.
Which keyboard is that?
nice shirt too :D tnx for all !
Hey Kevin, could you make a video on the best chrome extensions for webdev. Thank you!
thank you sir ^_^
very useful video, thank you
I love your tutorial.
Thanks, glad you enjoyed it!
@@KevinPowell I think you are the good teacher. You are the best for me.
really nice tool :) thanks
Great video Loved it.
Sounds like Evernote features I use for years now
Hey Kevin.
I've tried signing up to your conquering responsive layouts course twice now. I never get the login details.
I've checked that it's not going into spam so I'm not sure what's going on.
Has anyone else had this issue?
So you export images to your computer from Eagle, but certain images first have to be imported from your computer. Moreover, since computers remember where you last saved a file to make saving multiple connected files quick, are the decent sorting and colour tools of Eagle worth the cost and potential security risks of the extension?
God bless you 😇!!
Is there any alternative of eagle for linux ?
gold
Perks of being a webdev--" you know you really like that website, that you can steal it'. 😂
Thank you ❤️❤️❤️