How does the UX/UI/planning work?

Maybe I didn’t receive the memo but how to plan a website/app? I noticed in Ewa’s videos (FCC youtube channel) that she is drawing sketches. I assume that is what people call UX, UI, or planning. I googled it but I still don’t know how to create all the cards, sitemaps, personas, wireframes, storytelling, etc, and what purpose these exercises have?
I’m aware that I should do some sort of planning (with paper and pen) before I started coding a front-end. What is best , quickest and lowest effort technique to plan an app?

The degree to how professional and effective your website is directly correlates to how much effort you put into planning it. There are many ways to go about designing an website or application before moving onto development, so there really isn’t any definitive process.

Developers plan and design out websites in advance for 3 main reasons, to create a streamlined development process, to have something to show to clients before going through all the work of development, and to have many versions of a site to test to create the best possible result. The majority of planning and designing works to achieve these three goals.

Planning is usually the first step, and this often involves listing out what your website needs to accomplish, outlining a target audience, and deciding what content needs to be communicated (not necissarily where the content should go, just what content should exist to begin with).

After planning comes the design process. After you know what content needs to go into the site, you need to decide how best to display it for those that see your site. This is when all the UI/UX, wireframing, and sitemaps come into play. This is the job of professional web designers so I cant possibly explain everything in one comment. However, in a nutshell, it usually starts with creating a sitemap that outlines the hierarchy of content, what should go on which page, and how to get from one page to another. Wireframing is the process of creating a raw layout mockup. It doesnt have any content or color, and should just communicate the rough layout concept of the site. From there is the large process of picking a color scheme, creating mockups of what the site will look like, prototyping to see the site in practice, and working with clients.

That’s a lot of stuff to do, but its designed so that the more complicated the site the more consideration you can put into the design. If anything. planning in advance will mean you dont have to do it while developing. Building a site is tough enough, trying to design as you go just makes things more complicated than they have to be.

1 Like