Recently, we had a workshop on Visual Design and UI Design.We got to learn many new stuff from Mayur Kadu sir, a graduate from NID and is also a professional UI designer.
He is now working at Cognizant as a Website Visual Designer. The role of a visual designer in website development is to generate appealing aesthetic layout and visuals for the website. They have to take care of small and intricate details like line spacing and image position button position and things like that in immense detail.
He explained the steps of visual design for website and games.
“Dynamic” and “Static” nature of a website
The information on static websites doesn’t change. Static websites are competitively cheaper and easier to develop. For example a website that displays pre-written articles or blogs.
Dynamic websites on the other hand update the displayed information constantly. Like tracking flight booking status or a movie booking website
The Elements that you design when designing a webpage are as follows :
Wire-frame is the skeleton of the website, a rough outline of what is to go where. A layout that defines the position of text images buttons interactive sections and dynamic information etc.
Web designers must decide which font to use, it should generally be a safe font i.e. . A font available on most computers. If you choose a different font, it has to come pre-loaded with the website which can be installed temporarily on the computer, but these websites take more to load. You have to maintain the readability of the font. Selecting a suitable colour plays an important role as it depends on the background. The colours have to be soothing to an average eye you can’t go out of the way to choose shiny bright font red for example because that spoil the readability.
Vector And Raster Graphics
Vector and raster are two methods by which images are displayed on a website.Raster graphics are pictures that are loaded on the website hence load faster . Vector take more time to load since they have to be downloaded to the local machine temporarily first. But these are higher in quality than raster images since they don’t use pixels for rendering the image but vector commands.
Brand guidelines are sort of the guidelines set by the clients. The website design has to follow the rules set by this guideline.
Colour is also a very important factor in website design since it sets up the mood and ambience of the website. One way to keep relevant colours is to build the colour pallet from the companies logo itself or the related colours. While if you are designing the logo itself it has to be readable and pleasing to the eyes.
There are many technological constraints, when designing a website due to the language and things like that. However, due to HTML5 a lot of these limitations can be avoided or disregarded as compared to the older MS Share-point.
Like in game designing website designing and development has to be time driven and put on a schedule and you would always want an extra week ahead of the actual deadline for reviewing and making changes just like we need time to test and tweak game design
Nowadays many people prefer to visit websites through their mobile phones, now that presents a new challenge to modern website and visual designing.
A regular website has to look very different for a mobile phone due to the different form factor and screen size or layout. So the design has to make new designs for the mobile website also but it should also be similar in visuals to the desktop version of the website. The layout for all mobile phones has to be designed differently. Only things that are very important should be displayed on the site, the rest of it can be put in the menu.
The Process of Creating a website.
The client approaches a Web Designer, as he wants to make his website.
Write the content that is to go on the website. Each website has a specific purpose. It is the job of the content writers to see what goes on it.
UX designers create the user experience for the website.
Designs the User Interface of the website. They layout of the website, how the user will interact with it etc.
These are the people that develop the website. They use HTML5 and code it for functionality.
SEO (Search Engine Optimisation)
SEO stands for Search Engine Optimisation. This is relatively new. The job for these people is, to optimize your website for web searches and to make sure your website in at the top or near the top when someone searches for a certain word. (like Instagram and hash-tags)
After the Workshop.
Once the sessions were done he gave us a exercise in which we were supposed to make or rather re-design the landing page of any of the angry bird games. And the thing we were supposed to take care of were placement, form, colour palette.