What makes something well designed? The design is not just about creating something for your viewing pleasure, but also about taking up the challenge of solving a problem, something that doesn’t just work but also tells you how to use by having just a glimpse at it. It does not matter if it’s flat or material as long as it serves the purpose. Good design enables you to do things. It’s about loving that challenge. The bigger, the better. It’s a quite common perception that a designer’s work is all about how it looks, or if the color scheme matches your preferences or whether the typeface is suiting its neighbor elements.
“Great designers aren’t those with the most natural talent, or the smartest, or can draw the best. Great designers are those who’ve designed great products, period. And the only way to design those is the hard way. And while you might have a vision of how the product should be right from the start, it takes a lot of work to get it right.You have to explore. You have to prototype. You have to test. You have to see it live. You have to see someone using it. Only then you get a refined design. No one gets it right the first time.”
– Dan Saffer
So here is the brief look at the design steps involved in building an ideal web application.
Gathering information / Asking Why ? / Research – Understanding the soul of a project is the foundation upon which a complete design solution is built. Many things need to be taken into consideration when we design the look and feel of a website. So we first ask a lot of questions to help us understand the business and the need in a web like why are you building this website ? What is the need of it ? Who is going to use it ? Everything you design ties back to this idea, so identifying it is the first and most important part of the design process.
Understand the User Story / Planning – A person’s life will never begin and end with your product, be it a website, a poster or a hardware. There is context before, during, and after. Consider how a person feels, what they are intended for, and what they want before they interact with your design. Here we develop a site map – a list of all main topic areas of the site, as well as sub-topics. Using flowcharts comes in handy while dealing with sitemaps. This gives us a guide as to what content will be on the site and is essential for developing a consistent, easy to understand navigational system
Develop the Look & Feel / Design – Now that you have an idea as to why you’re making this thing and how people will interact with it, it’s time to answer the question: What does it look like? This step is prioritized as third to the user story and the soul of the design, but it is commonly misunderstood as the ‘biggest’ or ‘most important’ part of a designer’s job. In this phase, communication is crucial to ensure that the final website will match the needs and you don’t miss out on client’s preferences. In this way, exchanging ideas, work is done until the final design is achieved for the site. Then development can begin
Development and Execution – This is where the website itself is created. We slice out all the individual graphic chunks from the prototype design and use them to create the functional website. We also take the content and distribute it throughout the site, in the appropriate areas with reference to sitemaps. Maintaining hierarchy in sitemaps is necessary as it helps in making the website more semantically meaningful for search engines to recognize them. This phase is flexible because there are many ways to implement a design. Taking an active part is important as the developer might miss out on the user experience or micro-transitions .Find the way that integrates with the soul, the user story, and the look & feel.
From Testing and polishing to going beyond – Now, we patrol final details by testing your website. We test, step by step, the complete functionality of the website, especially the forms fields. We test it for compatibility issues with various browsers and devices, ensuring that the site is optimized to be viewed properly with every browser engine and on devices having any pixel density.We often see in movies that there are cameos of other actors. This is an element of surprise, something which is totally unexpected by the audience. Similarly, at this stage, you can really add a cherry at the top of your creativity to take what you already have (which is amazing) and cameo it with something unanticipated (to make it awesome).
This is not the one and only process that needs to be followed in order to create the best product. Ideas and steps may vary depending on the demand of the project. The basic structure of the pyramid otherwise will still remain the same. This will give you the basic idea for the steps that needs to be followed while successfully designing a great product.
UX/UI Designer and Developer, Geospoc.