7 days short course book about UI design

1. 7 days short course
Make thinking, Do something

2. P a g e | II
Dedication
I would like to dedicate this short course book to my respectable Father and
Mother, all of my honorable teachers who are always dear and near to me
and without whose patience, care, understanding, unsparing support, affection
and most of all deepest love it would not have been possible to come up to this
position.
Acknowledgement
At first, I praise to Almighty “Allah” who gave me opportunity, capability,
energy, spirit and patience to complete my first short course book.
It is my great pleasure to thank my honorable teacher Tamim Al Mahmud
and Md Anichur Rahman sir, Department of Computer Science and
Engineering, Who is inspiration to me for his constructive academic advice and
guidance, constant encouragement and valuable suggestions and all other
supports.
I would like to specially thank to my beloved brother and friend Md Parvez
Hossain, Department of Computer Science and Engineering, Who is always
inspire in my activities and giving me advice, valuable suggestions and all other
supports.
I would like to thank to all of my friends, relatives, elder brothers and who ware
always helpful, inspire and gave me mental support at different stages in different
moment.
Again also thank to the Almighty for helping me a lot for successful ending.

3. P a g e | III
TABLE OF CONTENTS
Chapter Name Page No.
FIRST DAY UI design principles and concepts
 What does a UI Designer do?
 What Does A UI Designer Actually Do?
 What Tasks Can a UI Designer Expect?
 Exercise
4-10
SECOND DAY Basic principles of design 11-14
THIRD DAY Basics of icon design
 What makes an icon “good”?
 The Icon Design Process
15-16
FOURTH DAY Typography
 What is Typography?
 Typography Basics
 Typeface Or Font: What's the Difference?
 Typography on a Screen
17-19
FIFTH DAY Related to UI:UX design
 What is User Experience (UX) Design?
 User Psychology
 Hick's Law
 Designing With Psychology
20-22
SIXTH DAY The design process
 Finding Your Creative
 Creative Block
 Sources of Inspiration
23-26
SEVENTH DAY How they affect the job of the UI designer
 UI design steps
 Mobile Operating Systems
 Screen Sizes & Resolution
27-30

5. P a g e | 5
What does a UI Designer do?
Below is a brief overview of the types of tasks you will be able to complete by the end of the
course and will commonly encounter in the field of UI.
Designing Screens
As a UI designer, you will be in charge of designing each screen a user will interact
with. This means designing everything from a screen's layout and the different UI elements
like toggles, lists or buttons and patterns used on each screen.
Bookling Mobile App
Bookling is a mobile app which helps you keep track of your reading habits and
motivates you to read more. You can bookmark multiple books, add reminders, set goals and
get rewarded for reading more. Focusing on readers who still prefer physical books over
tablets.

8. P a g e | 8
What Does A UI Designer Actually Do?
For many, the role of UI designer remains unclear. Search “UI designer” in Google and you
may find yourself even more confused than before. It doesn’t help that UI and UX are often
lumped together, making it difficult to see where one ends and the other begins.
Whilst the two are inextricably linked, it’s important to know that User Interface Design is a
field in its own right. Sure, there’s some overlap - but ultimately, UI design comes with its
own set of tasks and therefore calls upon an entirely different skill set.
Perhaps you’re considering a career in UI and want to know what awaits you. Maybe you’re
already in the industry and just need some clarity on the matter.
So, what does a UI designer actually do?
UI Design in a Nutshell
First things first - what is UI design?
User Interface Design is a crucial subset of UX. They both share the same end goal - to
provide a positive experience for the user - but UI Design comprises an entirely separate leg
of the journey.
Put simply, UI is what you use to interact with a product, while UX is concerned with how
this overall interaction feels.
UI Design: The Visual
UI design focuses on the user’s visual experience. It determines how a user interacts
with an interface - be it an app, a video game or a website. It’s all about how the user
navigates from A to B via different visual touch points. Think tapping a button or swiping
through pictures.
The job of a UI designer is to design all the screens through which a user will move and to
create the visual elements - and their interactive properties - that facilitate this movement.
UI Design: The Human
At the same time, a UI designer works with human behavior in mind.
How so?
Look at it this way. A good interface requires barely any thought from the user. Consider your
favorite app: it’s easy on the eye and simple to use, right? When you first installed it, you
didn’t spend ages working out how to get from A to B - it was just obvious.
The UI designer is pivotal to this. They think about the human user and how the mind works.
They use things like patterns, spacing and color to guide the user.
“Intuitive” is the keyword here. Not only is the UI designer a creative creature; they also put
themselves in the user’s shoes, anticipating what they expect at each stage. They then use this
empathy to design visual, interactive elements that respond in a way that feels natural to the
user.
Let’s say you’re using an app to look for a new apartment. One listing in particular catches
your eye, so you click to view the gallery. A full-size image takes over your screen, captioned
1/5. You know there are more pictures, so you use your finger to swipe through the gallery.
There were no instructions to do so - somehow, you just knew.

9. P a g e | 9
This is the work of the UI designer. They think about what the user will expect and design the
app’s interface accordingly.
In a nutshell: UX draws out the map, the bare bones. UI then fleshes them out with visual,
interactive touch points that take the user through their journey as intuitively as possible.
}}}
What Tasks Can a UI Designer Expect?
So, it’s the UI designer’s job to bring the UX designer’s vision to life. But how do they go
about this?
Of course, your role will vary greatly depending on whether you’re in-house or freelance and
the kinds of projects you work on.
However, every UI designer can expect the following:
Collaboration
As a UI designer, you should be prepared to collaborate with others. From the client
and the UX designer, right through to the developers - communication is key at every stage.
At the start of the process especially, you can expect to work closely with both the client and
the UX designer. UI is all about humans, after all, so you’ll need to spend some time getting
to know the brand and its target user. What goals drive the user as they move around your
interface and what are their expectations?
User research and personas tend to fall under UX - but it’s the UI designer’s job to take this
information and run with it. The UX designer will most likely provide you with a wireframe
from which to work.
Finally, you’ll need to hand your design over to the developers. Ultimately, building a rapport
across different teams and being able to communicate clearly are crucial to the success of
your project.
Design
Of course, a role in UI will require you to get very hands-on with design. This
includes designing screens and creating visual touch points, as well as the interactivity behind
them. UI designers are also responsible for ensuring consistency - so creating a style guide, or
visual language, to be used across the board.
So what might a UI designer expect to see on their to-do list? Let’s drill down to some
specifics.
Designing each individual screen with which the user will interact, including the layout:
What should go where?
How much space should be left between each element?
What visual patterns and hierarchies make for an intuitive user experience?
Considering how the app will display on various screen sizes - think responsive design.
Designing UI elements such as buttons, icons, sliders and scrollbars. Choosing the right
colors and typeface. Designing the interactivity of each UI element - what does a button do
when the user clicks on it, for example: Creating animations.

10. P a g e | 10
Establishing a style guide to be used throughout the application, ensuring consistency and
familiarity for the user.
The design stage may include creating wireframes, putting together mood boards and
sketching out different ideas for how the interface might look. Here, UI designers will use
tools like Photoshop and Sketch.
Prototyping
As a UI designer, it’s also important to repeatedly test your designs - and this is where
prototyping comes in. Prototypes enable you to showcase your visual designs in action,
helping you to quickly identify flaws and smooth over any rough edges.
Prototyping and testing is a crucial part of the UI design workflow, as it will allow you to
ensure that the final product ticks all the boxes.
Closing Words
A job in UI design offers plenty of variety and will require you to wear many hats. Of
course, UI designers need a keen visual eye, but the psychological aspect is not to be
underestimated. To design user-friendly interfaces, you need to understand how people work -
and how each visual, interactive element shapes their experience.
Hopefully you now have a clear idea of what UI design is and what a UI designer does all
day, let’s dive right into your first exercise!
1. Explain in 2-3 sentences what UI design is.
2. Explain in 2-3 sentences the types of things a UI designer works on.
3. How did you do?

