Living life…the cool way !

UI Designing – First steps

leave a comment »

Im posting this section as a result of the exposure that ive gained as a UI designer in one of my current projects. As a UI designer who is responsible for the html screens and the overall layout and color schemes of an application, there are a lot of base works to be done before diving straight into the work. I would like to share my problems and solutions that were present in the project so far, as a UI designer, to the community.

Now a small overview on the part im playing in this project. My position is a UI designer for an application using j2ee, the team of which comprises of 10 developers and a single UI designer(Thats me!!:-)). Now this is one of the project that has given me a lot to learn and to rectify. My prime role ranges from visualising a layout for the application, to, delivering the client a prototype with a completely linked html screens, which i will have to design with the help of the information from the developers.

I can divide the work involved in this project into various levels, viz,

  1. Understanding the Application
  2. Identifying the user level, requirement, interactivity needed and other restrictions
  3. Visualising a layout
  4. Creating data elements compliant to the requirement specification
  5. Planning of the CSS
  6. Integration of HTML with CSS

These are the various levels that ive so far identified in a similar scenario, for a UI designer. Now coming into each of these levels of work:

Understanding the Application
This is one of the major part, in every project. The designer should have a sound knowledge of the application. His level of knowledge should be concentrated on the interactivity, usability and user level domains rather than on the technical aspects, which will be taken care by the developers. This can play an important role in the workflow as a gud understanding of the application can lead to innovative ways of presenting the datas that otherwise will be presented in rather conventional ways. An indepth understanding of the application enables a designer to think about the interface and to visualise an interface in his/her mind.

Identifying the user level, requirement, interactivity needed….

Moving a step further into the designing of UI, here we need to study the level of user who is going to use this application, their needs and the usability and interaction that they need as a layman. Here the designer need to think, puttting himself in the shoes of the user, about the various requirements that the user may demand and to come up with solution for a friendly interface that suits the users needs.This can play an important part in deciding the interactivity and overall user friendliness of the application interface. The various factors relating to the application like the screen resolution, whether its an online or offline project, the connection type of the user who uses the application if its online – all these adds to the picture of a user friendly application UI designing.
We can go for graphic intensive interface for a website depending on the connection type, but when it comes to an application, where we give a lot of importance to the data, interactivity and above all ,the time taken by the system to respond, we cant afford to consume the bandwidth of the user by including heavy graphics. In this scenario, we need to go for stuff that decreases the page size. It is here CSS comes in handy. Using CSS decreases the page size dramatically as we attach a seperate .css file to all the pages. We will come to CSS application in the following sections.
With all the information about the user requirement and basic functionalities of the application, we can go onto the next stage of UI designing…

Visualising a layout
This will be a crucial stage if designing a user friendly interface which reflects the client. In this stage of UI designing the designer’s creativity, paired with the facts that have been collected in the previous stage can bring out a visually appealing layout that is both easy to navigate and that will make the application simple and yet effective to operate. The selection of color scheme can bring out a visual difference. For example, in my current project i chose blue since it was a preferred option for corporates, and our client was a reputed corporate. Blue can bring a soothing effect to the eyes and thus can make the interface light and calm down the user’s vision. Another reason of my deciding to go with blue was, since our application involved a lot of data and the user needed to be working on it all day long, there was a serious issue in making the interface soothing to eyes and to enable the user to work on it for as many hours as needed, and blue was the perfect shade which could bring in that effect.
Once the layout is visualised with the header design and footers as is in most of the cases, we need to fix a uniform convention for the data elements in the application. I will explain this with reference to my project. By fixing a uniform convention, i mean to allocate specific positions and parameters for each elements that may appear in the application. For instance, if there is a tabular data to be displayed, fix its appearance with the color of tds, headings, border of the table, fonts used,, modularise the layout by identifying each data elements a try to relate them logically so that we can come out with a logical difference in those elements by using colors in different shades. In my case, i had a lot of data to be displayed in a tabular form, a strip which showed general info about the user logged in and an area that displayed information about a particular component. I tried to relate all the available data elements together and differentiated them with colors in the shade of blue.

Creating data elements compliant to the requirement specification
Now having visualised the layout and confirmed the color scheme and overall appearance, now is the turn to design the data elements that complies with the requirement specification and that suits to the needs of the user. Being more clear, i mean that in this section, we are going to fix the data elements that actually brings in a more comfortable way of operating the application. For example, we can avoid a chaos of datas in a screen and organise them into seperate tabs that make it more easier to the user to access the data, we can simplify the huge datas in a table by logically dividing them into modules of datas in seperate pages, and many more….
This may need a more deeper insight into the working of the application, and we can always discuss with the group of developers, any issues that may arise. This approach not only increases our UI designing skills, but also increases our knowledge on the overall working of any application, thereby making future works easier.

Planning of the CSS
Job half done….
Now we have all the information about the application with us. Moving further, we need to concentrate only on the look and feel of the interface, along with making it compliant with international norms. As i pointed earlier, when we go for designing html screens, CSS is an inevitable part of the modern designing paradigm. And so, this section is completely dedicated towards the planning of CSS. For this the knowledge that we have gaiend from the last couple of steps will become handy.
I am just a beginner in CSS, and thus dont want to make more technical comments on using it. But i wud love to explain some general information that ive gained, on using CSS here…

According to me planning a stylesheet is all about understanding the hierarchy of the data elements in the interface and the ability to logically organise them into various parts. There are a lot of references that i would like to direct fellow designers luking for a good start, like –


All these links provide an enlightening knowledge about CSS and its prowess

Integration of HTML with CSS
This is the final part where we make use to html to create screens and integrate CSS in them. My favourite methos to create HTML pages are using tables, rather than the much hyped about div’s. Tables are robust and are trustworthy friend of a web-designer. I use Dreamweaver as HTML editor and it is simply a superb web authoring tool with a quick workflow and functionality in it. CSS can also be coded in Dreamweaver, although other CSS editors are also available.
Now a major point that i would like to stress is about the coding of html. With tools like dreamweaver, HTML coding is so simple. But when you go for complex interfaces with a lot of datas and tables involved, we need to go to the next level of Dreamweaver usage. What i mean is the ability to code HTML pages in “CODE VIEW”. Most designers rely on the design view of the authoring tool for most of their projects. That may be ok for interfaces that involve simple design(a header image and a footer for instance), but a designer can be called strong in dreamweaver, only when he understands and practises how to code the entire page in code view. Im was used to designing pages in the “DESIGN VIEW” in the starting period of my career. I used layers to just place the images on the screens like a WYSIWYG interaction. But, gradually when i got exposed to more complex layouts and designs, i started practising the code view magic of Dreaweaver and its a great boon to my desiging capabilities. I can now design any layout using tables and code view of Dreamweaver.
So, my friends, my suggestion to you is to start to practise designing pages in code view rather than getting stuck to the design view. I assure you that, the combination of these 2 views can dramatically increase your workflow and can give you the extra edge over other Design view designers.

I will be posting elaborately n various factors that i come through in due course of time. Useful comments are always welcome 🙂


Written by Ranjith

January 26, 2006 at 7:54 pm

Posted in UI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: