Welcome!

Machine Learning Authors: Zakia Bouachraoui, Liz McMillan, Roger Strukhoff, Pat Romanski, Carmen Gonzalez

Related Topics: Microsoft Cloud, Machine Learning

Microsoft Cloud: Article

Design for Developers

Interactivity, animations, and AJAX

A few years ago I had the opportunity to sit down with a designer possessed of a rare talent. We were both part of the same team and he was creating some UI elements that I was to wire up. As I sat there (in awe) watching him work I realized that much of his considerable skill was rooted in fundamentals not unlike the art of programming. Of course, there are design skills that are intuitive that can't be "learned." But, that can also be said of the logical clarity found in a really elegant data model or a brilliant inheritance tree. I am certainly no designer, but I have observed the more creative among us for several years and have gained some insight into their world. In this article I'll share some basic principles that can help raise your design acumen and improve the experience of your users.

Layout
I'd like to attack my goal of imparting design wisdom by breaking the topic into four buckets. The first is layout. By layout I simply mean the composition of smaller elements inside of a container or canvas. Everything in life has a layout even if it's not apparent. Billboards have a layout, as do magazines, book covers, keyboards, clothing, food packaging, and the list goes on. In software development this means how things are composed in a window; whether a browser or a WinForms application everything has layout.

There are principles to layout, simple maxims that can turn a mediocre misshapen ASP.NET page into an orderly one with pleasing lines.

The Rule of Thirds
The rule of thirds is a very old guideline, appearing as early as the middle 16th century in instructional writings on scenic painting. It states that elements on a canvas are most pleasing to the eye when they are broken into thirds. In a traditional column layout on the Web, this translates to a left-hand column containing navigation and small bits of content that is one-third of the total page width and half the size of the content area to its right.

You can implement this heuristic in all sorts of ways in a layout. For example, your header section might be divided into three sections: a search bar, a header image, and a navigation bar. Your header image could be a full two-thirds of the total height with the search and navigation bars each one-sixth of the total. This makes the size of the image in relation to other content seem right to the eye.

Even smaller minutia can benefit from this rule. Everything from calendar widgets to footer elements can be sized using the rule of thirds. Just keep in mind that it's a guideline and you don't have to go crazy doing the math.

Whitespace Is Your Friend
Whitespace often seems like magic. You really don't know why it works but it somehow does and adding a little more of it is rarely a bad thing. A few years ago, there was a craze in Web design to get every bit of content on a page above the fold (a term held over from newspaper design). Because this often leads to cramped designs I'm glad this fad has fallen away. You will have a natural tendency to skimp on the margins and padding around things but take liberties here and more often than not you'll be happy with the change.

More Stories By JC Grubbs

JC Grubbs is a web software architect, designer, and developer for a wide variety of business and social networking applications. Currently, He is an architect/technical lead at custom software firm, www.geneca.com ,where he contributes to the success of Geneca’s unique Getting Predictable approach to software development. JC has expertise in Microsoft technologies such as the .NET Framework, ASP.NET, ASP.NET AJAX, SQL Server, C#, VB, etc. He is also skilled at web front end development with XHTML, CSS, JavaScript, and a number of JavaScript frameworks, AJAX techniques, Microsoft Silverlight, and web standards.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


CloudEXPO Stories
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected path for IoT innovators to scale globally, and the smartest path to cross-device synergy in an instrumented, connected world.
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
ScaleMP is presenting at CloudEXPO 2019, held June 24-26 in Santa Clara, and we’d love to see you there. At the conference, we’ll demonstrate how ScaleMP is solving one of the most vexing challenges for cloud — memory cost and limit of scale — and how our innovative vSMP MemoryONE solution provides affordable larger server memory for the private and public cloud. Please visit us at Booth No. 519 to connect with our experts and learn more about vSMP MemoryONE and how it is already serving some of the world’s largest data centers. Click here to schedule a meeting with our experts and executives.
Darktrace is the world's leading AI company for cyber security. Created by mathematicians from the University of Cambridge, Darktrace's Enterprise Immune System is the first non-consumer application of machine learning to work at scale, across all network types, from physical, virtualized, and cloud, through to IoT and industrial control systems. Installed as a self-configuring cyber defense platform, Darktrace continuously learns what is ‘normal' for all devices and users, updating its understanding as the environment changes.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the modern business digitalization solutions. Achieve up to 50% early-stage technological process development cost cutdown with science and R&D-driven investment strategy with Codete's support.