19. P a g e | 19
There are a few generators online, like this one. You can find fun ones too, like bacon
ipsum or this cat ipsum.
No matter how fun generators are, you should aim to avoid designing without actual
content. Even a great guess using placeholder text will never let you design accurately.
 Give Yourself Space
On screen, it is important that you give your content extra breathing room. As it scales
up and down, whitespace will help increase readability. Busy screens, at small sizes,
are nightmares. Let all your text breathe comfortably.
Hopefully this lesson has taught you how important typography is to your user interface
designs. Some people devote their entire careers to it, so don’t underestimate how crucial it is.

26. P a g e | 26
Sources of Inspiration
Today, many creative choose to look for inspiration online. With dozens of websites and apps
devoted entirely to helping you find your muse, it’s tough to consider looking elsewhere.
But don’t hesitate to hit up your local library, museum or gallery. Look at work from all
creative disciplines, not just UI. Look at work outside the creative realm as well. You might
not find a UI pattern but you might find a great color combination or a novel idea for a new
gesture.
A huge problem with online inspiration sources, which you’ll find below, is that the work on
it begins to look the same. Entire galleries can sometimes feel homogeneous. This is often the
result of individuals looking at the same inspiration sources and copying each other. Keep this
in mind as you use showcase sites online.
A few great common inspiration sources on the web are:
 Dribbble
 Site Inspire
 Design Inspiration
 Smashing Magazine
 Awwwards
 Pinterest
 Web Designer Depot
 The Noun Project

28. P a g e | 28
 How would the system fit in with the user's normal workflow or daily
activities?
 How technically savvy is the user and what similar systems does the user
already use?
 What interface look & feel styles appeal to the user?
 Information architecture – development of the process and/or information flow of
the system (i.e. for phone tree systems, this would be an option tree flowchart and for
web sites this would be a site flow that shows the hierarchy of the pages).
 Prototyping – development of wire-frames, either in the form of paper prototypes or
simple interactive screens. These prototypes are stripped of all look & feel elements
and most content in order to concentrate on the interface.
 Usability inspection – letting an evaluator inspect a user interface. This is generally
considered to be cheaper to implement than usability testing (see step below), and can
be used early on in the development process since it can be used to evaluate
prototypes or specifications for the system, which usually cannot be tested on users.
Some common usability inspection methods include cognitive walkthrough, which
focuses the simplicity to accomplish tasks with the system for new users, heuristic
evaluation, in which a set of heuristics are used to identify usability problems in the
UI design, and pluralistic walkthrough, in which a selected group of people step
through a task scenario and discuss usability issues.
 Usability testing – testing of the prototypes on an actual user—often using a
technique called think aloud protocol where you ask the user to talk about their
thoughts during the experience. User interface design testing allows the designer to
understand the reception of the design from the viewer's standpoint, and thus
facilitates creating successful applications.
 Graphical user interface design – actual look and feel design of the final
graphical user interface (GUI). These are design’s control panels and faces; voice-
controlled interfaces involve oral-auditory interaction, while gesture-based interfaces
witness users engaging with 3D design spaces via bodily motions. It may be based on
the findings developed during the user research, and refined to fix any usability
problems found through the results of testing.[4] Depending on the type of interface
being created, this process typically involves some computer programming in order to
validate forms, establish links or perform a desired action.
 Software Maintenance - After the deployment of a new interface, occasional
maintenance may be required to fix software bugs, change features, or completely
upgrade the system. Once a decision is made to upgrade the interface, the legacy
system will undergo another version of the design process, and will begin to repeat the
stages of the interface life cycle.

30. any query or advice
Please contact me
Phone no : +8801872211125
Email : mosharof.hosan@gmail.com
Facebook : https://www.facebook.com/mdmosharofhosan
Linkedin : https://bd.linkedin.com/in/md-mosharof-hosen-masud-7a891811a
Skype : mosharof.hosen1