Front-end web design, also known as client-side development is the process of using computer languages mainly; HTML, CSS and JavaScript to create the visible and interactive parts of a website or Web Application for the users to see and interact with directly. We can also define front-end web design as the conversion of data to a graphical interface, through the use of computer languages such as; HTML, CSS, and JavaScript, so that users can view and interact with that data.

Web Design Languages

As I stated earlier, a front-end developer creates websites and web applications using web technologies (i.e., HTML, CSS, DOM, and JavaScript). Let’s take a quick look at these technologies:

  1. Hyper Text Markup Language (HTML)
  2. HTML is a declarative language created by Tim Berners-Lee. HTML is the basis of any website development process. It creates the markup / overall framework of how the site will look. This simply means, a website wouldn’t exist without HTML.

  3. Cascading Style Sheets (CSS)
  4. CSS controls the presentation aspect of a website and allows the site to have its own unique look.

  5. JavaScript (JS)
  6. JS is an event-based imperative programming language used to transform a static HTML page to a dynamic interface. JS uses HTML’s Document Object Model (DOM) to manipulate a web page in response to events, such as the click of a button by a user.

Run Times Scenarios

The web technologies named above are commonly run on web browsers. But these technologies can also run in headless browsers, WebView, or as compilation input for a native runtime environment such as React Native. Let’s take a quick look at these run-time scenarios:

  1. Web Browsers - A web browser is software used to retrieve, present, and traverse information on the world wide web. Web browsers are the most commonly used in the above run-time scenarios. The most common web browsers include: Chrome, Safari, Internet Explorer, Firefox and Edge
  2. Headless Browsers – A headless browser is a web browser without a graphical user interface. Headless browsers can be controlled from a command line interface programmatically to automate web pages such as functional testing. The most common headless browsers are: Headless Chromium, Zombie and Slimerjs.
  3. WebViews - Webviews are used by a native operating system, in a native application, to run web pages. Think of a webview like an iframe or a single tab from a web browser that is embedded in a native application running on a device (e.g., iOS, android, windows). The most common solutions for webview development are: Cordova (typically for native phone/tablet apps), NW.js (typically used for desktop apps) and Electron (typically used for desktop apps).
  4. Native from Web Technologies - Front-end developers using web technologies such as CSS and JS can craft code for environments or native applications that are not fueled by a browser engine. Some examples of these environments are: Flutter and React Native.

Objectives of web Design

The objective of designing a website is to ensure that when a user visits the site, he/she can see the information in a format that is easy to read and understand. It is therefore important for a designer of the front end to keep a few points in mind to achieve this. Here are the 2 most important goals the web designer should aim for while designing a websites interface:

  1. Accessibility - With continuing development for mobile devices, such as smart phones and tablets, users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing a website. A designer needs to ensure that the site is correctly viewable in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device). This is called responsive web design.
  2. Performance - Performance goals are chiefly concerned with render time (how long the website takes to load on the browser). This can be achieved by optimizing or manipulating the website content to ensure that the site opens up quickly.

Web Design Tools and Platforms

There are several tools and platforms such as WordPress, Magento, Wix among others that are available for use to develop the front end of a website. Understanding which tools are best fit for specific tasks marks the difference between designing a hacked site and a well-designed, scalable site. The challenge associated with front end design is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.

Are you looking for a front-end Web developer?

To find out more about the comprehensive website development and design solutions I can tailor to your brand, don’t hesitate to get in touch with me. You can call Safaricom : +254 706 385 808, Airtel: +254 702 796 352 or alternatively chat with me via WhatsApp button below 🙂