Web Architecture vs Web Design Principles

Web Architecture and Design Principles are two terms hard to miss in job listings and for a good reason. Here's why.

Web Architecture

This defines the interactions between applications, databases, and middleware systems on the web. It allows for easy interaction of components within an application.

The most common aspects of web architecture are:-

• Client-Side(Front-end) - contains code that responds to user input e.g. clicks and swipes.
• Server-Side(Back-end) - contains code that responds user HTTP requests.

Types of Web Architecture

• Legacy HTML Applications - These applications consist of a server focused on web page construction logic. Business logic interacts with a client by sending out a complete HTML page. To see an update, the user needs to fully reload the page.
• SPA(Single Page Application) - these applications load the app on the user's device and provide updated content without reloading the page.
• Microservices - in this architecture an application is viewed as a collection small lightweight services that provide single functionality. This architecture enables the development of maintainable, testable, loosely coupled services that are tailored to your business requirements.

Web Design Principles

These are general rules for the design of web-based media. They provide us with guidelines for layout and interaction design.

• Visual Hierarchy - Your web page is made up of many visual elements, do they have the same level of importance? No, they do not. More important elements of your page should show more prominence hence attracting user attention.
• Divine Proportions - Believe it or not, divine proportions such as the golden ratio are believed to be aesthetically pleasing. The golden ratio(1.618) can be applied to columns design and typography among many other things.
• Hick's Law - Hick's Law states that every additional choice increases the time required to make a decision. The more option a user has on your website the more difficult for him to use or use at all.
• Fitt's Law - Fitt's law stipulates that the time required to move to a target area (e.g. click a button) is a function of the distance to the target. The bigger an object the closer it is the easier it is to use.
• Rule of Thirds - A picture is a thousand words hence it is always a good idea to use images in your design. The best images follow the rule of thirds.
• Gestalt Design Laws - The principle states that the human eyes see an object in their entirety before perceiving their individual parts. Laws of proximity, continuation, and common region greatly affect how the users perceive and interact with our website.