Day 1 - Grooming session on UI Development
Mentored by : Ritika Gupta
Platforms used : jsfiddle and codepen.io
What is UI development?
UI : User Interface , refers to the intermediate between a user and an application. In the Previous times, this intermediate often used to be command line (much alike CMD) but in the modern times , this intermediate is highly graphical in nature.
Development: the process of making something.
UI Development: Making an intermediate which helps users to interact and communicate with a web-based or mobile-based application.
Process Of Making/Development: Technologies like HTML (Hyper Text Markup Language), CSS (Cascading Style Sheet), Javascript etc. are the part of toolkit to begin making such an interface/intermediate.
Examples: the home-page of flipkart webiste/app, the dialog box that appears while installing a software, your desktop and it’s accessories, social-media webistes/apps etc.
Advanced Scope of UI Development: Responsive Web Designing , refers to compatibility of UI elements view w.r.t different devices like IPad, mobile-phones, laptopscreens, etc.
Techstack comprising UI development
- HTML (Hyper Text Markup Language)
- CSS (Cascading Style Sheets)
- JS (Javascript)
- RWD (Responsive Web Design)
- SASS (Syntactically awesome Style Sheets) : interpreted or compiled into CSS
- JS Frameworks : AngularJS, VueJS, NuxtJS, NextJS, ExpressJS etc.
- JS Libraries: Loadash, JQuery etc. Many more are coming soon…
Difference between UI/UX Designing, UI Development and Front-End Development
| UI/UX Designing | UI Development | Front-End Development |
|---|---|---|
| Stands for User Experience and User Interface Designing | Stands for User Interface Development | Stands for Functional and Dynamic Development on UI |
| Definition: Painting and sketching out the look and feel of UI | Converting the painted & sketched UI into the static HTML/CSS Code. | Converting the static UI code into functional and dynamic code. |
| IT Industry Designation: Graphic Designer | IT Industry Designation: UI Developer | IT Industry Designation: UI/Front-End developer |
| This requires knowledge of tools like corel-draw, adobe photoshop, adobe XD, Invision, E-Sketch etc. | This requires knowledge of HTML, CSS, JQuery, Javascript-DOM, Responsive Web Design (media queries or CSS flexbox, Bootstrap) etc. | This requires knowledge of Advanced Javascript, a strong grip on any one of the JS frameworks like AngularJS, VueJS etc. |
| Relationship: A Graphic Designer sketches and paints out a website layout with all minute elements like buttons, icons, modals, toast messages, links, logos, forms etc. using the above mentioned tools and takes help of tools like Zeplin, Avocode or Invision to upload those files as what is known as style guides | Relationship: A UI developer uses these style guide from the tools to fetch dimensions, color-codes, sizes, margins, spaces, font-family etc. to use these values in the code | Relationship: A Front-End developer uses this static UI code and embeds logics and consumes APIs to make buttons, modals functional and content on the web page dynamic which renders as per user-to-user |
Market Trend and Scope
- Trending UI Tech stack is HTML and SASS , where SASS is a CSS pre-processor which brings to us the features of making functions, mixins, variables, arrays to make CSS code highly re-usable. Developing and maintaining a repository of common elements across website like buttons, links, modals, fonts, forms etc.
- Trending Front-End tech stack is ReactJs and AngularJS to maintain re-usable components across the website and consume APIs and it’s data.
- Trending tools on which the style guides are deployed by the graphic designing team are zeplin, avocode, invision etc. which are easily readable and provide copy-paste option for css styles snippet.
- Scope Of UI and Front-End is so bright and wide in near future that newer tech stacks like VueJS and many other handy and highly compact yet functional JS frame-works are being manufactured and launched rapidly. Along with the same, CSS4 is also being supplied with newer attributes and values to minimize the need of JS on UI-front.