Web Design Case Study - Real Client Project

In the second very special video I'm going to take you behind the scenes and show you how our agency works on a real, client project. We have years of experience and hundreds of UX/UI designs under our belt, so it's only natural that we share some of those real experiences with you here.
We will talk about our ux design process, how we approach a a new webdesign from just an email with all the copy the client wants on the page, how to structure the copy and how to handle UI animations and transitions.
You can check out the live version of the site at:
www.kupfundusz.pl/landing/fun...
If you want to design and code a brand new, beautiful landing page, you can also check our website at hype4.com to see some more examples of our work and get a quote.
#ux #webdesign #ui
00:00 - Intro
00:30 - KupFundusz
00:44 - Email brief
02:35 - Multiple headers
03:16 - Animation
03:57 - Don't overdo it!
04:13 - Apply Breakdown
04:47 - Wow effect?
05:20 - CTA's
05:40 - Developing animations
06:02 - Key to success
==COOL INFO HERE 👇 =======================================
🎬 GET MY UI COURSES:
gum.co/uicourse
gum.co/uicourse2
gum.co/uipresentation
gum.co/uicasestudy
MY BOOKS:
📘 Designing User Interfaces - over 500 pages all about design, likely the biggest source of UI knowledge in the world: designingui.com
📘 No Bull**** guide to UX - upcoming book that demystifies user experience: gum.co/guidetoux
🦄 Frontend Unicorn - How to learn faster, earn more and grow as a front-end developer: frontendunicorn.com
MY FREE UX COURSE:
👨🏻‍💻 Become a designer: • Becoming a designer
BE MY FRIEND:
💌 Sign up to our newsletter - hype4.academy
🌍 My website - michalmalewicz.com​
📸 Instagram - / hype4academy​
✍️ My Medium Blog - / michalmalewicz
🐦 Twitter - / michalmalewicz
⁉️ You can ask me questions on Twitter, just @ me or DM :-)
ABOUT ME:
👨🏻‍💻 I'm a designer, entrepreneur and startup founder. I started back in the late 90's and currently my main goal is to share my knowledge, both paid and free. This channel is one of the places where I share my tips on design, user experience, growth, marketing, life and mindfulness. Subscribe to stay in touch. ❤️
=========================================================

[@emrahaliyev3876]

This video never gets old like your other videos. If one day I move to Poland, I'll find you wherever else you are and be your friend

[@MalewiczHype]

I’m not living there as much anymore but thanks ;)

[@njengathegeek]

Your ease of explanation makes me to keep coming back for more, thanks fellow designer

[@MalewiczHype]

Great to hear!

[@cosminrus6571]

No one is talking about the font, great choice!

[@wrdj3094]

Love to see real world examples. Thank you for the video!

[@MalewiczHype]

Thank you. More general design or more animation?

[@rovelynabarico1042]

This is very informative..hope more of real project!!newbie in UX/UI here..thanks!

[@akoskm]

Fantastic video Michal! 👏 Now I'm hyped to watch the one about your UX/UI process. 😄

[@MalewiczHype]

Thanks! I’m in the process of convincing more clients to let us - we have a lot of projects under our belts 😎

[@natalie-taylor]

👏 so good. I love the subtle animations, it's one of my fav design elements you all use. Thanks again.

[@MalewiczHype]

that’s the best way to animate, almost invisible movement that highlights the content - that’s why I love our dev team - they are often creatively interpreting my ideas and the result is amazing 🤩

[@tekiero]

just checked that website. Very good responsive on different resolutions

[@thearaav6670]

Love your explanation of the working process behind the scene.

[@MalewiczHype]

Happy to hear it works :) I plan to do more of these :)

[@JJocy100]

I’m sorry excited to see these videos. I remember watching your videos back in June, wondering if I should go into UX design or not, given I had no experience in tech. Now I’m in a UX design apprenticeship 💜.

[@MalewiczHype]

Oh wow congrats! How are you finding it? Learning a lot?

[@JJocy100]

@@MalewiczHype thank you! Yes we have been learning a lot about design. The first 2 months were focused on learning Figma. Right now we are trying to learn more about how to talk to clients. We have been enjoying your videos. 🥳

[@MalewiczHype]

Awesome, keep going, success is closer than you think :)

[@KunalSankheEdits]

I really loved the concept of real-life projects process. Also I loved the visual hierarchy of the landing page

[@MalewiczHype]

Thank you. Definitely more to come :-)

[@loganselk9183]

Lots of good stuff here!! Keep them coming :)

[@ChrisD0117]

