Pro Design without Pro Software? Hello Crello.

DesignCourse · Intermediate ·🖌️ UI/UX Design ·6y ago
Skills: UI Design90%

Key Takeaways

The video showcases Crello, a design tool for creating stunning visuals, and demonstrates how to use it for UI/UX design without professional software, utilizing its user-friendly interface, free templates, and customizable design elements. Crello is compared to Adobe in terms of design capabilities, highlighting its ease of use and versatility for social media, web, and print projects.

Full Transcript

hey everyone what's up Gary Simon of course cetra calm and today we're gonna be checking out pearl Oh calm which is this video sponsor and while this is a sponsored video I will never ever abbis I've always maintained take on a sponsorship of a product or a service that I completely do not believe in and that is completely not the case of course right here I definitely think this is going to be a tool that a lot of you can benefit from so it's basically an easy-to-use design tool for creating stunning visuals so you can use their free templates made by professionals and customize them for your own projects so let's say for instance you have your own business and you're not a designer or you're not yet a good designer and you want to really maintain a professional-looking website that could be youtube etc etc it could be print and this would be a great service for you to use for very cheap and because I'm gonna show you very shortly they have a ton of templates that are completely designed by actual professionals there are other services that do the same thing but it always looks like the the templates they offer look like they were designed by somebody who is either blind 5 years old or just never really was a designer in the first place so the really professional and modern looking and also to give them myself sort of a challenge I'm going to see if I can design one from absolute scratch using their UI design tool so I'm use I'm an Adobe guy I'm familiar with that but can I design something good we're using an interface that I really haven't used very much ever in the past and of course I think we know the answer to that because if you're a good designer you can use any software all right so check out the very first link in the description here to get started with Krell oh and let's get started with the tutorial all right so here I'm at Krell Oh in once you create your account you can get started creating designs right away and you can search right here through keyword but you can also scroll down to choose a format for your project so the first thing that you'll notice we have these tabs up here social media promotion office when you click on it'll just scroll to the different areas that you have now when I initially scrolled through these and I was checking out just the overall design of these examples I was pretty much blown away a lot of these services that I like karela that offer you know sort of templates or whatever like nine out of ten times they're just generic they look clip already these are well-designed and they clearly have either a designer or a bunch of designers who know good design fundamentals so if you're somebody who doesn't really design well but you have your own business and you want to do social media marketing or I web marketing of any sorts I and you want to have that professional look then of course you want to start with one of these templates now these in and of themselves aren't templates these are just categories so for instance if we're looking at Facebook we can see we have we have a bunch of templates that will work in the context of a Facebook post or a facebook video cover or a Facebook cover here so when you click on one of these so you're going to gain access to a ton of templates that fall within that specific eye you know sort of specifications like a Facebook event cover so just to check one of them out for instance we'll take a look at other social media like YouTube channel art so we click this we go into this new user interface and this is where you spend the bulk of your time and if you don't want to start off obviously by scratch then you can choose one of these templates right here so for instance if we choose this one it's going to show us exactly what it's going to look like and a lot of this is editable which I'll show you in a second and you can just click on these just to go through them and see you know if you like them if it's you know a good starting point for your project alright for me if we click on say this one I you can click on pretty much any element and it is editable and you'll know it's editable based on the little module that shows up here I and this has all your text options of course if you select text you can change it all up hey hi that's what I that's the best I came up with off the top of my head I'm an idiot and you can also you all the typography options are here but we also have a little bar where you can choose I control transparency in this case you can move things front to back you can duplicate and delete now if you select certain images this will change up your UI where you can change other properties I you can also flip these types of elements you can slip the background for instance this is an image so it has different effects that will apply to it very very cool so yeah it's all editable so what if you wanted to design something from scratch which I'm a designer I wanted to see if I could show you guys if I could design something that looks good using a tool that I haven't really used very much in the past I in of course the answer is going to be yes and that's the importance of understanding good design fundamentals so in doing so I'll try to describe what I'm doing in in terms of a design fundamental aspect but also show you how capable this app is even if you wanted to design something from scratch using the tools that they have all right so what I'll do is first I'm going to select everything and delete it so we have a blank slate right here from which we can go the first thing I'll do is come over to backgrounds you can see the backgrounds are split up into different tabs at the top we have photos patterns colors and uploads I think yeah let's just scroll down here and it's an infinite sort of scroll so they'll keep on loading as you go on and down the line I lets see patterns I think I want to do a pattern instead so I think I'm going to go with this one right here and when you click it it's automatically going to place it into the entire background based on the artboard size that you have chosen and for some of them it will allow you to change the individual colors where it says object colors right here I'm going to leave that there for now I kind of want to just have a background and then kind of maybe like a inner rectangle that is just white so for that we're gonna go to objects and we just click on this free box right here and I'm going to get it positioned up where we have an equal amount of white space from the but a good amount just so you can still see some of the background that's available so let's get this position up here and then just push this up and that looks pretty even just eyeballing it right around there all right next up let's make it white all right so now we can just barely see this background right here and we're gonna frame some stuff in the middle so I want a photograph I think on the left side and then we'll have some text-based content on the right side so let's go ahead to photos and you can see that this has a gallery of some of them are paid like at $1 apiece some of them are included in a Premium Membership as shown here and then you can go to free photos up here as well I'm just gonna choose one of the categories like beauty and yeah I'll I'll use this one all right so I'm gonna get this placed into basically right where the container begins and you can see when you push it over it will outline that container and then will scale up so it's taking the whole left side like that all right so now I'm gonna put some text over here somewhere text very simple we can add a heading subheading body text or photo based text I'm just gonna choose add heading text so I'm gonna say learn something all right and then of course as always as you know I'm going to do you know it I'm gonna choose montserrat and of course it is right there thank God I don't know what I would have done if it wasn't there alright so we'll say 22 no let's go to like 18 also you can change the font size easily with this little slider right there let's move this up and I think I'm gonna go a little bit trendy we're not gonna stick this over here in its own container we're gonna have an overlap which you can do that as long as you still have good contrast on the right and left side or whatever it's overlapping this works you can still easily read learn something alright so next up after that let's do another no actually let's do something that's I kind of like a graphic design element that's a secondary thought in these it'll be means some sort of line or something like that so we'll go to objects here and there's a bunch of different objects ton of them are almost all of them are free from what I see I and you can just scroll through you know what you want or you can choose icons which there's a ton of those you can choose illustrations I you could choose lines I've let's see here there might be a line that I want yeah one of these would work I just want to check out some of these frames stickers oh and masks is really cool as well I think I'll demonstrate that after I do the lines idea so coming back here two lines what is this one's gonna check this one out so it's just like a graphic design element that you can add into your image so what we could do I suppose I just kind of want to make it white I think I only want it to show up in this section and it just kind of adds just an extra flare kind of sticking with the theme the background I just squiggly lines and Bezier curves I think I like that let's also continue let's oh I wanted to show you the masks thing this is real cool so these are masks and let's say I chose this one notice there's like an image in it and that's because you can specify your own image that you can place inside of this predefined mask as its called so photo like if I want to put the photo in here I just put it right over here there it goes and it shows right up so that way you have I just an extra option to showcase images instead of just being a rectangle of some sort I'm not going to use that though I'm going to go straight back to text we're gonna add a body text and I'm going to type in start using design course today and and stop being such an amateur start taking yourself seriously already okay so I already had that kind of that that paragraph typed up and I'm gonna left the line that and let's see here we have open sans let's get that back to montserrat real quick where we at yep very monster rat I will take down the size let's see here line height definitely want to increase that so we can read it easier that looks pretty good right there actually let's do another type element and it'll be heading and I'm gonna make big big old quotes basically to wrap it around that element so we'll just take this let me zoom up here so I can grab this a little bit easier there we go we'll put that right there we'll take down the opacity or the transparency and then we will duplicate it will drag it over oh stop it there we go put it right there let's reset that to a hundred percent all right I might want to move these just a bit over more okay so a quick tip don't select it and then try to move it just select it and move it like that first there we go alright and yeah I actually kind of like this you take all three can hold shift and move them around like so to get it centered up and this is pretty much all I want to do now I think this background right here is a little bit too it's coming out too much it's it's taking away from the core so we can change these colors individually I kind of want to make it just grayscale I think so what we'll do is I'll take the white background and we'll make it kind of gray just to dim it out a little bit there we can already see this as a more solid container the white portion because we've created contrast around the entire thing this looks pretty good already but you know let's just go ahead and make it a little bit more monotone in a sense actually that looks real good right there let's see what let's see if we do this they're actually kind of like that and there we go I think that's a pretty solid design from scratch completely using this tool which is obviously very capable all right so hopefully you enjoyed that if you did make sure to check out Cruella comm which is this video sponsor once again without the sponsors I wouldn't be making my youtube videos I and of course also I really believe in them as well because as you saw the the designs are top-notch all right so check out the first link of the YouTube description and I'll see you guys real soon good bye [Music] [Music]

