DEV Community: TINTU JOSEPH

UI Design vs. Graphic Design: What’s the Difference?

TINTU JOSEPH — Sun, 15 Jun 2025 13:56:36 +0000

Despite sharing a common focus on visual inventiveness, UI design and graphic design have somewhat diverse functions in the design industry.
Visual communication is at the heart of graphic design. Whether they are making logos, posters, social media creatives, or print materials, graphic designers concentrate on producing visually striking images that convey ideas, establish brand identity, and grab attention. In order to elicit feelings or convey a message, their work frequently uses color, typography, layout, and images.

Conversely, UI (User Interface) Design is concerned with the appearance and functionality of digital things. The visual layout of software, mobile apps, and webpages is the responsibility of UI designers. They create menus, screens, buttons, and forms, making sure that each interactive component is clear, consistent, and easy to use.

USER INTERFACE

TINTU JOSEPH — Thu, 02 Jun 2022 12:55:48 +0000

UI is a communication device between user and computer. The UI include keyboard, Mouse and mobile screen etc. A good UI help to easy usages of devices .Main UI designs refers to graphical user interfaces and other forms. The Main 3 forms are given below,

Graphical User Interface
It is the most commonly used UI. It's based on visualization This type of user interaction done by mouse or other type of devices .Eg: Computer
Voice-controlled interfaces (VUIs)
this type of user interaction done by the use of voice.Eg: amazon Alexa

Gesture-based interfaces
This type of user interaction done by when the Users engage with 3D design spaces through bodily motions: Eg: virtual realitygames.

Main Types Of User Interfaces

Command Line Interface
Common form of user interface .It Need a proper user instruction to the line for using. Computer commanded to the required file or directory then that time all commands available in file, then retrieving files to running programs. Major drawback of these type is the difficulty of the language learning, but it have a major advantage that is minimal memory usage.

Menu Driven Interface
A menu driven interface example is ATM.MDI which give a range of option in the form of list displayed in a popup or full screen. The advantage of MID is no need of long type code, but it have a draw back - limited options to choose.

Graphical User Interface
The commonly used type .GUI which help to people interact with these type of interface by using a mouse ,track pad or other peripheral to point click on icons .Main advantage of GUI is easy to learn ,No code needed but it need large memory space.

Touch Screen Graphical User Interface
The Touchscreen GUI which commonly used type of UI .Which is controlled by the finger .This type of GUI commonly used in the mobile ,tablet etc.

How to make Good UI
Users are humans, so they need comfortable and maximum less time usage on the app/website .
The following things that help to make good UI for you app/website

Make buttons and other common element to help to save the time of the user
Use proper alignment. Typically choose edge (over center)
alignment.
Reduce the number of actions for performing tasks but focus on
one chief function per page.
Use proper text align ,color, font because these are the key
element of the UI
.

PERSONAL WEBSITE USING FLUTTER

TINTU JOSEPH — Mon, 14 Mar 2022 02:08:28 +0000

## Introduction
I build personalwebsite used by flutter and hosted infirebase,.
Iknow this is not big website.but ecah person have easy to draw or learnthewebsite use flutter.firebaseis free space to host yourwebsite to internet.

Language

I used dart language to build the website ,why I use it because dart is to use compare to other languages

Major Links of Website

CODE - The source code is available in github and link given below-

tintujoseph / website

View on GitHub

WEBSITE - The link of my personal website is given below
personal website

Picture's of my Website

MAKE YOUR FIRST APP IN FLUTTER

TINTU JOSEPH — Sun, 23 Jan 2022 08:14:43 +0000

INTRODUCTION

it is open source UI developing kit ,that developed by google in 2015 but it was released in 2017.Main feature of the flutter is used in cross platform application developing.

DART

The one and only programming language that used in flutter is dart.The main feature of the dart language is it is an platform Independent programming language .object oriented ,Mainly it it is a opensource programming language and it easy to learn

Let Started....

Firstly we install the flutter from given (https://docs.flutter.dev/get-started/install)

Create Project

flutter create command used to create the flutter project

syntax:

flutter create flutters
cd flutters
code .

(here we are use vs code to create our project)

Lets Start Our Code

In flutter mainly we are importing to libraries one is cupertino.dart and material.dart. the first one is for Ios app and second one is Android app.

package:flutter/material.dart
package:flutter/cupertino.dart'

Here we use material.dart.which include may widgets materialapp , statefull and stateless etc..

The sample Code given below:

package:flutter/material.dart
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title:  Text(' Our Project'),
        ),
        body:  Center(
          child: Text('HELLO'),
        ),
      ),
    );
  }

}

void main() -it is the main method \ function of our project.

Scaffold -It is from the Material library, It provides app bar, and a body which contain homescreen.

title - which give title of our app.
center - which is widget which give the text in the center of the screen.