Love these videos, It provides great insight on how an actual project gets started, especially for me since I haven't really got any clients and have just been doing case studies, and am looking for work. Great stuff, keep it coming.

[@MalewiczHype]

Are you going freelance? That’s a cool path to take! 💪

[@ChrisD0117]

@@MalewiczHype Trying for both! I would rather go into a company for a junior or internship role just to get the experience and the structure rather than trying to do case studies all the time. I'm trying to look into if I can maybe volunteer some way for that experience as well. Hard to get a call back with no experience. tho 😅

[@MalewiczHype]

Sometimes interning / doing free design work for some charity can be a good way to jumpstart a career too. Keep going, you’ll do fine, it’s all about patiently taking little steps towards a goal 🙃

[@ChrisD0117]

@@MalewiczHype Yeah i've been looking been a little hard to find as well, but it wont stop me from trying! Thanks for the insight will keep my head up and work towards that goal.

[@Phoenix-Light]

Thank you! 😁

[@madhumia1196]

Amazing explanation

[@the-secrettutorials]

More web specific tutorials please 🤩

[@SkArifHossain]

Great video, thanks Michal :)

[@MalewiczHype]

Thanks! I’m planning one with a mobile app next 😊

[@uxdworld]

Thank you for sharing, Loving it ❤️

[@MalewiczHype]

So glad! There's definitely more to come! :-)

[@yahiaelidrissi7214]

This is my favorite type of videos, keep it up 🥰

[@MalewiczHype]

That’s the plan. What did you like the most here?

[@mikecooke4974]

Looking forward to this one!

[@MalewiczHype]

Can't wait!

[@mikecooke4974]

@@MalewiczHype Great stuff, mate!

[@tibuigerard1564]

Why am I not subscribed to this guy! wow! amazing content!

[@MalewiczHype]

Welcome!

[@denysoftcreative9476]

Wow .. excellent video .. I have learned more with this short videos, that from many other expensive courses that I have bought before. Please don't stop recording this videos of real experiences and wise and good tips. It doesn't matter is you post 100s of this videos, never enough, and I guarantee that we will watching it every time, thank you and have a good one.

[@MalewiczHype]

Thank you for the support :) Which part should I focus more on? General design or maybe animation?

[@denysoftcreative9476]

@@MalewiczHype I think both, but from my personal perspective, I want to learn first more about general design (tips, workflows, tools, customer interactions, etc.), and when I feel more confident, then I would like to give more emphasis to the animation part. When you are a freelancer you lost the point of view and the experience from the agencies or the ui/ux professional market. What you are doing is just great.

[@MalewiczHype]

Awesome to hear! I will be talking about customer interaction this year as it’s important for a successful project 🙌

[@denysoftcreative9476]

@@MalewiczHype Good, I like it 👍

[@ArtemKobyakov]

wow. great advises

[@fahimekan]

Thanks for sharing this kind of videos 🖤

[@MalewiczHype]

You're so welcome! Already working on the next one :-)

[@pearlbabbar7981]

Make this a series. Share your client projects more often

[@MalewiczHype]

It is a series and already working on another one :)

[@just.a.random.comment]

Need more of behind the scenes videos. pls make more

[@MalewiczHype]

Yes! :)

[@hervmusic]

We need more content like this! Thank you :)

[@MalewiczHype]

What kind of project should I do next? App? Website? 🧐

[@hervmusic]

@@MalewiczHype An app would be awesome 🔥

[@MalewiczHype]

I’m talking to a client about one :)

[@itsthesa]

Thanks! I really Learned some super helpful tips!

[@MalewiczHype]

great! Which tip was your favorite?

[@itsthesa]

@@MalewiczHype The page section and Animation part was very helpful.

[@SzabatDesign]

Great job, Michał! I would like to see the whole process from the beginning of creating such a page :) For example User flow and User tasks. 💪☺

[@MalewiczHype]

I may do something like that on its own, as a dedicated project, as our clients will not allow us to show totally everything ;-) but they like when I share just enough 😎

[@SzabatDesign]

@@MalewiczHype Well, if you could devote a whole video to User flow and user tasks before designing the website, I would be happy! :D

[@SzabatDesign]

@@MalewiczHype Or prepare some "to do list" for website creation and show off your magically guarded A-to-Z top secret page creation process 😅 Grain wages!

[@HiddenExp]

@@SzabatDesign That would be awesome!

[@SzabatDesign]

@@HiddenExp I know 😅🙈

[@PetersonJoseph]

Absolutely love these!

[@MalewiczHype]

Thank you! Already working on the next one :)

[@mohammedshamil3976]

