{"id":2178,"date":"2016-10-27T18:12:01","date_gmt":"2016-10-27T15:12:01","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=2178"},"modified":"2023-08-16T09:16:41","modified_gmt":"2023-08-16T09:16:41","slug":"front-end-development-from-ux-design-to-code","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/","title":{"rendered":"Front-End Development. From UX Design to Code"},"content":{"rendered":"

User interface serving the aims of positive and problem-solving user experience is one of the key aspects of creating a digital product, still it’s web development that enables users to get real and live\u00a0surfing experiences. With the course of time, more and more businesses are going online, so there appear some loose ends that need to be cured through user experience. In the business struggle, everyone wants to please their customers and engage them to return again. Today, businesses realizing\u00a0the value of thought-out and professionally built user experience are able to take the best of digital technologies and products. Full-cycle UX design gets its live version via the web and mobile development transforming step by step from subtle idea to real digital product.<\/span><\/p>\n

 <\/p>\n

Getting down to cases, online businesses are all about user experiences and of course the products and services they are selling. Have you seen websites like Amazon, eBay, AliExpress? They are convenient and helpful\u00a0for their users even\u00a0being huge websites that offer millions of products and thousands of services. The value of thought-out UX and efficient UI is irreplaceable. How could this result be achieved? This is the point when the power of front-end development comes into play to not just enhance the look and feel of website but also take the\u00a0major role in increasing the level of user experience.<\/span><\/p>\n

 <\/p>\n

What is front-end?<\/span><\/h2>\n

 <\/p>\n

All websites consist of structure, data, design, content, and functionality. Creating user-facing functionality is the task of a front-end developer. Using a combination of markup languages, design, client-side scripts, and frameworks, they\u00a0create everything that users see and interact with: content, layout, and functional elements.<\/span><\/p>\n

 <\/p>\n

Three main parts of every website are: the client, the database, the server. The client is simply the web browser a person is using to load a site, and it\u2019s where client-side technology is unpacked and processed. In a general way, a server is a computer, a device or a program that is dedicated to managing network resources and data. The server is at a remote location anywhere, it is holding data, running the back-end of a website, processing requests, and sending a response to the browser. The client is anywhere the users are loading a site: mobile devices, laptops, or desktop computers. Server-side scripting is executed by a web server; client-side scripting is executed by a web browser.<\/span><\/p>\n

\"tubik<\/p>\n

 <\/p>\n

Let’s have a closer look at this process.<\/span><\/p>\n

The Server<\/strong> – this part of website is responsible for holding data, running the website\u2019s back-end architecture, processing requests, and sending response to the browser.<\/span><\/p>\n

The Client<\/strong> – requests pages from the Server, and displays them to the The User. In most cases, the client is a web browser.<\/span><\/p>\n

The User<\/strong> – uses the Client in order to surf the web, fill in forms, watch videos online, in other words and interact with webpage.<\/span><\/p>\n

 <\/p>\n

\"web<\/span><\/p>\n

 <\/p>\n

To see how it works in practice, let’s take the flow of interactions with\u00a0Tubik website for example.<\/span><\/p>\n

 <\/p>\n

The User opens his\/her web browser (the Client), then loads https:\/\/tubikstudio.com\/. The Client (on the behalf of the User) sends a request to https:\/\/tubikstudio.com\/ (the Server), for our home page. The Server then acknowledges the request, and replies the client with some meta-data (called headers), followed by the page’s source. The Client receives the page’s source and renders it into a human viewable website. The User types “Case Study” into the search field, and presses ‘Enter’. The Client submits that data to the Server. The Server processes the data and replies with a page matching the search results. The Client, once again, renders that page for the User to view.<\/span><\/p>\n

 <\/p>\n

Processes running in web browser are the following: when the page is in process of loading, scripts are embedded within and interact with the HTML of a site, selecting elements of it, then manipulating those elements to provide an interactive experience. Next, scripts interact with a CSS file that styles the way the page looks. It dictates what work the server-side code will accomplish and returns data that\u2019s pulled from the site in a way that\u2019s readable by the browser.<\/span><\/p>\n

 <\/p>\n

For example, when we open home page of Tubik Studio website, the back-end is built to pull specific data from the database to Client, while front-end scripts render this data into readable for human view webpage.<\/span><\/p>\n

 <\/p>\n

Front-end languages<\/span><\/h2>\n

 <\/p>\n

Widespread client-side languages which front-end developers use regularly and have to know include:<\/span><\/p>\n

 <\/p>\n

JavaScript:<\/strong> With its frameworks and libraries, it\u2019s the core of front-end development, and beyond. It is called the first client-side language and is still the most common client-side script on the web.<\/span><\/p>\n

 <\/p>\n

HTML:<\/strong> Every front-end developer has to know this language. It dictates a site\u2019s organization and content and all interaction. HTML elements can annotate footers, headers, how text is displayed , how media and images are appeared, and more.<\/span><\/p>\n

 <\/p>\n

CSS:<\/strong> Cascading style sheets (CSS) is broken into modules and comprises the code for every graphic element\u2014from backgrounds to font\u2014that make up the look and feel of a website.<\/span><\/p>\n

 <\/p>\n

\"programming<\/span><\/p>\n

 <\/p>\n

Front-end frameworks<\/span><\/h2>\n

 <\/p>\n

A framework is a hierarchical directory that encapsulates shared resources, such as a dynamic shared library, nib files, image files, localized strings, header files, and reference documentation in a single package. Here are some popular frameworks that are usually used.<\/span><\/p>\n

 <\/p>\n

AngularJS:\u00a0<\/strong>This framework and several other JS frameworks, like Backbone.js, Ember.js, Express.js or ReactJS demonstrate the capabilities of JavaScript.<\/span><\/p>\n

 <\/p>\n

jQuery:\u00a0<\/strong>It is a fast, small, JS object library that streamlines how JavaScript behaves across different browsers.<\/span><\/p>\n

 <\/p>\n

Bootstrap:\u00a0<\/strong>This leading mobile-first framework includes HTML, CSS, and JavaScript to facilitate rapid responsive app development. With Bootstrap, website is compatible with all modern browsers and looks great on any size screen, from tablets to phones, from laptops to desktop computers.<\/span><\/p>\n

 <\/p>\n

Foundation:\u00a0<\/strong>Responsive front-end framework is used by sites like Facebook, Yahoo!, and eBay.<\/span><\/p>\n

 <\/p>\n

Semantic UI:\u00a0<\/strong>It is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.<\/span><\/p>\n

 <\/p>\n

Yeoman:<\/strong>\u00a0It is a generic scaffolding system allowing creating of any kind of app.<\/span><\/p>\n

 <\/p>\n

Pure.css:<\/strong>\u00a0It is the set of small, responsive CSS modules that you can use in every web project.<\/span><\/p>\n

 <\/p>\n

Skeleton.css:<\/strong>\u00a0As Skeleton’s developers stated: \u201cA dead simple, responsive boilerplate.\u201d It is the set of small and easy, responsive CSS modules that can be used in every web project.<\/span><\/p>\n

 <\/p>\n

\"web<\/span><\/p>\n

 <\/p>\n

The next posts about web development are coming soon for those who are interested, and in them, we are going to tell you more details about different aspects of the job: the closest ones will tell about specific features and tools for the back-end, web developers workflow and trends for front-end development. Don\u2019t miss!<\/span><\/p>\n

\n

Welcome to read the article about basic terms and tools of web development<\/a><\/em><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

The article focused on the key aspects of front-end development as the way from design to real digital product. Terms, programming languages and frameworks.<\/p>\n","protected":false},"author":3,"featured_media":2179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[457,479,482,491,502,515,533,40,540,100,147,195,200,233,365,437,447],"coauthors":[],"class_list":["post-2178","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-processes_and_tools","tag-ui","tag-usability","tag-user-experience","tag-user-interface","tag-ux","tag-uxui","tag-web-design","tag-bootstrap","tag-web-developer","tag-design","tag-design-studio","tag-framework","tag-front-end","tag-human-computer-interaction","tag-product-design","tag-tips","tag-tubik-studio"],"acf":[],"yoast_head":"\nFront-End Development. From UX Design to Code<\/title>\n<meta name=\"description\" content=\"The article focused on the key aspects of front-end development as the way from design to real digital product. Terms, programming languages and frameworks.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Front-End Development. From UX Design to Code.\" \/>\n<meta property=\"og:description\" content=\"The article focused on the key aspects of front-end development as the way from design to real digital product. Terms, programming languages and frameworks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-27T15:12:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-16T09:16:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/tubik-web-development-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1944\" \/>\n\t<meta property=\"og:image:height\" content=\"1460\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/\",\"name\":\"Front-End Development. From UX Design to Code\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/tubik-web-development-1.jpg\",\"datePublished\":\"2016-10-27T15:12:01+00:00\",\"dateModified\":\"2023-08-16T09:16:41+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The article focused on the key aspects of front-end development as the way from design to real digital product. Terms, programming languages and frameworks.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/tubik-web-development-1.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/tubik-web-development-1.jpg\",\"width\":1944,\"height\":1460,\"caption\":\"tubik studio web development\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Front-End Development. From UX Design to Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Front-End Development. From UX Design to Code","description":"The article focused on the key aspects of front-end development as the way from design to real digital product. Terms, programming languages and frameworks.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/","og_locale":"en_US","og_type":"article","og_title":"Front-End Development. From UX Design to Code.","og_description":"The article focused on the key aspects of front-end development as the way from design to real digital product. Terms, programming languages and frameworks.","og_url":"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2016-10-27T15:12:01+00:00","article_modified_time":"2023-08-16T09:16:41+00:00","og_image":[{"width":1944,"height":1460,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/tubik-web-development-1.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/","url":"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/","name":"Front-End Development. From UX Design to Code","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/tubik-web-development-1.jpg","datePublished":"2016-10-27T15:12:01+00:00","dateModified":"2023-08-16T09:16:41+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The article focused on the key aspects of front-end development as the way from design to real digital product. Terms, programming languages and frameworks.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/tubik-web-development-1.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/tubik-web-development-1.jpg","width":1944,"height":1460,"caption":"tubik studio web development"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/front-end-development-from-ux-design-to-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Front-End Development. From UX Design to Code"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/2178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=2178"}],"version-history":[{"count":3,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/2178\/revisions"}],"predecessor-version":[{"id":14681,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/2178\/revisions\/14681"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/2179"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=2178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=2178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=2178"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=2178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}