3 secret steps to Art Direction: designing websites that stand out

[@andriysmolyar3951]

This video is highly informative, even for experienced designers. It provides valuable insights and techniques that can be applied in professional work. The tips and tricks presented are particularly useful and have the potential to improve the quality of work produced. Overall, this video is an excellent resource for designers seeking to enhance their skills and stay up-to-date with the latest trends and best practices👍👍👍

[@hellobont]

Thanks for the kind words man! :D

[@WarrenJay-l2y]

This is gold! No other youtubers give this kind of information. Hope you continue giving us this kind of content.

[@hellobont]

Thanks! Will do!

[@vatsalaykhobragade]

Sir you finally made this video ! I am one of those people who asked for this video. Thank you so much.

[@hellobont]

Ahhh so glad you were able to see it then man!

[@exopksoo]

I was struggling with art direction for my brand, found this video. You explained the whole process so well. Highly appreciated

[@hellobont]

I'm so glad!

[@JanneWolterbeek]

Channels like these are very rare, or at least to me they are. So I subscribed immediately.

[@hellobont]

Thanks my friend, and welcome to my channel 🙌✨️

[@lg8159]

Me too!! There are too much basic level videos

[@eli.alcaraz]

This was amazing my friend.

[@hellobont]

Thanks dude 🫡✨️

[@Ruhayyim]

I'm really happy that you're back, your videos are mind-blowing!

[@hellobont]

Thanks Ruhayyim! I'm excited to be back ✨️

[@kayodedesign]

Welcome back Adrian. Always looking forward to more great videos like this.

[@hellobont]

Hey Samuel! Thanks, it's great to be back. DM me on Instagram, let's connect there!

[@kayodedesign]

@@hellobont Sure, I'll. Sorry just seeing this.

[@webstapl]

Awesome, you're back! 👍

[@hellobont]

Indeed my friend!

[@u-n-k]

Good to have you back my guy

[@hellobont]

Thanks a lot!

[@octahedron646]

Very helpful, that's basic graphic design 101, but with time I'm taking shortcuts, going lazy and doing what everyone is doing. Thanks for sharing your tips

[@hellobont]

It's foundational, agreed! I don't think it's basic, otherwise most designers would be applying this. I've only seen advanced designers really yield this process well. Glad you enjoyed the video!

[@Trainwhrek]

I was just thinking about this partly. The art form of (environmental story telling) that is used in game and movie enviorment to tell a story (with/without) words. This fully applies to a good website it tells a story and makes you feel like you are in a certain space if it is well done. Also classic and true advice. For inspiration go back to the beginning always!

[@hellobont]

Yes, exactly! It brings in visual narrative to the design.

[@lg8159]

Loved the part of the visual metafoor

[@danieldornyo3041]

So lucky i found this channel. Thank you for giving this high quality product for free.

[@hellobont]

Glad you found my channel so we can connect man. Thank you for applying to the WDMC, just sent you an email about that. Looking forward to chatting with you!

[@anthrat]

This is an absolutely fantastic video, thank you for sharing your secret wizard knowledge. UI/UX is always the most challenging part for me, I'm gonna start using this strategy in my front end work starting now. Immediate sub!

[@hellobont]

Glad you found it helpful Ryan, welcome!

[@YashwanthP]

Good to see you back and super helpful video. Thank you.

[@hellobont]

Thanks for the support man!

[@brianm3160]

A gold mine of a video!

[@hellobont]

🙏✨️

[@mylesmcpherson7152]

I've been searching far and wide for a video like this for so long. This really helps since I'm self taught!

[@hellobont]

So glad to hear Myles! Great to connect!

[@dailyselfadvancement]

A very insightful video, Brother. Thanks so much. A good reminder to NOT be trend-chasers, especially! 😊🙏

[@hellobont]

My pleasure!

[@TiffanyT-LaDolceVita]

I just found you and I am so happy! You are fantastic! 🙏🏽

[@hellobont]

Thanks Tiffany! Welcome aboard :)

[@TheGrreatDane]

Very insightful! Your channel will become big!

[@hellobont]

Thanks Jay! 🙏

[@daviddelvin8783]

Thank you for this! this is what i needed to see and I cant believe i found it on a free youtube video! your videos are amazing and inspiring

[@hellobont]

I'm so glad you found it valuable David. Welcome to the BONT community!

[@5214428]

I would love to see a video where “type” is included in the design “copy” the thing that explains a product or service is never included.

[@hellobont]

Sorry, didn't follow 🤔

[@daph_w]

Thank you so much for the insight! I’m wondering if the clients would ask you what’s the concept or the meanings behind the ideas? And normally how do you present it before showing them the overall look and feel?

[@hellobont]

You're very welcome! I explain the concept proactively, I don't wait for the client to ask me. Have a thought process behind your decisions helps anchor your decision in their business goals, and makes it less likely that they will argue about your decisions. I present this in a simple conversation sharing my screen, I'm not a fan of decks and presentations. Let me know if that answers your questions!

[@GG-rm6hd]

Your examples are following trends. Fancy preloader, parallax animation, transitions, scrolling effects, fullscreen video background, typography, tweens, ... its not because of some screws!

[@hellobont]

Thanks for sharing your point of view. I think everything you mentioned are not trends but rather well established design patterns. It's the way you execute those things, the narrative behind why you choose them, and how well can you weave them to communicate your client's unique edge that can really help you differentiate your projects from the crowd. But hey, I might be wrong!

[@faruambient]

Or the design follows technology. As a designer you have find the most appropriate solution for the project.

[@munteanutiberiu]

I just found your channel, I barely watched 30 seconds of the video and I'm already interested about your Web Design Master Class. Where do i get some info in about the price involved to participate on this course?

[@hellobont]

Hey man! Thanks a bunch. If you're interested on the Web Design Master Class you can apply via this form: forms.gle/mLHw4U22Vts3ve528. I'll then reach out to schedule a call with you and we can discuss the details there!

[@devilichus]

We should also look for the aimed user engagement and the interactions. UX to simplify, do you have the data of interacting users with your sites? Because web design also aims for people to touch the buttons we have placed, staying in the site longer and short loading time optimizations. As a visual creative myself too I can say this is only the art side. What about the real experience of users and the feedback?

[@ChrisCryptoCoffee]

I agree... If you make your site visitors hunt for menu and navigation items, you are shooting yourself in the foot. Amazing art and visual guide in in this video but it also needs to be balanced by UX

[@devilichus]

@@ChrisCryptoCoffee In our agency we also capturing the in site movements for real life numbers and the data about if the buttons really been clicked, users scrolled below or how long they stayed in the page or even wandered in the site more. Just for the QA work on the web sites we made.

[@hellobont]

Agreed 👍

[@catalinim4227]

Disecting pkmetal and just noticed you have multiple h1 elements on the landing page... great Scott!

[@ChrisCryptoCoffee]

Amazing video! Thank you for sharing your proccess with us, liked and subscribed already! I would only add to always balance aesthetics with UX. Don't make people think and search for important elements. Other than that, very valuable advice. Will definitely add this to my own process

[@hellobont]

Thanks Chris! I think those tips are important too, agreed. When you say "balance visuals and UX", to me it sounds like you think that those two things are separate. To me, everything I share in this or any of my design videos are UX tips too. I think we confine UX to site metrics, user research and those types of things, and we often forget that visuals, animations, interactions and storytelling (Art Direction) greatly influence how users experience our designs.

[@rogerio8710]

Cara, conheci seu canal agora e, definitivamente, não tinha visto tanta lucidez e serenidade pra falar sobre design. Aprendendo muito com seu conteúdo, muito obrigado.

[@hellobont]

You're very welcome my friend! Thanks for your kind words 🙌

[@jamesbryan240]

Thank you for sharing this Adrian. Your layouts and composition are amazing. I have trouble visualizing and getting started from a blank slate. Could you share a little bit about your process for going from a blank page to a rough composition? Do you have an idea in your mind of what the layout should be, or do you play around with the composition until you are happy with it? How do you decide what elements to even include in the composition? Visualization or picturing something in my mind seems to be what I struggle with the most.

[@hellobont]

Thanks James, I appreciate it! I talk a bit about your question in the video "9 advanced tips of layout & composition", and also I have a two part video series on my entire process for designing a landing page. Have you checked them out?

[@jamesbryan240]

@@hellobont I believe so, but let me give them another watch and key in on that aspect of it! Appreciate the reply!

[@Louisebova]

Thank you for being so generous. This was super helpful!

[@hellobont]

Thanks for your kind words Louise!

[@artfrody]

great information ! thanks for sharing!

[@hellobont]

You're welcome Marya!

[@SaltLake180]

I loved the screw idea.

[@HMalem]

