June 28, 2013

17312 Views

Role Transformation - Web Designer to UI Developer

In the recent past, Web designers worked as a team. A Web designer’s main task was to design the interface only. The tasks of a Web designer were very limited, but at the same time they were very important too. Users notice the UI initially whenever they access the application.

Web designers should also be aware of the markup language. Using only HTML and CSS is enough to create a page, but the designed page might not be fully functional, as it would work like a static page. After developing the static HTML page, the Web designer passes this page to a Web developer for adding functionality and to make it interactive with the help of JavaScript or other programming languages.

Recent Past

Some time back, the profile of a Web designer was someone who used to design Web pages. They, along with the client, choose a color palette, position things, and make it visually appealing. The Web developer’s role was to take care of the usability and the design aspect of the Web page. The main tools of a Web designer are Photoshop, HTML, and CSS. After the completion of pertinent design tasks of the Web page, the Web developer adds dynamic functionalities to the Web page and makes it more user-friendly.

So the crux is, Web designers take care of only the designing aspect of the Web page, whereas the job of the Web developers is to add functionality to the Web page.

Demanding Nature of the Industry

These days, customers are looking for highly-skilled professionals who are able to perform both tasks: developing an HTML page and adding functionality to the page with the help of JavaScript and jQuery or any other JavaScript or frameworks.

So, the Web Designer’s role has transformed to a UI Developer’s role, but it does mean a person who can develop or design the page cannot add functionality to the page. A UI developer creates the Web site - writes the HTML/CSS, and if the page has any dynamic content, his job is to develop that as well.

Keeping in mind the growing diversity of platforms these days, HTML5+ CSS3 is pretty much the only option available. People from so many industries want to solve the multi-platform problem and HTML5 exhibits the greatest potential to tackle the challenge. We found that 80% of developers found HTML5 useful and 70% found it important. Even when they may be frustrated today, they are optimistic and think it is just a matter of time for tools to appear, and so on. HTML5 is the fastest way to reach the largest number of users on anything with a device screen. The latest surveys seem to indicate that a large portion of developers agree. Previously, Web designers developed the HTML pages for browsers only, but now the client’s requirement is to show how a single design adapts into three target layouts—Default, Portrait Tablet, and Smartphone. A responsive layout does help us to show the layouts for a view on a single page. Therefore, a UI developer knows how the system should adapt. Responsive layouts use HTML+JS+CSS3 media queries on the Web that are quite exciting things.

In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices.

UI Developers are usually more technically sound as compared to Web developers. They tend to have excellent problem solving skills and are generally good in mathematics. On a daily basis, a developer writes code in five or more different languages including (X) HTML, CSS, JavaScript, jQuery, and XML. UI Developers can also be found wielding some kind of text editor, three or more Web browsers, and development plugins (for example: Mozilla Firebug). UI developer should have expertise in JavaScript reference and the jQuery documentation. A developer also knows what an API is and how to develop a user interface using an API.

Although UI Developers are sometimes referred to as programmers, their skills usually exceed those of a conventional software developer. Think of a UI Developer as more of a technical expert with programming skills.

Perhaps the most important aspect of managing a Web-based project is being able to determine what skills a particular project requires and who the right person for the job is. In our IT industry, it is clear that despite a reasonable separation of roles and responsibilities, as a UI Developer, you should have a rich knowledge of programming languages and expertise in JavaScript, jQuery, XML,  Ajax, Jason and others.  And now, HTML5 is also based on JavaScript, so you need to improve yourself as a scripter rather than a coder.

For many UI developers, it is now taken for granted that client-side frameworks are the way to build rich web apps. If you are not using one, you are either not building an application or you are just missing out on something.  There is a lot of consensuses among the main frameworks about how to do it (model-view architecture, declarative bindings, etc.).

The Model-View-Controller Pattern

The model view controller pattern is a pattern based on the names of its main parts, which are as follows:

  •  Model – This is a domain-specific representation of the information on which the application operates. The model is another name for the domain layer. Domain logic adds meaning to raw data (for example: calculating if today is the birthday of the user, or the taxes and shipping charges for shopping cart items).
  • View - Renders the model into a form suitable for interaction, typically a user interface element. MVC is often seen in web applications, where the view is the HTML page and the code which gathers dynamic data for the page.
  • Controller - Processes and responds to events, typically user actions, and invokes changes on the model and perhaps the view.
Key Tasks of a UI Developer

Following are some key tasks of a UI developer:

  • Create Web application front end as per design comps and information architecture
  • Integrate front-end application with the application business layer
  • Follow best practices and standards for accessibility and cross-browser compatibility
  • Collect feedback from design and technical staff on Website development needs
  • Understand executing accessibility and progressive enhancement presentation
  • Stick to established coding standards and group procedures individually and in teams
  • Plan and estimate projects and reports hours to administration for billing
  • Add to engineering team’s culture of high code quality
  • Coordinate with Interface Design Architects for meeting accessibility standards at code level
  • Create conceptual diagrams, visual mock-ups, and manage detailed user interface specifications
  • Conduct usability testing to resolve interface problems
  • Engage in requirement specification process for new software functionality
  • Ensure design consistency with client’s development standards and guidelines
  • Design and build UIs on any server platform in a team environment
  • Guide and maintain developer teams and best practices
Conclusion

A User Interface Developer (UID) for short is not someone who knows a bit of HTML. As developers for the Web, we must know about HTTP (and siblings), HTML, CSS, JavaScript, JQuery, Ajax, Jason, multiple browsers (and their individual differences), tools, and programs that deal with Web communications. As developers, you must know about the human cognition, basic psychology, and logic sorting. You should also have good common sense and must know about all technologies offerings in accessibility and usability, interaction principles, MVC (Model-View-Controller pattern) separation, languages for creating interfaces, and generally tool kits, tools and programs that deal with the interface. So if we care about things that a user interface developer cares about, it might save the day for you.HCL has a dedicated user interface testing services unit that provides tailored solutions to each client as per the needs of their industry and sector.

References:
http://www.w3.org/QA/2013/02/interview_todd_anglin.html
http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
http://msdn.microsoft.com/en-us/library/ff649643.aspx
http://www.alexatnet.com/articles/model-view-controller-mvc-javascript