Modern Geometric Website UI Design

hello how is it going i hope you’re doing
fine in this tutorial we will create an

abstract geometric ui design with inkscape let’s
begin alright first make sure you turn on this

enable snapping this very helpful when you work
with the grid. so just click it and snap to the

page border for making the background. just click
it then go to rectangle tool, click this icon

you see this tooltip just drag it down to here

change the color to white this is for the
background click this and duplicate another

one for our square grid later, press CTRL+D then
i’m pressing D take the dropper tool and change

the color to this, or you can input the color code to
here then let’s divide it by 6 from our page size

go to here and change it to pixel and on the
width you can do math in here, so divide it by 6

then make it perfect square for our grid so
i’m just gonna copy this number paste in here.

duplicate it by pressing CTRL+D duplicate
it by 3×3

just pressing CTRL+D then move it
down here and this two press CTRL+D

and this

make the page fit with the square so in the document
properties go to file > document properties you can

also do math in here input the size of this square
multiply by 3 and you get the size just close it

just make this white background to fit to the page

all right next let’s change
the color so click this

and i’m pressing D to activate the dropper tool, change
color to this, and do the same for another one

this to this color

now the fun thing just play with the shapes so
i’m just going to create a circle in here go to

your circle tool click this and on here hold CTRL+SHIFT
while scaling to make it proportional size

then change the color to white we’re going
to make a clipping mask so i’m just going

to duplicate this square press CTRL+D then hold
SHIFT then click the circle and right click choose  set clip

make another circle in here so with
circle tool again hold CTRL+SHIFT while scaling

around this and i’m pressing D to change
it the color to this and make it align to

the center of the square so press F1
and hold SHIFT then click the square

and on this align distribute objects just
click this and change the relative to last selected

  100 Websites & Apps To Make MONEY For FREE

because our last selected
is the square and click this icon

then for this part we want to divide it
with bezier tool press B on your keyboard to

activate the bezier so then on the corner
click this and connect it to this corner

select the line and the square

go to path > division. so now you can see
it’s now become a slicing part just delete this

then for this part, create a dotted circle with
circle tool again hold CTRL+SHIFT around this just a little

change it to white color, press F1 and press
CTRL+D to duplicate move it on here, click it again

select this three circle by holding SHIFT
then click. press CTRL+D to duplicate again

place it on here and duplicate again place it
on here just group the circle then press CTRL+G

make it align to the center of the
square, for this we’re going to create

the slice effect like this
with bezier tool again press B

and just connect to the corner to corner and
right click to release press F1 and hold SHIFT

and click the square and go to path > division
all right just throw away this part

and i’m going to duplicate this by pressing
CTRL+D then press H to flip it horizontally

and change the color to this color move it
to the bottom press F1 and click this icon

and for this i’m just going to make inner square
press CTRL+D and hold CTRL+SHIFT while scaling

and change the color to this color. make a
slicing part again in here with bezier tool again

press B and connect corner to corner then select
the back of it and go to path > division

then change this color to this color, create some
circle in here and change the color to this color.

for this with circle tool again
click this hold ctrl SHIFT while scaling

change it to white color and
duplicate another one press CTRL+D

and scale it up around this and we’re going
to make a clipping mask so just duplicate

the square press CTRL+D click the
circle right click > set clip

for these two make a clipping mask press CTRL+D
and click this right click choose set clip

and let’s change the color to this color

if you cannot see the white circle it’s because
it’s in the back, so just send it to back

and for last make it slice again with
bezier tool again connect your corner to corner

  How to Make a Website in 10 mins

and select these two and go to path > division
and just delete this add some circle in here

next let’s bring the pattern in here so i’m
just going to duplicate this by pressing ctrl d

and move it on here then go to this edit objects
go to the pattern and change the pattern to  wavy

i want to change this pattern to this blue
color, so right now you cannot change the color

if you change the color it’s become the plain
solid color so if you want to change the pattern

to this blue you have to go to the object > pattern
and pattern to object change the color to this

color make it become pattern again by going
to object > pattern > object to pattern. or you can

see my previous video about how to work with the
pattern, it’s full explanation and with the sample

so because this is in pattern right now so just
gonna scale it by pressing CTRL+SHIFT and press F2

you see this handle just drag to here like
this. all right and you can drag to here too

then make a clip with
the shape just move it to here

make sure the triangle in the front so
just move the wavy line to the bottom

click this then select these two
and right click > set clip

i love that one, add more in here see i’m just
going to duplicate this square press CTRL+D

and move it on here and go to pattern
again click this and change it to the

polka dots medium. because this is a pattern you
must edit the actual objects by going to object >

pattern > pattern to object. and now
it’s become the object so i’m just going

to make it fast by going to group it and
make a clipping mask later, press CTRL+G

to group and change the color to this red make it
in the middle of the square by selecting this and

this square and go to this aligns and distribute object
make it last selected, and click this icon

all right do you remember how to select the bottom
object? just by holding alt + then click. click again

and now you see it’s now selected the
polka dots. bring it to the front click this

just make one step down below this circle

make a clipping mask by clicking the
yellow square by pressing ALT+CLICK

then press CTRL+D to duplicate and select
this polka dots, right click > set clip

  How To Build A Website in 2021

and for the last we’re going to create the heading
and the web menu so go to this text tool and type

and change the font to this

and scale it up

reduce this spacing by pressing T and select
all, and go to this option just reduce it

change the color to this. let’s create a sample
Lorem Ipsum text by going to extension text and

choose the Lorem Ipsum. let’s reduce the number of
paragraphs, and the sentence program by 2.

then apply and close. bring up the text to here just
gonna delete some and change it to the Roboto

make a light one, scale it down by
pressing CTRL+SHIFT it on here

change the color to this color
you can bring the ruler, so just

drag this to here. and just make it neat

for the button with rectangle tool click
this and on here just drag it like this

you can round the corner by dragging this
change the color to this color let’s type

make it same size as the paragraphs
can copy this size to here

scale it this down too align it to the center

for the menu so just make a ruler in here

and type

change it to

and press CTRL+D to duplicate

duplicate again, change the color to this color create
a rectangle to make it as active menu. click this

and let’s make it a flat rectangle
change the color to this color

duplicate this by pressing CTRL+D
then click this let’s drag it to the

to the edge of the page on this and change
the color to this color and press F1

then send it to the lower back. you can hide
the guides by going to view > click this guide

to turn off. or by pressing shift and
straight line on the keyboard in the backslash (SHIFT+|)

for the bottom i’m just gonna duplicate this
press CTRL+D and place it on here, change it to

and with the rectangle tool click this, make
it around this just make it to the corner

and change the color to this color
then press F1 send it to the back

hope you enjoy this tutorial keep explore the
geometric pattern and just play with the shape.

i’m Zakey from Zakey Design create
something good today! thanks for watching

 

You cannot copy content of this page