Wireframe / Mockups / Prototypes

Tell your client Pickup a pen and paper and just show me how your
website should look like.
What are the elements you are expecting on your website.
Wireframe
• Kind of draft of the product
• A Wireframe introduces the general scheme of the app or site
• First step in the design process
• Reflect a basic view of the app or site showing the intended
placement of buttons, tabs, icons, and other elements
• When you make the wireframe, consider the end-user
• It doesn't need lots of detail
• No Color/ No Images / No videos
Questions
• Which UI elements are the most important for the user?
• Which elements are a secondary consideration?
• How are they going to be arranged?
• What content will appear on the page?
Mockup (blasmiq)
• Second Step of Design
• How the objects are going to be arranged, but see their
shapes,fonts, and, sometimes, colors.
• Here the designer decides on the button names, icon forms,
font sizes and types.
• The designer starts choosing images that will appear on the
site.
Questions
• Which colour-grade is to be applied?
• How will the navigation be organized?
• What input fields, search symbols, menu buttons, and
other components are currently missing?
• What is the common theme of your app / site?
Prototype
• Proto = Origin / Type = Form or Model
• Its generally a interactive model that show results on the
actions taken
• The prototype might not be exactly the same as the real app
or site, however, it should be very close.
Questions
• How will the users interact with your product?
• What is the sequence of changing screens or pages?
• What can be done in order to optimize the user
experience?
• Are there any better alternatives for representing a
particular option?
Prototyping is the best way to show your client how the final
product is going to look and function.
Git
 Add

Commit

Remote Add
Origin

Push
git --version
// check git is installed on the machine or not

git help
// help of git

Make a folder in desktop

git status
// to check the status of the folder

git init
// initialize with git
A hidden folder will created

git config user.email "samsarena@gmail.com"

git config user.name "Sambeet Kumar Sahoo"
// local username and email

git config --global user.email "samsarena@gmail.com"

git config --global user.name "Sambeet Kumar Sahoo"
// global username and email
Create one file index.html Again you need to add index.html

Check the status git add index.html

git status
now all the changes are comittied
index.html will show untracked
////
git add index.html If you want multiple files to add
git add .
Check the status
git status

index.html

then open the index.html file and re modifiy something

now Check the status

git status

it will show 2 things

1. new file: index.html (greeen)

2. modified: index.html (red)
COMMIT BRANCHES

git commit -m "first file edited, index edited" git branch

// show the branch (Master or not)
All the files get comittied
Create a local branch
If you want to create a file from gitbash git branch local

touch index2.html Swith to local

git checkout local
If you want to open that file from gitbash
notepad index2.html This all branches will create in your machine
Then do all things
If you want to see file in gitbash
cat index2.html git add .
// show all the content inside index2.html git commit -m 'done by localsam'
git push -u origin local
git log git checkout master
show log git merge local
git push -u origin master
Publish on git

git remote add origin

https://github.com/samsarena/repo123.git

git push -u origin master