Original Description

Check them out! https://crello.com/offers/30-limited-offer -- With Crello, everyone is a designer! Hands down the easiest way to create any, literally ANY style graphic for any and all types of social platforms as well as graphics for prints, e-books, business cards, posters, flyers, whatever you can dream, you can make it. BTW especially for you, there is an extra discount, just follow the link below. https://crello.com/offers/30-limited-offer #crello #socialmedia #sponsored - - - - - - - - - - - - - - - - - - - - - - Join my Patreon! https://www.patreon.com/designcourse Subscribe for NEW VIDEOS! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from DesignCourse · DesignCourse · 0 of 60

← Previous Next →
1 Photoshop Pen Tool Tutorial (Tattoo Design)
Photoshop Pen Tool Tutorial (Tattoo Design)
DesignCourse
2 How to Design the Microsoft Logo in Photoshop
How to Design the Microsoft Logo in Photoshop
DesignCourse
3 Photoshop Gradients Video Tutorial
Photoshop Gradients Video Tutorial
DesignCourse
4 Your Guide to Layer Styles
Your Guide to Layer Styles
DesignCourse
5 Layer Masks in Photoshop
Layer Masks in Photoshop
DesignCourse
6 iOS App Icon Design Tutorial in Illustrator CS6
iOS App Icon Design Tutorial in Illustrator CS6
DesignCourse
7 Illustrator CS6 Logo Design Tutorial - Archfold
Illustrator CS6 Logo Design Tutorial - Archfold
DesignCourse
8 Photoshop CS6 3D Tutorial - Magic Tent Illustration
Photoshop CS6 3D Tutorial - Magic Tent Illustration
DesignCourse
9 How to Design a Tshirt Tutorial - Adobe Illustrator
How to Design a Tshirt Tutorial - Adobe Illustrator
DesignCourse
10 Types of Logos - Lettermark & Monogram Logo Type
Types of Logos - Lettermark & Monogram Logo Type
DesignCourse
11 Banner Design in Photoshop CS6
Banner Design in Photoshop CS6
DesignCourse
12 How to Design a Logo in Illustrator CC
How to Design a Logo in Illustrator CC
DesignCourse
13 Designing a Logo in Photoshop CC
Designing a Logo in Photoshop CC
DesignCourse
14 1. Launch & Market a Web Based Business - Introduction
1. Launch & Market a Web Based Business - Introduction
DesignCourse
15 2. Launch & Market a Web Based Business - Logo Design
2. Launch & Market a Web Based Business - Logo Design
DesignCourse
16 3. Home Page Mockup in PS : Part 1
3. Home Page Mockup in PS : Part 1
DesignCourse
17 4. Home Page Mockup in PS : Part 2
4. Home Page Mockup in PS : Part 2
DesignCourse
18 5. Home Page Mockup in PS : Part 3
5. Home Page Mockup in PS : Part 3
DesignCourse
19 6. Home Page Mockup in PS : Part 4
6. Home Page Mockup in PS : Part 4
DesignCourse
20 7. Home Page HTML & CSS - Part 1
7. Home Page HTML & CSS - Part 1
DesignCourse
21 8. Home Page HTML & CSS - Part 2
8. Home Page HTML & CSS - Part 2
DesignCourse
22 Using Photoshop to Showcase Mobile Projects
Using Photoshop to Showcase Mobile Projects
DesignCourse
23 Flat Icon Design Tutorial in Illustrator CC
Flat Icon Design Tutorial in Illustrator CC
DesignCourse
24 Illustrator CC Logo Design Tutorial - A Logo That "Pops"!
Illustrator CC Logo Design Tutorial - A Logo That "Pops"!
DesignCourse
25 Logo Design Follow Along 1: Emblem Logo Design
Logo Design Follow Along 1: Emblem Logo Design
DesignCourse
26 Showcasing Logos in 3D with Blender
Showcasing Logos in 3D with Blender
DesignCourse
27 How to Design an Effective Lettermark Logo
How to Design an Effective Lettermark Logo
DesignCourse
28 Squeeze Page Design Tutorial in Photoshop (Part 1)
Squeeze Page Design Tutorial in Photoshop (Part 1)
DesignCourse
29 Squeeze Page Design Tutorial in Photoshop (Part 2)
Squeeze Page Design Tutorial in Photoshop (Part 2)
DesignCourse
30 Mobile GUI Element Design in Adobe Photoshop CC (Part 1)
Mobile GUI Element Design in Adobe Photoshop CC (Part 1)
DesignCourse
31 Mobile GUI Element Design in Adobe Photoshop CC (Part 2)
Mobile GUI Element Design in Adobe Photoshop CC (Part 2)
DesignCourse
32 Flat Mobile App Design in Photoshop CC - Weather App
Flat Mobile App Design in Photoshop CC - Weather App
DesignCourse
33 Create Reflective 3D Text in Blender (Beginner)
Create Reflective 3D Text in Blender (Beginner)
DesignCourse
34 Animating a Logo with Adobe After Effects CC (Beginner)
Animating a Logo with Adobe After Effects CC (Beginner)
DesignCourse
35 Design a Game Website Mockup in Photoshop CC (Part 1)
Design a Game Website Mockup in Photoshop CC (Part 1)
DesignCourse
36 Design a Game Website Mockup in Photoshop CC (Part 2)
Design a Game Website Mockup in Photoshop CC (Part 2)
DesignCourse
37 Photo Manipulation Tutorial in Photoshop CC (Beginner)
Photo Manipulation Tutorial in Photoshop CC (Beginner)
DesignCourse
38 Advertising Illustration Tutorial in Photoshop CC
Advertising Illustration Tutorial in Photoshop CC
DesignCourse
39 Perspective Warp Tool Tutorial in Photoshop CC
Perspective Warp Tool Tutorial in Photoshop CC
DesignCourse
40 Free Giveaway Contest.  (WiseBanner Banner Maker).
Free Giveaway Contest. (WiseBanner Banner Maker).
DesignCourse
41 Design an Animated Loading/Download Icon (GIF)
Design an Animated Loading/Download Icon (GIF)
DesignCourse
42 Contest Winners (WiseBanner)
Contest Winners (WiseBanner)
DesignCourse
43 Model & Animate a 3D Push Button in Blender (Beginner)
Model & Animate a 3D Push Button in Blender (Beginner)
DesignCourse
44 Mega Tutorial - iPhone Breathalyzer - Project Introduction
Mega Tutorial - iPhone Breathalyzer - Project Introduction
DesignCourse
45 Part 1 - iPhone Breathalyzer - Blender
Part 1 - iPhone Breathalyzer - Blender
DesignCourse
46 Part 2 - iPhone Breathalyzer - Rendering & GUI Design
Part 2 - iPhone Breathalyzer - Rendering & GUI Design
DesignCourse
47 Part 3 - iPhone Breathalyzer - UI Animation in After Effects
Part 3 - iPhone Breathalyzer - UI Animation in After Effects
DesignCourse
48 Part 4 - iPhone Breathalyzer - Website Design in Photoshop CC
Part 4 - iPhone Breathalyzer - Website Design in Photoshop CC
DesignCourse
49 Part 5 - iPhone Breathalyzer - HTML Part 1
Part 5 - iPhone Breathalyzer - HTML Part 1
DesignCourse
50 Part 6 - iPhone Breathalyzer - HTML/CSS Part 2
Part 6 - iPhone Breathalyzer - HTML/CSS Part 2
DesignCourse
51 Part 7 - iPhone Breathalyzer - HTML/CSS Part 3
Part 7 - iPhone Breathalyzer - HTML/CSS Part 3
DesignCourse
52 Part 7 - iPhone Breathalyzer - Finishing Touches
Part 7 - iPhone Breathalyzer - Finishing Touches
DesignCourse
53 Square Space Logo Maker - C'mon People.
Square Space Logo Maker - C'mon People.
DesignCourse
54 Design a Bloody Knife in Photoshop CC
Design a Bloody Knife in Photoshop CC
DesignCourse
55 Typographic Poster Design Tutorial in Illustrator (Part 1)
Typographic Poster Design Tutorial in Illustrator (Part 1)
DesignCourse
56 Typographic Poster Design Tutorial in Illustrator (Part 2)
Typographic Poster Design Tutorial in Illustrator (Part 2)
DesignCourse
57 Modern Business Card Design in Illustrator CC (Part 1)
Modern Business Card Design in Illustrator CC (Part 1)
DesignCourse
58 Modern Business Card Design in Illustrator CC (Part 2)
Modern Business Card Design in Illustrator CC (Part 2)
DesignCourse
59 Parallax Tutorial using Parallax.JS
Parallax Tutorial using Parallax.JS
DesignCourse
60 Interview: Andrew Price of BlenderGuru.com
Interview: Andrew Price of BlenderGuru.com
DesignCourse

