Design is constantly growing and evolving. Technology continues to update and new software is always coming into the market.To be a better designer, you have to continue to learn, try new projects or in this case a new design process.Every designer has their own process and its not a one size fits all. Keep trying different processes until you find one that works for you! Would love to know your process in the comment section below!The ProcessPre-Discovery PhaseTo begin my design process, we have to go back to the root of it all, the client. I call this the pre-discovery phase. In this phase, my goal is to gather as much information as possible, not only from my client but from their competitors as well. Doing this will tell me what works and what doesn’t in their specific industry.

‍

Design is constantly growing and evolving. Technology continues to update and new software is always coming into the market

To be a better designer, you have to continue to learn, try new projects or in this case a new design process.

Every designer has their own process and its not a one size fits all. Keep trying different processes until you find one that works for you! Would love to know your process in the comment section below!

‍

‍

‍

The Process

Pre-Discovery Phase

To begin my design process, we have to go back to the root of it all, the client. I call this the pre-discovery phase. In this phase, my goal is to gather as much information as possible, not only from my client but from their competitors as well. Doing this will tell me what works and what doesn’t in their specific industry.

‍

‍

Here are my pre-discovery questions.

What your goals
In order to produce an effective website, I need to know what their goals are. This helps me priorities whats important and how can we solve these problems using design.

‍

Which websites inspire them / how they want their website to look like
Clients like to know that they are control of their company and its true they should control most situations but as a designer, it’s up to us to guide them to the right direction. Tell them your experience within their industry and make sure to always have research that backs up your point.

‍

What features they needed
This helps me know exactly what they need in an application or website, but remember, the more features there are, the more complex the app or site will be so find ways to cut down the unnecessary. Also ask yourself this, does your client needs a website or a web app. Whats the difference? Check this link for a good explanation website vs. web app

‍

What they like about their current site and what they hate
Knowing this will help me keep whats important and let go of whats not. Also a really good time to ask them if they have a style-guide to follow.

‍

What their audience is like
Audience is everything when it comes to the any business. It’s important to know who we’re designing for, who we’re talking to. Personas are something to keep in front of your mind. Honestly, I am the worst at personas, its hard for me to imagine myself being in someone else’s shoes and what kind of life they live. But in order to solve this problem, I have to schedule interviews with people within this demographic. Reach out to people who are in the same age group, have the same hobbies and listen to them, get to know them and jot down their behavior. To know this part, will ultimately make your design successful.

‍

‍

‍

‍

Wireframes

‍

‍

Now that you have all your information.. for now, the next step is to build your wireframes. Wireframes help me make quick revisions and gives the client the opportunity to see the overall vision of their website. It shows the client whats important and how the website will function.

‍

Wireframes will save you time, theres no doubt about that

‍

My process for wireframes

Pencil + paper — always start off with pencil and paper, it allows you to be more free, scribble over bad ones and start with a new one, keep your old drawings, feel out your design. Not only does pencil on paper gives you that freedom it also allows you to include your team to do some quick edits or add-ons.

‍

Figma — great software for design, best thing about it is how easy it is to showcase your design to your clients if you’re not in the same room.

‍

‍

‍

‍

💎 Design

After you and your client have a good understanding of the features and functionality based on the wireframe its time for the fun part, the design process.

‍

I’ve recently transitioned over from Sketch to Figma. I wont lie, I have so much love for Sketch. It’s what I started with but if you want to grow as a designer, you have to to transition to better tools and products. It’s important to adopt the resources used by successful designers and companies.

‍

if you want to grow as a designer, you have to to transition to better tools and products.

‍

I’ve learned to really love Figma and appreciate how easy it is to communicate with the engineers and clients. Think about if Sketch and Zeplin had a baby, Figma. Now, you’re able to prototype, have multiple team members comment on designs in the art board and easily show live changes in the design while your client is watching all in one place. Oh and its FREE!

‍

As for Sketch, I wouldn’t completely abandon it, it’s great to have if you don’t have internet access.

Recommendations when designing

• Mobile first — now a days, it’s critical to have a responsive website or web app. Mobile UI only gives you so much space and forces you to strategically fit all your information in a condensed area. Once mobile is ready, then you can design for web. With all that extra space, you can now add more to your design after all the functionality is down.

• Stay consistent — You don’t have to be extremely detailed when doing wireframes and I wouldn’t spend too much time making your wireframes look over the top but when it comes the final design phase, you want to be as consistent as possible. Try to reuse the same components as possible, this will absolutely speed up your engineers work. Think about your margins and paddings, they should be consistent with all other components throughout all your screens. h1, h2, h3 its all real and it should be repetitive throughout your screens.

• Communication with your engineers is key — Our job as a designer is to make the engineers life as easy as possible. With apps, make sure you keep in mind what works and what doesn’t when developing the app. Material UI is a great site to see how you can design components that are responsive and better to check before asking your developer.

‍

‍

‍

Lets Recap

To understand the soul of the project is understanding the base of the project

💻Anything you do, you have to start at the root of the project, be on the same page as your client and do your competitive analysis.

‍

👫👫Understand the audience and create those user stories

‍

🧩Save time by using wireframes

‍

👩‍💻👨‍💻Think about your engineers and how can we make life easier for them?

‍

📱Design in Mobile to get all the functionality down then move over to Web.

‍

‍