A great resource for designers

I just explored a great resource for Web designers, in the form of a blog. This guys blog is really a gr8 database for almost all sort of design queries and tips. http://veerle.duoh.com/

UI Designing - First steps

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, colors.ie, 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 -

1. "http://www.contentwithstyle.co.uk/Articles/70/playing-nice-with-the-other-css-kids/"
2. http://veerle.duoh.com/
3. http://www.cssbeauty.com/skillshare/comments.php?DiscussionID=11&page=1

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 :-)

A good resource for css

I just came across this discussion,which i think would be of use to aspiring web designers. http://www.contentwithstyle.co.uk/Articles/70/playing-nice-with-the-other-css-kids/

A Webdesigner's prerequisites....

One of the basic skills of a web-designer, should be his expertise in html and css. There is a common misperception among some designers about html and its simplicity, and the importance of css. Starting the exploration in depth of html and css, was infact a turning point to my web career. This blog will be a reflection of my views and various techniques that i come across in due course of time, relating to the tools that matter the most to a designer. HTML is a vast subject, and a designer should be aware, how to design a page compliant to international standards, than just to give importance to the look and feel of it. For this he needs a vast indepth knowledge of the standards being laid forward by w3c(World wide web consortium), and about the various browsers available. CSS also plays an important role towards the next generation web pages that give no limits to a designer's creativity alongwith complying to the web standards...hence a satisfied client and a internationally standardised webpage !!!! We will discuss about the various topics ranging from the latest updates in web designing to the newest technique used for a great web page. All comments are welcome and lets start a healthy discussion from here on which is....all professional!!!!

Lets Xplore and E-volve !!!

Welcome to my blog !! There are a lot to share and thus explore....The new era of internet is of gr8 boost to the aspiring learners who wanna be updated and are craving for knowledge, for they can find a torrent of information being thrown at them. The only step to get genuine knowledge is to know how sort them out from the scrap!!!!!! As a designer, i wish to see this blog of mine not as a scrap but as a reasonable knowledge donor, or atleast a base for healthy discussion. i would be updating the community, of my enlightenments and learning and of course be posting doubts thereby opening a door to a new healthy design discussion. So lets be a cause for a good result..........All are invited to post their view and comments on my blog. Lets xplore and evolve............!!

HTML & CSS - New found passion

Welcome to my blog !! There are a lot to share and thus explore....The new era of internet is of gr8 boost to the aspiring learners who wanna be updated and are craving for knowledge, for they can find a torrent of information being thrown at them. The only step to get genuine knowledge is to know how sort them out from the scrap!!!!!! As a designer, i wish to see this blog of mine not as a scrap but as a reasonable knowledge donor, or atleast a base for healthy discussion. i would be updating the community, of my enlightenments and learning and of course be posting doubts thereby opening a door to a new healthy design discussion. So lets be a cause for a good result..........All are invited to post their view and comments on my blog. Lets xplore and evolve............!!