Thank you for the great content. Your goldent cannon grid video was very useful to me, and I'm sure this one will be too ... Cheers

[@hellobont]

I hope so! Cheers :)

[@tulp_graphics]

If I could give this video a superlike, I would. :-) Amazing tips. Thank you!

[@hellobont]

Wow, thanks!

[@gauthier13]

Hi, I like your workflow ! Going from general to specific is very effective to get unique design and avoiding trends. Thank you for sharing

[@hellobont]

Exactly! You're very welcome my friend!

[@mondemarafane5486]

wow! this is stunning!!

[@hellobont]

Appreciate it man!

[@mondemarafane5486]

@@hellobont I really love the visual metaphors and how this detail makes a site unique! also like how you've positioned to the grid so it carries the alignment down the page

[@hellobont]

Yes! Good observation 👌 Glad you enjoy the video man 🙌✨️

[@riansetiawan648]

learn from Bont a lot!

[@hellobont]

Thanks Rian! Glad to hear that 🙌

[@akbarbadsha25]

great stuff. keep doing

[@hellobont]

Will do, thanks 🙏✨️

[@dismylive]

Hello, thank you for the work done, this video is very useful for me, thank you for sharing your knowledge and skills, success in your work.

[@hellobont]

Thanks a bunch! Glas you found this video helpful 🙌

[@armondtanz]

Bro u should start another channel and talk about 'how to set up lighting for detective/thriller short film". Great set up there ;)

[@hellobont]

Haha thanks!

[@meetsukani7224]

excellent one!!!! thank you for your secret recipe 🥰

[@hellobont]

Ohhh fo sho man! Glad to help :)

[@Jess.Larsen]

Awesome!

[@MrAbbo11]

I love it.

[@divyanshkumar5053]

Using ai tools for reference is also very helpful Like midjourney, stable diffusion

[@hellobont]

Agree it could be useful in some cases. Not always though, and specially not if you use the word "Dribbble" in your prompt 😅

[@owodunnitosin4291]

Thank you so much for making this video. What tools do you use in designing your websites? I would also like to know if you design them first with design software then hand off to the developer or you use some the low code software to design them. Thank you.

[@hellobont]

I use Figma to design and Principle to animate. 99% of the time, I just do the design and handoff to a developer. The only exception is my own site, and I used Readymag just because I don't want to pay a developer just yet, but eventually I will because the performance of the site didn't turn out to be so good as I expected.

[@owodunnitosin4291]

@@hellobont Thank you for the feedback.

[@hellobont]

You got it man!

[@hellobont]

Just sent you an email about your application to the Web Design Master Class. Looking forward to chatting with you!

[@owodunnitosin4291]

@@hellobont I'll check through my inbox to confirm, looking forward chatting with you too.

[@sanniametu6187]

Nice!

[@abhayhonparkhe.7440]

Now I understand your ""graphic universes ""

[@hellobont]

Awesome 🙌

[@manashkashyap7780]

Amazing content please update more art director videos

[@hellobont]

Will do 👊

[@nasimmahamud6304]

Hope you continue make video 🎉.. Great tutorial for us.. btw didn't find free class on that link..

[@nasimmahamud6304]

Okey got it from laptop.. thanks again ❤

[@hellobont]

I will continue, yes! Cheers man

[@learncode5110]

Awesome please bring a series on tuts and teach the creative web design with the process.

[@hellobont]

Sounds good!

[@learncode5110]

@@hellobont Yeah! that's the good idea best for public to learn

[@HassanAhmed-tl3mu]

Useful

[@pedrobarco]

Excelente parcero, de verdad que estos puntos que has tratado, son claves muchas veces olvidadas, quizás por la velocidad que imprime el cliente, pero necesarias para sacar un buen diseño. Gracias.

[@hellobont]

Un gusto Pedro!

[@michak1251]

Do you have any more resources like Pinterest when the topic of a project is not that popular as furniture but something way different hard to find on Pinterest or other inspiration sites. Like what's your approach then ;) Great video thanks, I immediately smashed the subscribe button

[@hellobont]

Yeah of course, you can always use Google, Instagram, Behance, any social media in general, depends on each project. But I use Pinterest for EVERY project I work on, even if I also use other places to find ideas. I just love Pinterest because of the gigantic pool of images it has, and the gigantic amount of users who feed that pool of images every day. Let me know if you have any other questions! Glad to connect with you 🫡

[@michak1251]