wow super cool tutorial🔥

[@MalewiczHype]

Glad you liked it 😎

[@prashantgotad3739]

You are amazing🙌

[@MalewiczHype]

you are! 😊

[@abdulwahab2179]

Love to see this content again :)

[@MalewiczHype]

Which part was your favorite?

[@abdulwahab2179]

@@MalewiczHype I really love how you explain the heavy animation part and the animation on 2nd card section, overall page is perfect I really love the design, would love to see other pages all, I think you guys are redesigning the whole website?

[@markoaleksic1417]

Hey Michal! Loving your videos and after just passively watching for a couple of weeks, I finally decided to jump in the UX design industry myself. Bought your UI book, Google UX course, made a Figma account and got Adobe XD, as Im living off of my savings since losing a job 7 months ago, Id like to be very efficient in learning UX and getting a job in the field sooner than later, so what would you recommend my learning journey look like in order to become a good UX designer in a most efficient way? Should I do the Google course first, maybe follow your book first instead, or get through a course for Figma and Adobe XD as a start? Appreciate everything you do, and best of luck for you and your team in your future endeavors! :)

[@MalewiczHype]

Well in that case definitely reach out to me on Twitter (DM) - I'm happy to give you some pointers every now and then. I think you can start with the foundations part of the google course, then finish parts 2-3-4 and after that you may want to start practicing Figma, I have a lot of tutorials on this channel, including a complete figma basics video as well :)

[@IStMl]

Tbf you don't need a full-fledged paid course for Figma or XD. Plenty of tutorials and forums out there, just practice and experiment

[@NikhilSingh-ez1mq]

Finally 😍

[@MalewiczHype]

What did you find the most useful?

[@akhu3034]

Wow amazing again, I viewed it on a tiny 4in smart phone and still looks great - by default my browser blocks script it was still a useable site without the middle animation and parralex - I guess in Poland there's no requirement to have those annoying pop up of accepting cookies (?) they are so annoying and can spoil a page So I'm guessing website builder automatically cater codes for desktops or mobile screens, or are they individual projects themselves?

[@MalewiczHype]

Our team at hype4.com coded the website and they did it to work well on the typical responsive breakpoints :)

[@Mania26]

Super wytłumaczone

[@MalewiczHype]

🙂

[@CreativeTutorialsWeb]

You're awesome this is beautiful 💙

[@MalewiczHype]

Great to hear! 🤩

[@CreativeTutorialsWeb]

@@MalewiczHype Awn 😊

[@hx.blakeney]

Hi Michal, thank you for creating such brilliant content. What software do you use to design websites?

[@MalewiczHype]

Cheers! Happy you like it. 99% of the time we use Sketch.

[@Arjund207]

What tools are used for animations and getting parallax effects in our prototypes?

[@khurramarain31]

learn a lot...we need more vedios like this....... Plz Malewicz upload more with time.

[@MalewiczHype]

That’s the plan, talking to more clients to get permission :-) Which part did you loke the most?

[@khurramarain31]

@@MalewiczHype Thanks bro. I like the whole video, the way you explain your thought process is amazing... This is super helpful content and you are giving it free to us. That's Amazing...

[@MalewiczHype]

That’s my plan - to help people level-up faster, for a better world :-)

[@dwojczuk1]

Yey! 😊

[@MalewiczHype]

Yey indeed, hope you liked it? 😉

[@gamerbee8164]

Hello, I hope Your doing good I m very happy to find your channel your tips are very helpful for designers and I want to ask one question recently I started to learn protopie for UI animation I am a window user So can you please recommend some good tools for UI animation and also what do you use for UI animation (sorry for broken english)

[@MalewiczHype]

Hi! I'm on a mac, but generally you can do some animations in Jitter, ProtoPie and InVision Studio - they all work in a similar way.

[@r3dp1ll]

Thank you ! Can I ask you what software you use to create the animations and also the one to convert design to code. Thanks again

[@MalewiczHype]

Hey, for animations I mostly use InVision Studio (it's free) and an app called "Hype" by Tumultco for HTML5 ones. As for converting design to code, I don't "convert" it myself, we have developers who code those designs :)

[@r3dp1ll]

@@MalewiczHype Thanks. Yeah I should have put " " around convert. I imagine it's not magical. So it's mostly hand-coded using the CSS code generated by Sketch ?

[@rakizahmed3389]

👏 so good.

[@MalewiczHype]

Did you like the animation part?

[@rakizahmed3389]

Definitely but I like your main theme

[@princeojay4860]

Amazing thank you for this. Would love to know where you get your clay morph illustrations. Do you design them yourselves