This video teaches how to use Crello for UI/UX design without professional software, covering the basics of creating stunning visuals, customizing templates, and designing for social media and print projects. It highlights Crello's ease of use and versatility, making it accessible to non-designers. By following the steps outlined in the video, viewers can create professional-looking designs without extensive design experience.

Key Takeaways
  1. Create an account on Crello
  2. Search for templates by keyword
  3. Choose a format for the project and access templates for that format
  4. Customize a template for individual projects
  5. Add text to a design
  6. Choose a font and adjust font size
  7. Add images and graphic design elements
  8. Use masks to create custom image overlays
  9. Duplicate and arrange design elements
  10. Duplicate an element
💡 Crello's user-friendly interface and customizable design elements make it an accessible tool for non-designers to create professional-looking designs without extensive design experience.

Related Reads

📰
How to get started with Web Accessibility in 2026
Learn how to get started with web accessibility in 2026 and improve your website's usability for all users
Dev.to · Josefine Schfr
📰
AI can accelerate every stage of design. It cannot own the handoffs.
Learn how to leverage AI in the design process while maintaining accountability and evidence-based decision making
Medium · UX Design
📰
Why Most Problem-Solving Fails: The Power of "Understanding First"
Learn how to avoid solving the wrong problems by prioritizing understanding first, a crucial step in effective problem-solving
Medium · UX Design
📰
The Invisible Architect: Why Human-Centered Design is the Difference Between Friction and Flow
Learn how human-centered design can reduce friction and improve user experience in digital products
Medium · UX Design
Up next
How to Build a Doctor Appointment Booking Website in WordPress | CLDoctor Theme
Quick Tips - Web Desiign & Ai Tools
Watch →