# POV: I just designed, built & launched a REAL website (FULL BREAKDOWN) ## Метаданные - **Канал:** Mizko - **YouTube:** https://www.youtube.com/watch?v=kr-Ba37a1s0 - **Дата:** 03.09.2024 - **Длительность:** 11:39 - **Просмотры:** 16,066 - **Источник:** https://ekstraktznaniy.ru/video/17778 ## Описание ⚡️ Join my monthly newsletter for exclusive goodies: https://mizko.net/newsletter --- In this video I walk you through the exact process we went through to strategising, designing and launching a website from scratch. https://shipfasterui.com ⚡️ It's now live! Get 10% OFF - SHIPTUBE10 00:00 - Context to the project 00:43 - Defining the project strategy 01:24 - Optimising for first impressions 04:24 - Optimising for conversions 08:20 - Design handover process 10:36 - Building the website --- Become a highly-demanded Product (UX/UI) designer with me: Learn My Real-world End-to-end UX/UI Design Process (NEW! 200+ students) 👉 https://www.thedesignership.com/courses/ux-ui-design-course Master Figma with my Ultimate Figma Design Masterclass (7,200+ students) 👉 https://thedesignership.com/courses/the-ultimate-figma-masterclass Practical UX Research & Strategy Masterclass (700+ students) 👉 https://thedesignership.com/courses/practical-user-research-strategy-course Shipfaster UI - ## Транскрипт ### Context to the project [] over the last few weeks my team and I launched an entirely new website so in this video I want to share with you the entire process and to end of how we did this now we're going to cover three things first how we even came up with all the ideas for the web design second what was the actual design process within my team and third finally peeling back the curtains on how we actually built it so let's dive ### Defining the project strategy [0:43] in now when it came to this strategy I think the most important thing we wanted to optimize for were First Impressions and then conversions to be honest I'm not a big fan of web designers that encourage wishy washy overly animated and obnoxious designs don't get me wrong they are very cool designs but I think a website needs to be more than just that in my opinion it needs to be a tool that actually helps you get customers so the first goal was to capture the visitor's attention within just the first few seconds let's go ahead and dive into the figma file and let me show you some of ### Optimising for first impressions [1:24] those initial ideas and the process of how we decided on the final one so here we are in the original ship faster UI website design file a little trick here we actually used our own kit which is ship faster UI to design the entire website for ship faster itself so as you can see the file actually has all the components that we've built and designed for ourselves and we've used it to design the website so let's go ahead and take a look at The Archives and I want to share with you a bit of the process so our designer Shania put together or utilize some of our components to really just quickly put together a wi frame of what the structure of our site could look like as you can see just like that but the main thing here that I want to focus on is the first impressions I wanted us to really push the boundaries so we can capture someone's interest so we can hold it for long enough to hopefully get them interested into buying so if I scroll further down there is an initial concept that we did create and it looks like this now it looks okay it's balanced it's beautiful it's got some cool UI but once again I didn't feel like it was enough to really make people interested and to capture and retain their attention so I wanted to build a little bit more interactivity and get visitors to thinking oh wow they've actually put some effort and time into this and it's pretty cool so beyond just having some cool graphics we actually took a Direction Where We created three different concepts I created the original concept just to really push our design and our team to think Beyond just static graphics and actually have an interactive side menu and then that led to some different ideas of maybe showcasing some of our web template components and allowing the visitor to toggle between different colors and styles and see what it could look like with a live preview over here and here's another one where the visitor could interact with different component properties and see them reflect over here as you can see on our live site we ended up going with the figma UI to make it feel familiar to the user and also create a little bit of interactivity on the sides just something fun and a little bit of an Easter egg so the reason why we've decided to go with this one is really because if we go back into figma I felt like these Concepts were a little bit too complicated and it wasn't adding too much value so it did allow people to preview the design file and the components but it felt like there was too much of a learning curve for a visitor there was too many interactions too many details and it was getting too specific I just wanted to Showcase to the user that we spent a bit of time to push beyond the creative boundaries but still make it familiar to someone who's visiting and wanting to buy a figma UI kit hopefully we've secured a positive First Impressions the second step is to now optimize for conversions now if you ### Optimising for conversions [4:24] have spent enough time running cro experiments and if you don't know what that means I'll throw up a definition here you would know that a site that converts higher is generally one that follows a few key things first boring layouts not because people want boring things but people have a very short attention span and so if we want them to find the information that they need as quick as possible we need to keep it simple without too many distractions now the second thing is minimal transitions because even though animations are really cool they can be very distracting and to be honest they don't actually help people find what they need on a website now the third and final thing clear and concise content serious buyers are always looking for answers to their questions think about yourself whenever you were looking to buy something online you were clicking between different pages because you were looking for specific answers before you hit that buy button let's dive back into the figma file and let me walk you through some of those critical tactics and ideas that we implemented into the process when it came to thinking about the critical parts of this site really our goal is to help people find the answers to their questions so when we think about figma's leading uiit and design system and if you are looking to purchase one what are those questions that you might be asking well first are there people who have actually purchased this is there social proof so we try to bring through some social proof here if you are looking to purchase you're probably thinking what's actually inside the UI kit that is why this whole entire section is dedicated to helping you understand with some video assets to understand what's actually in the kit we also have an entire section underneath that's really just summarizing what is the entire offer so if you don't have time to watch a video and you don't like watching videos you can also get a sense of what's actually in the kit from this entire section as well obviously with the little Easter eggs you can click and find things are actually interactive over time but once again our goal is to create content that answers the questions that our potential buyers may be asking so scroll further down you might be wondering is this kit even designed for me like is it right for me there are so many different UI kits on the marketplace right now so we have a section that will hopefully answer those questions that people are asking now once you've gotten to a point where you start to understand you've got a general idea of what's actually in the kit you can see that we've created dedicated Pages for each category because if you want to dive a little bit deeper into the actual UI kit we want to make sure that all the information is very accessible for you at least for our potential buyers so you're not second guessing and you can find all the information as quick as possible so from here you can actually open up the figma file if you wanted to or if you notice on our homepage we have a very prominent preview button because once again we don't want to just talk the talk we want to walk the walk so if your question as a potential buyer is what's actually in it you can click and actually open up the preview file as well there are obviously lots of different tactics that we implemented but I believe the change log is also a very important piece of content that people are looking for which is how often do you actually update your UI kit this is where we try to document all the updates as well just to make sure that everyone understands how often and how frequent we update and what type of updates we actually include as part of the package and I think the Hall of Fame and the social proof of testimonials is also very important as well so as you can see it's not always about just designing a website for the sake of it it's actually thinking through what are the questions that your potential buyers may be asking and then designing a website to answer those questions as quick as possible so once we felt that the designs was ready to ### Design handover process [8:20] move into development we had to prepare our file for Handover now there were definitely quite a few pages and screen especially for all the responsiveness and also the Transitions and animations that we want to implement so let's walk you through how we were able to document everything and manage that entire process with the developers as you can see the design file is actually quite large mainly because we were using ship faster UI to design the ship faster UI website so we have all the components built already into this file so we could quickly drag and drop them into our designs but more specifically how did we manage the Handover process so we've got all our components on the left hand side just so developers were able to find specific things that they needed but it was also for us to manage and keep everything on the left hand side so we can manage that ourselves but on the right hand side you can see that we break up all our designs in a specific way so we utilize our own status kit that if you wanted to you can download the link in the description we've also got our own annotation components or kit that we've built for ourselves once again if you want that you can download it in the description as well but really it's we've set everything from draft work in progress and once it's ready for Dev we normally set it to Green we also annotate anything that requires any specific or unique or custom transitions or interactions so generally around animations and specific interactions in terms of like clicking hovering what should happen for our uh users and visitors if you go across you can see that Whenever there is maybe like a toggle we let the developers know how we intend that to happen we also create prototypes here and there sometimes so on the left hand side where we have our components we sometimes build a very quick prototype if it's necessary so I don't think we have one over here but generally we keep it on the left hand side as well in terms of all the other sections you can see it's quite standard and self-explanatory we keep our responsive views uh stacked and we just simply add annotations wherever we feel like there would be something unique for the page itself when it came to building ### Building the website [10:36] the ship faster UI website we leveraged web flow for this lately I've also been considering if we should be using framer could probably have the time it takes to launch a site because the design and the development process happens at the same time but the reason why we've kept a web flow is that my team is definitely more experienced with webflow and it makes it a little bit easier for us to get it done and that was it on the 4th of July we quietly publish the site without any public announcements you can see we've already had over 1,000 people visit it organically now it's time to grow the website so hopefully this video inspires you to turn it up a notch for your next project if you made it this far let me know what color shirt you were wearing so I know who the Die Hard fans are and if you like this video make sure to gently smash the like button subscribe for the darad fans and if you want to keep learning you should definitely check out this video