[@MalewiczHype]

Some we buy from Icons8, some we do ourselves. Depends on the use-case and client budget. If there's budget we always do stuff ourselves.

[@princeojay4860]

@@MalewiczHype Thank you so much

[@trustedcanvas]

wow! great... I WANT TO MORE VIDEO LIKE THIS!! I AM REGULAR VIEWER... Best wishes for you!

[@MalewiczHype]

Thanks! It takes a while to convince a client to allow it but I’m already working on the next one :-)

[@trustedcanvas]

@@MalewiczHype 😲❤️❤️🥰 I am glad to hear that 🙃🤗

[@razmiddle9410]

Interesting that you based the layout around the desired landing page text

[@MalewiczHype]

That works when the client understands how we work and provides really good copy :)

[@shahrukhghafoor2120]

Create more videos like this please

[@MalewiczHype]

There are a couple more on the channel already :)

[@magdasokolovic]

I am curious what animation library your developers use? Is it GSAP?

[@MalewiczHype]

Pure CSS and AOS library (that's what they just told me) :-)

[@kennettajackson767]

Nice video! Should make a course on web design

[@MalewiczHype]

We are actually planning one :-)

[@kennettajackson767]

@@MalewiczHype yay! Can’t wait to buy the course really want to get into web design/freelance . Do you know an estimate time frame it will be released? Hopefully soon. Will you go over the whole process from design, wireframes, sitemaps etc?

[@MalewiczHype]

We should have it complete in April. It will be a whole process but in an agile version.

[@andrewthomas3947]

Please Continue this series until the youtube is die.

[@MalewiczHype]

Haha thank you!

[@rizkyfirmansyah7]

Lessgooo

[@MalewiczHype]

How was it? 😎

[@andreas_blomqvist]

Where do you find your 3D icons from? Thanks for the video!

[@MalewiczHype]

These are from our friends at icons8

[@andreas_blomqvist]

@@MalewiczHype thanks mate! :)

[@taqdeesmueed7432]

Which software do you use to create the animations?

[@MalewiczHype]

invision studio

[@DhirajKyawal]

Hey Michal! Can you do one such video on SaaS software UIs? Everyone is focussing on landing page designs only, hard to find any good software UI videos!

[@MalewiczHype]

I have a mobile app planned as the next video, but after that I may request a SaaS from one of our clients (I need permission for each one of those videos)

[@DhirajKyawal]

@@MalewiczHype Yes please! That would be super helpful for many!

[@ashnafmahfooz8975]

Sir can You make a detailed guide video on how to take a project without any experience and how to go about about around that project step by step from the starting to end for designing our UX UI portfolio. Thank You for reading Sir! 😊

[@MalewiczHype]

I kind of made a course on that already :)

[@ckevin6201]

Hi, I have watched bunch of your videos, I get the feeling I can learn ui design from your online course and I'm going to purchase your course but i have questions to ask. I'm new to UX/UI design but I'm more of UI fans as I'm studying and practicing grahpic design skills now, I want to know if there was any alternative UX course to google UX course or solid courses on UX fundamantels i can take for free or lower price, I can't afford the google course especially when it takes months on completing the course, I trust you can get the UI covered but the UX is what I want to find now or will there be your UX course any soon? And can you please tell me is it ok to just focus on UI design when starting out because I kind of get stucked between graphic desgin and UX/UI design, I dont want to entirely switch my focus to UX/UI designer yet (as I still haven't understand what UX designer actually does on work routine, UX/UI interrelationships, and what are possible interactive job content between graphic design and UX/UI design. Btw, I'm self taught and changing career into these whole digital design world, that's why I have so much to ask. Sorry for the long text.

[@MalewiczHype]

You can take the first segment of the google course (ux foundations) for free to see an overview :) I’m releasing a guide to UX ebook in late March (preorders are already open) but it won’t have exercises, just easy to digest knowledge pf what is used how. But you can just be a UI designer, no need to go the full ux path if you don’t feel like it - UI designers are also paid very well in this industry.

[@ckevin6201]

@@MalewiczHype Thanks a lot for replying, yeah hearing I can just be UI designer from you is reassuring. Definitely gonna buy UX book too Btw, will there be discounts offer in future for UI mobile app course :D

[@MalewiczHype]

There will be a bundle offer next week, about $10 cheaper when purchased together vs individually.

[@teooooooooo27]

