When a website is in its designing stage, there are some mistakes that usually show up. Possibility of these errors increase further when the designers are either interns or freshers. Check out this list of steps that every designer must abide by before starting a new project.
If you have your heart set upon creating professional website layouts, this post is exclusively for you. Apart from helping you discover the steps to be done, we will also let you know about areas you have to be careful so as to refrain from committing serious mistakes.
Follow these useful work-flow tips and get the job done beautifully.
Be it any work, if you are not clear about the reason behind it then doing it makes no sense. Talking about designing, other than the description of the site, you must also know about expectations associated with it.
The thumb rule is, remembering that good redesigns are not flashy but those that improve performance over time. Before starting with anything, make sure talking to your clients. Try to understand their concerns and goals to create something that’s actually what they want.
Design means solving problems. A good designer understands that these problems need good layout & hierarchy and not gradients or shadows.
Before rushing into dropping shadows; clear yourself with the content, the layout and the functionality. All these elements need to be in line with client’s goals. To make things better, share your ideas & thoughts with them.
All the design problems are put to rest when there’s a top-level framework. The term ‘framework’ here refers to the UI that not only surrounds the content but also helps the user to perform actions and navigate through it.This includes the navigation and components such as sidebars and bottom bars.
Approaching the design from this point of view gives clear picture about the layout needs when designing sections that are beyond the homepage.
A proper grid is needed before designing anything. It helps to construct the layout of the different sections. Also, it guides through the particular screen size requirements, and assists in creating responsive templates. As obvious, this gives a fair idea about spacing along with other design issues.
Discovery phase of a project is all about exploring different typefaces and colors. Though it is advised not to use more than two different typefaces in a website, it actually depends on its nature.
Go with a font that’s readable for big chunks of text. Play with titles and calls to action. Use big fonts and show your best in terms of creativity & consistency when using typography.
When choosing a set of typefaces, explore the colors you want to use in the UI, text and backgrounds. Limited set of colors and tones that are apt for general user interface are worth considering.
How about going through the layout of popular sites such as Facebook, Twitter, Vimeo and Quora? Other than the UI, there need not be any color restriction for graphic details or illustrations; however, they shouldn’t interfere with the functionality of the components.
“The simpler the structure of a website, the easier it is for the users to navigate it”. Every element of the site must depict a story; it must have a reason and an outcome. The layout must be compelling enough to let the content highlight important parts of the story.
Always settle for the simpler layout and add only the necessary components.
Job of designers is shaping the way users browse the internet. Deciding the number of steps a simple action will take and how efficient the website will be, is in their hands.
While some conventions exist because they work and some are there simply because no one spent time evaluating them. Rethinking about the established interactive patterns of all components is important to identify how to improve them.
When you design interactive experiences, you can’t escape motion. Judging a design on its own is next to impossible. Every component is defined by its relationship with the system. This relationship is conveyed properly through motion which can illustrate dynamic effects on the content as well as interactive states.
To test interactions and technology the best way, nothing is better than prototyping. Several prototyping tools are available nowadays that allow creating effective prototypes even when one is not an expert in coding. This is one of the best ways to get your client excited and on board with ideas and concepts that need a lot of explanation otherwise.
Innovation is not always the driving force for the project. Hence, thinking something new and fresh is up to the designer. Using a new grid system, avoiding blend modes, creating a new component or using a specific color are all examples of different challenges.
‘Attention to detail’ means a number of things as it depends on the concept behind the project.
It could be anything from a small interaction to an unexpected animation, from a subtle stroke around a box in the background to a little gradient in a button. This touch is essential and comes naturally if one enjoys doing it creatively.
To refine a component, you got to treat it as a perfect thing that can be presented to a design contest. Paying attention to every component brings results that are more than the sum of its parts.
Golden tip here is designing each component in such a way that it could stand alone as the best component ever.
Avoid blurry pixels by setting the right contrast between strokes and background or background colors. Don’t forget that there are few common things that must be avoided to come up with work that’s clean and accurate.
To sharpen the work, things such as gradients banding, strokes that merge badly with the background, blurry edges and font rendering options should be looked upon.
Loot at the design as a whole to ensure everything works well. Last but not the least, analyze each component individually.
Whatever design tools you use, this is the most important factor to stick to. Keep the files clean irrespective of the size of the project and the number of designers working on it. This will help in many ways such as exporting different sections, speeding up the design process and working with other designers.
Watch out how the layout will work on different devices and screen sizes. Constraints vary from conceptual and technical faults to contentissues.
The site should work in the ideal scenario as well as in the worst-case scenario.
If there’s a design you are passionate about, make it a part of your life. Take its screenshots, check it on different devices, create wallpapers of it, get it printed and hang it on the wall.
Listen to the main thing now. Doing all this crazy stuff will make you hateyour design. You will start finding out everything that’s wrong with it, which will provoke you to change it. Want to know why? Well, when you will develop disliking towards your previous work, you will act mature and learn from your mistakes.
When it comes to propose either an interactive concept or a design 'look and feel', you have to ensure that you and the client are on the same page. Don’t invest too much time on a concept until it is shared with the client.
After getting the initial concept approved, start the production. However, if the first concept is not liked by the client, bring a second concept that’s more appropriate.
Developers are creative people who are blessed with brilliant ideas. Therefore, team up with them right from the beginning of the project. Share your concepts as this can lead to better ideas and better execution in the end.
Producing great work is as important as it is to present it. If the design is not presented properly, it can be ignored no matter how much you like it. Accept the fact that what is clear to you might not be clear to the viewer who is seeing your design for the first time.
Yes, you must believe in what you do; however, you should be prepared to quickly turn over your ideas and coming up with something new.
If you are extremely concerned about your designs & interaction ideas and want them to be well executed, check on with the developers from time to time. Help them to the best of your caliber to make sure every little pixel is perfect.
Besides waiting for the final results, it is also important to keep an eye on the work in progress. This is because there are times when the best part of a project is left and it gets lost in the Archive folder.
After completion of the project and upon getting approval from the client, promote it. You can also create a case study with the work in progress and designs that failed to make it to the final release.
