Design Phase:-
Below all these represent different stages of the UX/UI design flow:-
Wireframes represent a very basic & visual representation of the design.
It has very low fidelity (features) and is often created with black and white sketches.
Mockups are ‘pixel perfect’. It’s the exact graphical representation and presents all the content and functions. We call it high fidelity. Mockups aren’t just interactive and clickable.
Prototypes are closest to end product. It is clickable and interactive.
Usually, the team tests the prototype in earlier stages and saves a lot of costs.
online wireframe tool https://wireframe.cc/
******************************************************************************
Development Phase:-
The developmental stage is the point where the web site itself is created. It's divided into 2 parts.
Front - end -
This involves writing valid HTML / CSS / JS code and using libraries/frameworks like bootstrap, angular, react, jQuery that complies to current web standards, maximising functionality, as well as accessibility for as large an audience as possible.
Back - end -
This involves writing server end code which includes framework like spring/java OR django/python and sql database like oracle/mysql OR no-sql database like mongodb OR cache like redis.
******************************************************************************
Hosting Phase:-
Once you build your web site, it is time to upload the site. Some websites offer domain name registration and web hosting services as well, or have recommendations as to where you can host your site.
Once these accounts have been setup, and your web site uploaded to the server, the site should be put through one last run-through.
Other final details include plugin installation (CMS driven web sites and SEO (Search Engine Optimization). SEO is the optimization of your web site with elements such as title, description and keyword tags which help your web site achieve higher rankings in the search engines.
******************************************************************************
Maintenance Phase:-
It’s really up to you as far as how comfortable you feel with updating your own web site. Some people prefer to have all the control so that they can make updates to their own web site the minute they decide to do so. Others prefer to hand off the web site entirely, as they have enough tasks on-hand that are more important for them to handle directly.
A web site driven by a CMS gives you the ability to edit the content areas of the web site yourself. You are given access to a back-end administrative area, where you can use an online text editor (similar to a mini version of Microsoft Word). You’ll be able to edit existing content this way, or if you are feeling more adventurous, you can even add new pages and content yourself. The possibilities are endless!
Other maintenance type items include regular site backups, CMS upgrades, additional plugin installation, etc.
******************************************************************************
Website Layout:-
Most of the web pages in website are using common layout. For example layout which consists of header, footer and sidebar - are fixed for each page and the content which varies by the page.
Now, Logical idea is to try to extract and reuse common parts.
Let’s say we have a simple web app which has 5 different routes/pages (login, registration, dashboard, users, account settings) and two layouts.
One layout with content and footer, let’s call it layout 1, and layout 2 with header, footer, sidebar and content.
layout 1 = content + footer
layout 2 = header + sidebar + content + footer
Also let’s say that login and registration pages have layout 1, while others have layout 2.
Most of the web pages in website are using common layout. For example layout which consists of header, footer and sidebar - are fixed for each page and the content which varies by the page.
Now, Logical idea is to try to extract and reuse common parts.
Single Page Applications
******************************************************************************
Styling web application with CSS framework:-
$ npm install --save bootstrap //adding bootstrap
If its angular application, then open the angular.json file and add the file paths of Bootstrap CSS and JS files to the styles and scripts arrays under the build target:
"architect": {
"build": {
[...],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
Below all these represent different stages of the UX/UI design flow:-
Wireframes represent a very basic & visual representation of the design.
It has very low fidelity (features) and is often created with black and white sketches.
Mockups are ‘pixel perfect’. It’s the exact graphical representation and presents all the content and functions. We call it high fidelity. Mockups aren’t just interactive and clickable.
Prototypes are closest to end product. It is clickable and interactive.
Usually, the team tests the prototype in earlier stages and saves a lot of costs.
Wireframes and mockups are static whereas the prototype is dynamic.
******************************************************************************
Development Phase:-
The developmental stage is the point where the web site itself is created. It's divided into 2 parts.
Front - end -
This involves writing valid HTML / CSS / JS code and using libraries/frameworks like bootstrap, angular, react, jQuery that complies to current web standards, maximising functionality, as well as accessibility for as large an audience as possible.
Back - end -
This involves writing server end code which includes framework like spring/java OR django/python and sql database like oracle/mysql OR no-sql database like mongodb OR cache like redis.
******************************************************************************
Hosting Phase:-
Once you build your web site, it is time to upload the site. Some websites offer domain name registration and web hosting services as well, or have recommendations as to where you can host your site.
Once these accounts have been setup, and your web site uploaded to the server, the site should be put through one last run-through.
Other final details include plugin installation (CMS driven web sites and SEO (Search Engine Optimization). SEO is the optimization of your web site with elements such as title, description and keyword tags which help your web site achieve higher rankings in the search engines.
******************************************************************************
Maintenance Phase:-
It’s really up to you as far as how comfortable you feel with updating your own web site. Some people prefer to have all the control so that they can make updates to their own web site the minute they decide to do so. Others prefer to hand off the web site entirely, as they have enough tasks on-hand that are more important for them to handle directly.
A web site driven by a CMS gives you the ability to edit the content areas of the web site yourself. You are given access to a back-end administrative area, where you can use an online text editor (similar to a mini version of Microsoft Word). You’ll be able to edit existing content this way, or if you are feeling more adventurous, you can even add new pages and content yourself. The possibilities are endless!
Other maintenance type items include regular site backups, CMS upgrades, additional plugin installation, etc.
******************************************************************************
Website Layout:-
Most of the web pages in website are using common layout. For example layout which consists of header, footer and sidebar - are fixed for each page and the content which varies by the page.
Now, Logical idea is to try to extract and reuse common parts.
Let’s say we have a simple web app which has 5 different routes/pages (login, registration, dashboard, users, account settings) and two layouts.
One layout with content and footer, let’s call it layout 1, and layout 2 with header, footer, sidebar and content.
layout 1 = content + footer
layout 2 = header + sidebar + content + footer
Also let’s say that login and registration pages have layout 1, while others have layout 2.
Most of the web pages in website are using common layout. For example layout which consists of header, footer and sidebar - are fixed for each page and the content which varies by the page.
Now, Logical idea is to try to extract and reuse common parts.
Single Page Applications
******************************************************************************
Styling web application with CSS framework:-
$ npm install --save bootstrap //adding bootstrap
If its angular application, then open the angular.json file and add the file paths of Bootstrap CSS and JS files to the styles and scripts arrays under the build target:
"architect": {
"build": {
[...],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
******************************************************************************
Thanks for writing this informative post. Looking forward to read more.
ReplyDeleteProfessional Web Development Services