I have a question, maybe its a dumb one. In Figma, after you design something, how can you transport your work to different platforms, for example Behance. I saw there some full projects, with almost every step they did for that project to be alive today. In this case, you have showed us the whole image of the website. How can I do that? When I am doing something on Figma I need to choose for a frame, tablet/phone/desktop. My question is how can I create something so large? How do you actually go scrolling. I am really confused and maybe I didnt use the right words for what I am trying to understand, but I am very newbie at everything. Sorry for the misunderstanding in advance.

[@MalewiczHype]

The website is coded, so it’s a bigger canvas. But in Figma you can also extend the height of the frame - it can be any size 🙂

[@khurramarain31]

Waiting.......................

[@MalewiczHype]

Soon :)

[@danpodkovko8596]

Looks neat! But how this page performs?

[@MalewiczHype]

It just launched, we’re measuring a lot of things and making tweaks as small a/b tests.

[@OneBrighDay]

Is it safe to assume your landing page course is going to cover this in detail?

[@MalewiczHype]

My landing page course covers more different landing page concepts and approaches (and website sections) than this website has. So it does cover this in detail AND a lot more :)

[@Sponsi_PL]

I am glad we have the same process, which is well... pretty standard for such pages ;) Some questions: 1. Did you work on the full copy yourselves? Did the client know it is part of the project and did they accept the result just like that? 2. Isn't it too colorful, with all those icons? It might lose the feeling of brand identity in action? 3. Isn't it too much to have two sections of tiles one after another? Even if the second one is more woowish? I myself tend to feel those tiles enumerating some facts about the service or product lack tiertary CTAs leading to more info... But I guess the client didn't want to overgrow the page with content? BTW Wonder what the blog looks like... got to check the site.

[@MalewiczHype]

1. client did all the copy 2. we used a lot of whitespace to balance it out 3. They’re having an element between them for a visual break so it’s ok :)

[@Sponsi_PL]

@@MalewiczHype 1. So, in fact, this short email wasn't the only thing you got. At what point and how did you manage to ping back for complete copy? Before you showed anything hifi, I guess? At the analysis stage where you divided parts? Did you show any lo-fis with placeholders for copy and just showed the need for full copy at early stage? Why I'm asking is because getting actual content is painful. Another one: could you share what changes did client want in design and how you tackled them? Or when you are saying about trust, they just agreed with everything, every stage?

[@MalewiczHype]

No no, we got all of the copy right away. I only showed a part of the email in the video so the font would be big enough to see :) As for the changes in this case after we presented the hifi there was no feedback to the design but they did slightly modify the copy to match the visual.

[@pavelm.752]

it seems to me that the text on the main button has moved out) is this done on purpose?)

[@MalewiczHype]

Thanks for catching that! It was an export issue, font got a larger line-height style for some reason and I completely missed that. It's fixed and of course in the actual project it was already good. My mistake in editing ;)

[@sawancenarock]

How will it look in mobile devices? I think mobile version is very important

[@MalewiczHype]

I didn’t cover the responsive design part in the video but of course we did it too. I linked the live website in the description so you can check it out :)

[@karimvenom6459]

And how did you code it and made it a website?

[@MalewiczHype]

We have developers at hype4.com - they coded it :)

[@mdkaiumislam7976]

Hi, i really want to be a UI/UX designer. How i start this path please guide me?

[@MalewiczHype]

I have a playlist called “becoming a designer” :)

[@user-jq4kn7wc4t]

Hi...am interested in learning uiux design how do I start

[@MalewiczHype]

Check the pinned video on the channel page.

[@gamerbee8164]

5 minutes remaining

[@MalewiczHype]

How did you like it?

[@gamerbee8164]

@@MalewiczHype i love this series

[@gamerbee8164]

@@MalewiczHype can you please also make an episode of Dashboard design? or a dashboard design tips

[@SteveFox369]

What is wrong why can't i post a freaking comment?!?!

[@MalewiczHype]

Sometimes youtube blocks comments with what looks like links, but I don’t remove anything myself 🤷‍♂️

[@SteveFox369]

@@MalewiczHype Thank you for responding. But it's so frustrating that i can't post a normal comment, i tried it like 10 times already it's so weird. But ill try it again in different way: Can u please briefly look into one course that i bought* (i can't name it apparently) and tell us is it worth buying it? How it compares to Google UX course, since they are similar in pricing. I just bought it and i'm already doubting my decision, i don't know anybody that i can ask, and that i can trust.

[@MalewiczHype]

If the course name is being blocked see if it doesn’t look like a web url so no dots between words :)

[@SteveFox369]

@@MalewiczHype Ok, let me try again xD It's a course from DesignerUp, called Product Design

[@SteveFox369]

@@MalewiczHype (UX/UI)