Superb website designs usually start with a superb design concept. Websites are like puzzles that we are trying to solve. The website concept will give designers and developers the direction when making design decisions. How design concepts are formulated? What questions should be asked before formulating one? How such concept becomes a roadmap for the design? These are the questions that we will try answering in this part.
Design concept defined
From the definition of the word concept, which refers to the general idea that is used in formulating a plan, we can define design concept as the idea behind a website’s design. It is a blueprint or framework of how the design problem will be solved. Nonetheless, it can also be the schematic processes such as the underlying logic, thoughts and reasons involved in designing a website.
Therefore, the design concept leads in the choices of aesthetics including themes and colors and determination of grids. Put simply, each design decision that must be made will consulted back to the concept for future direction.
Verbal vs. Visual design concepts
Verbally, words are used to describe the website. A verbal concept is more abstract than concrete, focusing on the message that the design is trying to communicate.
Visually, objects and color schemes are used in portraying the website. A visual concept is a concrete, and it usually stems from the verbal concept. Visual concepts focus on how the message must be conveyed.
Depending on the designer and/or developer, design concepts might start from visual to verbal conceptualization. It really depends on which the expert is more comfortable with thinking and doing. In some instances, the process becomes verbal-visual-verbal or vice versa.
Generally though, verbal concepts come first since visual concepts are about communicating the.
Before creating a design concept
Design concepts are highly individualized. This means that they are not universal; what works for one website may not necessarily work for another. Nonetheless, the processes required before devising the concept are a must.
1) Define the problem
No one can solve the puzzle unless he or she knows what puzzle he or she is trying to solve. Before a concept will be developed, there is a need to understand the nature of the business, the brand, the users, the market, the competition and the goals of the website. Ask the client directly to know all about this. Listen intently to the words that the client uses. Ask both direct and indirect questions to reveal about the personality of the brand and the people behind that brand. Get to know the client(s) as individuals. Then, try speaking their language. Jot down descriptive terms that the client speaks about. These will help in formulating the verbal design concept.
2) Research for ideas, insights and inspiration
However, additional research may be required particularly since the client can only tell you everything that he or she knows. Try to understand more about the market and what it takes for a brand to succeed in this market. You must understand the current position of the client within its industry.
The above processes will lead to idea generation. The next steps are up to you. For instance, you may gather inspiration from the web. Then, you may focus on the brand’s unique selling proposition, the underserved markets and the right kinds of imagery that resonate with the target market. Consider the consistent across the competition’s websites and the interests of the target market.
Now, you’ll have lots of ideas but are not sure which concepts will work best for the client’s branded site. Visual design concepts will become handy the more the developer is immersed to the ideas generated.
Sometimes, ideas stay on the subconscious before a web designer starts sketching them. A designer can come up with several design concepts before choosing the best one which he thinks resonates with the brand and its users the most. The most critical design decisions concern:
- Color schemes
From concept to design
Each of the element is led by abstract wordings that form part of the verbal design concept. The descriptive terms you’ve jotted down should guide the design since these are things that users want to think and feel. These are the experiences website designers and developers are trying to create experiences for the users.
To do this, the design elements must be working harmoniously with the design concept. All the elements should convey the same message so that they will be in harmony with the design concept. It is with this goal, that is creating unity and harmony, which the concept leads the site design. For instance, if the design concept’s main theme is formal elegance, then you should include a generous amount of whitespace that basically suggests luxury as well as a symmetry that conveys formality.
As already mentioned, the design concept is the roadmap. If something is not working, then we can assume that the elements you are trying to include do not fit the overall concept. If nothing is working, then consider exploring a different concept.
The next logical step is to create a mockup, which the client usually wants to see. A mockup is simply defined as a full-size model of a design. There are three ways to create a mockup.
1) Pixel perfect
Pixel perfect mockups are created using design tools such as Photoshop. Since these mockups have solid looks of the website, they are more useful to the clients albeit the lack of demonstrative of the interactivity nature of the web design.
Basically, the pixel perfect mockup guides their expectation regarding the finished website. Turning the mockup into an actual website is easier as there is no need for an iterative approach; all the minor design details have already been decided in the first place.
2) Quick wireframe
Wireframe mockups are created through mapping out the basic site layout on a wireframing tool. A wireframe mockup conveys the information architecture but skips the aesthetic details. It makes the static elements and interactive events as a fundamental part of the design process.
3) Browser integration
Browser mockups are structured in HTML prior to forming the basic layout in CSS. Afterward, the layout will be styled with the design elements. Browser mockups are ideal when the client has already pre-approved a design otherwise there will be a need to create designs over and over for the client to approve.
Concept creation is the most important stage in designing and redesigning a website that the digital marketing agency Philippines will embark on. Without a clear design concept, it would be nearly impossible for a developer to create a website, or that it will be very difficult to navigate along each design element and create the site. Simply, concepts guide designs.
Image credit: Webdesign.Tutsplus.com