Looking forward to see more videos about art direction in web design🙌

[@AnastasiiaPominchuk]

Thank you so much, Adrian! Which design studios can you reccomend for inspiration too?🤩

[@hellobont]

Hey Anasteisha! You're welcome :) If you're looking for Web Design studios, I would search in Awwwards for example. Or you can search on Instagram one studio you like and then find in the related profiles too.

[@hellobont]

Personally I like quite a few like Immersive Garden, BASIC, Synchronized Studio, Studio Sentempo, to name a few.

[@AnastasiiaPominchuk]

@@hellobont Synchronized Studio is a Ukrainian studio, I adore them! Thank you, I will definitely take a look!😃

[@hellobont]

Ahhh nice to know, I had no idea. Right on!

[@arunsoma10]

just WOW!

[@hellobont]

Cheers 😊

[@seniorsebarundi5358]

Just the kind of content I needed right now. I can't believe it's free 👏

[@hellobont]

So glad to hear that man 👊✨️

[@snamitravel4200]

How can someone contact you about discussing a project?

[@hellobont]

Hey, thanks for your interest in working with me. I work full time at my business so I'm not taking on freelance projects. But if you want I can share your project with the BONT Club members and see if any of them is available. If you're interested, send me an email to info(at)bont.academy.

[@iccdesignteam9757]

Thank You

[@hellobont]

Welcome!

[@ziggerwebdesign1704]

Never heard of Dribble!

[@hellobont]

Now you know!

[@jontnoneya3404]

hmm....you mentioned putting 100 or so pinned sites in your pinterest but you never mentioned WHY so many. That seems like an excessive amount. Is there something about doing that that affects the algorithms or is there some benefit to having so many? Why not 10, 20, or even 50. What's so magic about 100? Seems quite excessive to me.

[@hellobont]

Good question! I didn't say 100 sites though haha you might want to rewatch the video. The reason for 100+ is because if you only have 10 references, you're going to end up copying too much from too few references. You want to create a good salad with ingredients from very different and unrelated refs. And also because in 10 refs is more difficult to spot patterns. By the 100th ref you will already know what are the visual patterns in your research.

[@yeaheiamahmudhridoy4590]

Secret Sauce ❤

[@hellobont]

media-cldnry.s-nbcnews.com/image/upload/t_fit-1500w,f_auto,q_auto:best/newscms/2017_05/1890591/170203-salt-bae-mn-1530.jpg

[@sm-rb7kj]

Exactly the type of content I was looking for, thank you. Unrelated question: I've noticed a lot of modern/award-winning sites have unique loading animations on page load - what's the reasoning for this? I've always wondered.

[@hellobont]

It helps manage the anxiety of users as they wait for the page to be properly loaded, and it also avoids things appearing randomly as they load. Lets you be more in control of the choreography of the elemnts, so that you can use animation to accentuate the hierarchies and the visual journey.

[@happyvillian]

Great content! My question would be what if you're approaching an industry with not so obvious visuals to create metaphors for? Say it's for finance and would try to avoid something generic?

[@hellobont]

Hey! That's a good question. In a nutshell, the more you know your client and make them good, deep questions, the more information you will have to come up with unique ideas. Every business is unique, you need to find out what's unique about your client, and then visualize it using the process I shared in this video.

[@denverrivera4968]

Tips on how to sit long lmao it's the reason why I can't be productive on my desk

[@osayieseosa]

🙄 yh il just go back in time thanks for the help

[@hellobont]

🤔

[@jonmichaelroberts]

Most of what I find on Pinterest are templates, not great real examples. Ugh.

[@hellobont]

Yeah, that's why we need to look for other mediums and not just UI/UX.

[@HelloThere-xs8ss]

This is ETCG in an alternate universe.

[@hellobont]

ETCG?

[@HelloThere-xs8ss]

@@hellobont eli the computer guy

[@ESkengman]

You're searching within your own pins

[@hellobont]

A bit, yeah.

[@ESkengman]

@@hellobont Great content though - love your videos!!

[@ganapathyaiyappa3327]

and bro ur thumbnail was soo difficult to read

[@hellobont]

Thanks for the feedback!

[@jcjensenllc]

Not a SECRET anymore.🤫

[@danielleceleste4791]

😂, American football players belong to teams-unlike football players everywhere else in the world who belong to clubs.

[@candilunio]

The title says "3 secret steps". And bravo! What a CLICKBAIT.

[@hellobont]

Did it work?