PRO Vs AMATEUR Website Design (With Examples) - Sottotitoli bilingue per YouTube

PRO Vs AMATEUR Website Design (With Examples) - Sottotitoli bilingue

What if I told you the difference between a professionally designed website and an amateur one wasn't massive?

That the difference between boring and beautiful actually came down to a few key strategies?

Well in this video I'm going to share those strategies with you by redesigning five websites that members of my design community sent to me.

I'm going to walk you through step by step how to fix the most common design mistakes and create beautiful websites easily.

We're also going to take a look at real award-winning example websites to model for these redesigns.

So our first design comes to us from Chris, the founder of Room Bricks.

He asked me to review the site because he doesn't have a whole lot of design experience.

And I have to say for a non-designer you did a good job.

I the colors, the font choice and their weights are really nice.

I like the drop shadows around this graphic.

and overall it's a decent design.

But there is definitely some room for improvement.

The first thing is that this graphic is just a static screenshot,

and it takes up about 60% of the section, which is making our text feel a little cramped.

And since that's the thing we want our visitors to read first, we probably want to give it some more space.

The logo and nav menu are also a little bit bigger than they should be, and these all caps menu items competing for visual attention.

Also, we can probably make better use of this empty space here, but some sort of social proof like company logos or a testimonial.

So I want to model your redesign after Cardinal,

which is a venture-backed software startup with a really modern look and feel to their website.

As you can see, everything is centered around the main headline, so visitors know immediately what problem they're solving.

Also, they don't just have a still graphic they've got a full video demo.

So want to use this kind of layout to help Roombric's website grab attention quickly.

So let's get started with our redesign.

The first thing I want to do is match the same off-white background that you had in the original because I think it's a great color.

Next we're gonna add in our headline and I'm gonna rewrite it so that it speaks more about what your main benefit is.

ahead and make that a little bit thicker then size it up to 96 pixels and finally center it.

Like I said I want this layout to feel a lot more modern so everything we're going to do is going to be centered.

That doesn't mean that your website has to look like this.

I just think it works well for this kind of software company.

So we're going to add in our buttons and I'm going to make the button text a little bit thicker and a little bit smaller.

Now we can add a frame around it and set the background to a nice blue gradient.

Then we can go ahead and change the color of the text to white and give this button a nice round corner.

I'm also going to set a drop shadow just to give it a little bit more flair.

Then I'm going to copy this button over so we can have our second call to action right beside it.

And I'm going to give that button a nice deep blue color to give it some visual contrast.

Last thing I want to do with our main container here is just put in some company logos for some social proof.

Next let's put our graphic in and I'm actually going to put this below our headline just peeking into the frame from the bottom.

And then I'm going to add in a play button because most software companies opt for a video or interactive demo.

instead of still images.

Now going to work on the nav bar and start by adding in our logo here.

Then we're going to add in our menu items and just make them a little bit smaller than what you previously had so they don't compete for too much visual attention.

Next up we're going to add in our sign up and login buttons and scale them to be a little bit smaller than the call to action

buttons.

Now let's add in some auto layouts, make sure everything is nice and centered with enough space on each side to look good.

And finally, I think we can add a little bit of flair with this cool grid background.

So our redesign is now complete.

Let's check out the before and now the after.

So Chris, I hope this redesign makes sense for your brand and I was able to help you out.

By the way,

if you're a designer, that wants a of free fonts, color palettes, plugins, design inspiration, and lessons, then check out the DesignSpo newsletter.

Every I email you free resources to level up your designs and improve your workflow.

So if you're interested in that, click the first link in the description below.

Next up we've got a design from Amy, who is a personal kickboxing coach.

She said she's struggling to make her website feel professional.

And she asked me if I could do anything about the layout and the colors.

I definitely help out with that, but I want to start by pointing out some positives.

First, I love the picture that you chose.

We'll definitely find a way to use that.

I also like the tagline custom training permanent growth.

That's exactly what a lot of people are looking for in a personal trainer.

And I also love the idea of calling the visitors training a journey.

It definitely adds to the idea that you're a trusted coach who can really help out her clients

So I want to find ways to really bring out all of these positive aspects of your design and fix some issues like this blank white space

Top or how your social icons have different styles and of course updating it to look more professional So for some inspiration,

we're gonna take a look at the Fenris,

Jim and Berlin, which is one of the most profound and award-winning gym websites in the world.

It's got a really cool modern tight face,

an action-packed photo, and everything in the design perfectly captures the energy of their style of training.

Now we're gonna use this as a jumping off point,

but I'm not gonna try to turn your website into a grainy black and white fight club wallpaper,

because that's not the vibe I'm getting from your business.

Okay, so let's get into the review.

The first thing I want to do is take your picture and just set it to take up the entire frame.

I to put you front and center in the design because for personal brands a big face helps people know who you are and what you're like really quickly.

Then going to add in a dark gradient over top of your picture and blend the dark side with the punching bag so we have some space to put our text.

So let's go ahead and create that headline now.

using the same font that Fenris used on their website.

Let's set the size to 128 pixels and the height to 100%.

And I'm just gonna go ahead and rewrite the copy a little bit to focus more on what you do.

But I do like your original tagline.

So I'm gonna use that as a superscript.

And the font I'm using for this one is overused growth test.

Cause looks great at smaller sizes.

But it's still got some personality.

Then gonna create another block of text underneath our headline that explains who you are and what you do in more detail A lot of the times we forget that visitors don't know what we know

about our business So we have to tell them exactly how we can help them underneath that

We're gonna create our first button and since I'd like to tagline start your journey

That's what we'll have our button say and since you have for a color update,

we're going to change your button from this bright teal to an orange because it matches some of the highlights in your picture and because black and orange is just a classic

color combination, especially for personal trainers.

I also want to add some lightness inside of the button and a subtle drop shadow.

Let's just copy that over and have our second call to action be your free training program.

have two options here, you leave it as a second button, or you can make it a pop-up on your website.

I've had a lot of success with pop-ups, but if you don't like them, then no worries.

Finally, we'll make our navigation bar, and instead of your full logo with your tagline,

since we already have your tagline here, I'm just gonna go with a word mark.

Then over on the right we'll add in your menu and the social icons.

making sure to keep everything nice and consistent.

Then gonna add in a subtle glass effect by adding in a white background set at 25% of pasting and some background blur.

So there you go, Amy, this was your website before, and here's what it looks like after.

Before, after.

Next up, we're redesigning FireSpark Creative, which is a social media agency for creators.

They asked me if I could.

clean the design up a little and make it a more modern because they haven't had a website update in about seven years.

I can definitely help with that so let's start with what I want to keep from this design.

First I love the orange color scheme I definitely want to retain that.

I also like the idea behind your headline be the signal not the noise.

We definitely want to highlight how you help creators grow their brands.

And I think we can replace this grac- with something more specific to that message while also directly calling out

your ideal customer somewhere by saying we're an agency for creators.

So for our example I want to show you how a multi-million dollar startup does exactly this in a really cool way.

This is passion fruit and they've got exactly what we're looking for.

They've got a really modern look, they're speaking directly to their ideal customer, they've got social proof and they've design just looks great.

I really love the floating graphics with a heavy shadow, I definitely want to use that.

It's probably a little too busy for what you asked for,

so we're gonna tone it down a bit,

but this is a great jumping off point from one of the best websites on the internet right now.

So let's get started with our own redesign.

We're gonna kick it off with a headline in the middle, and we're gonna choose a slightly quirky font for that extra bit of personality.

Although it's still going to look great at bigger sizes for our heading and smaller sizes for our subtitle.

Adjust weight to make it a little bit more bold and bring the line height down to 100%.

While we're here, I'm also going to rewrite the copy to focus more on what you do and how you help your ideal customer.

Right now it's looking a little bit boring so I want to bring in some of that orange and

I'm going to do that with a bit of text.

right over top of our headlight.

That really solidifies the main benefit of your services.

And going to copy that down, reduce the font weight, and bring the line height up, as well as the size to create our subtitle.

Next, I'm going to frame all of those together and space them evenly apart.

Underneath that container, we can also go ahead and create our buttons.

The first is going to be orange,

and we've really been in an orange kick today and it's gonna prompt the visitors to book a call with you.

I'm gonna use an effect that I use on my own portfolio and create a white shadow inside of the button

from the top and a darker shadow on the outside from the bottom.

Just add that extra bit of realism that makes you want to click it.

Then our second button is gonna be white within orange border and that can go right next to our first button.

Frame those together, and set the spacing between our two frames to 48 pixels.

Next up, let's get started on our graphics.

So idea I have is to basically combine social proof with some cool images to solve two problems at once.

So I wanna have floating case studies surrounding this text.

Now I don't have access to your case study,

so I'm gonna put in some filler ones, and you can replace these with whatever you want.

So we've got our images in place here.

Let's ahead and add some rounded corners, a light drop shadow, and then a heavy drop shadow that's more like a border.

Then around these graphics we're going to add little frames that just emphasize some goals that FireSpark has helped these creators reach.

Pull in some icons and have a tiny bit of label text over top of the main metrics.

Alright, I think that looks pretty good.

Now let's add in our nav bar.

The original one was already fine.

We're just going to move the menu over to the right,

remove a few superfluous links, and make our last link a button that's modeled in the same style as our main call to action.

It's coming together now, but there are some things I think we can add to take the designs at the next level.

First, I want to add in a dot grid behind the main container and use an oval to mask out the corners of the dock grid so that we have this nice textured

effect that doesn't just end abruptly.

I also want to bring in two more ovals.

Set one of their colors to orange and the other to blue.

Then I want to bring their opacity way down and set the layer blur to 150.

So we've got this really cool light gradient effect that works well with our graphics and the doc grid.

Finally you had some benefits just barely peeking into the hero here so I want to replicate that with three frames that have the same shadows as our

case studies and a gradient that gradually transitions from white to blue to signify that we're moving past the hero into the next section.

We're not actually going to design this whole other section because we have more people to help but I did like the effect in the original design and how

some version of it here that look great.

So here you go, this is the final design for Fire Spark Creative.

I hope you like it and it fits into the vision you had for your brand.

Here's the before and here's the after.

Our next design comes to us from Sam who runs Forever Photography.

She said she built the website in an afternoon from a template and would love to get it redesigned because she's not a designer.

Using a template is okay if you don't have design experience and I think you did a pretty decent job.

You've got your logo, all your links and some good info by your business.

But there are a lot of limitations to using a template too.

First they're designed to be generic.

I can see this layout also being used for a gym or a or a lot of different kinds of businesses.

So I want to give you something truly unique that really says wedding.

photographer.

And a great example of the unique style we're going for is the wedding photographer Maori Guillou's website designed by Leo Leo.

I love the Polaroid frames that surround these pictures.

I also love that there's a bunch of pictures and then we can see some candid shots as well as some staged ones.

The background is also a nice off-white which I think brings out the white wedding dresses.

That being said, I think this layout is a little too out there for our redesign.

So we want to take aspects of this website like the colors,

the use of a serif typeface or the polaroid idea and turn that into something more classic and timeless.

Okay so let's get started.

The thing I want to do is set our background to a nice light tan.

Then we're gonna create our headline, scale it up to 72 pixels, set the line 9295.

percent and pick out a really classy timeless font and then we're gonna write our headline something that really says forever photography.

Let's just drag that down so we can make our subtitle.

Now whenever you're making a subtitle and your headline uses a display font which is a font that only looks good at bigger

sizes you don't want to use that same font on your subtitle.

or any smaller text you have on the website, just because it's not going to look good.

So going with this nice and normal looking fonts to maximize legibility at smaller sizes.

Now we can drag that down one more time, so we can create our button.

I'm going to change the copy here as well, because I think Read More doesn't make a whole lot of sense for a photographer.

So instead of Read More, I'll have the second button on the right say view your portfolio.

Okay, I think that looks good.

Next I want to add a little bit of copy underneath the buttons and throw in some check marks.

Just to let visitors know the perks of working with you.

My sister just got married and I know choosing a wedding photographer is very conditional on

things like if they travel so I want to make sure people are aware of that.

Next up let's design the nav bar,

so we're going to bring in your logo and make it a little bit smaller just so it can fit in this top left corner.

Then we're going to bring in our menu on the right with the last menu item being a button to get in touch.

If you're noticing a lot of similarities between the designs like how the nav generally looks

the same or how we usually have a headline subtitle in two buttons, then that's good.

These are solid design principles that you can use in your designs.

So let's add in some wedding pictures.

And what I want to do here is mimic the look of a Polaroid photograph, just like my re-hat in her website.

So we're going to add in a custom border around these images of 18 on the top and the sides and 72 on the bottom.

Then add in a tiny bit of roundness and drop shadow for added realism.

With this extra real estate here, I it would be cool to add in the names of each couple.

And we don't want this text distracting visitors from reading the headline, we can go ahead with a really cursive, almost illegible font.

That's because our brains naturally read from left to right, and they read bigger, bolder things first.

So we can get this cool handwritten effect without attracting from our headline.

Now just going to duplicate this a few times, replace the images, and place them in an off-kilter row to the right.

So you have it, Sam.

This is the forever photography redesign.

I hope this direction makes sense for you and you found this helpful.

So here's the before and here's the after.

Finally, we're going to take a look at a design submitted by Greg for Boston Speech.

coaching.

He said he feels like the design is cluttered and he wants everything to pop a little more.

So I think the reason you're having this problem is that this logo is blocking her face and because our eyes want to focus on faces the logo just seems like clutter which is why I think

you made it bigger to compensate for that as well as added a really big drop shadow to this text here.

Luckily there's a lot working in this design, you've got a great image, pretty good copy, and a strong call to action.

So think with some small tweaks, we make this a really great website.

So for some inspiration, I want to take a look at how famous speaker Martin Moore his website.

The big difference is that the main block of text here is fully visible, even though there's a video playing in the background.

His logo is only in the top left, and the menu is on the opposite side.

This is a good starting point.

but I do think we need more than a headline in our design and I also want to keep the great

call to action that you have.

But main takeaway from Martin's website is that we don't want any images or video we use to interfere with any other part of the design.

So let's get into it.

The first thing I want to do is bring this picture back because it's such a great photo

and I want it to be the focus of our design.

To do that we need to put our main headline on the left and I love the fond you used here.

So going to use the same one but make it a little bit bolder and a little bigger.

We're also going to decrease the line height to 100%.

I'm also going to reword the headline slightly because the phrase speak up can seem a little bit harsh to visitors,

especially if they're naturally soft spoken.

Once again, copy that down to create our subtitle.

We're going to set the weight to regular.

the sizing to 24 pixels and the line height to 125%.

And we're going to leave the copy as it is, I think this is perfect.

Finally, we're going to create our button.

Now just for fun, I want to do something a little unique with this button.

So I'm actually going to create a custom shape made out of two rectangles and a circle.

Then I'm going to flatten them and put our text in as well as an arrow icon.

And then finally add a linear overlay of white and a linear gradient on the stroke to give

it a little bit more of a stylized effect.

Then to add in some ratings underneath that.

This is totally optional, but my design research does show that social proof in the first section of your website does increase conversion rates.

Finally to make this all pop, like you said.

We're going to add in a blue gradient going from the left to the right,

so that our text container is visible against the image,

and our image is still the main focal point of attention, because the gradient leads the eye from left to right.

Finally, let's add in our navigation.

In the original design, you had your logo in two places, the nav and the main section.

I left it out of the main section, so we're just going to have it.

in the nav and I'm also going to choose a darker color so that your logo stands out more.

Next I'll add in our main menu and make the final menu item a button to contact you.

So here you go.

This is the final design I came up with for Boston Speech Coaching.

Here's the before and here's the after.

So I hope you found that helpful.

If you want to learn even more essential design principles then check out this video on the 20 Design

Lingua di traduzione

Seleziona la lingua di traduzione

Sommario video Esporta sottotitoli Valutazione orale

Sblocca altre funzionalità

Installa l'estensione Trancy per sbloccare altre funzionalità, tra cui sottotitoli AI, definizioni di parole AI, analisi grammaticale AI, parlato AI, ecc.

Compatibile con le principali piattaforme video

Trancy non fornisce solo supporto per sottotitoli bilingue su piattaforme come YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera, ma offre anche traduzione di parole/frasi AI, traduzione immersiva a tutto testo e altre funzionalità per pagine web regolari. È un vero assistente per l'apprendimento delle lingue tutto in uno.

Tutti i browser delle piattaforme

Trancy supporta tutti i browser delle piattaforme, inclusa l'estensione per il browser iOS Safari.

Modalità di visualizzazione multiple

Supporta modalità teatro, lettura, mista e altre modalità di visualizzazione per un'esperienza bilingue completa.

Modalità di pratica multiple

Supporta dettatura di frasi, valutazione orale, scelta multipla, dettatura e altre modalità di pratica.

Sommario video AI

Utilizza OpenAI per riassumere i video e comprendere rapidamente i contenuti chiave.

Sottotitoli AI

Genera sottotitoli AI precisi e veloci per YouTube in soli 3-5 minuti.

Definizioni di parole AI

Tocca le parole nei sottotitoli per cercarne le definizioni, con definizioni alimentate da AI.

Analisi grammaticale AI

Analizza la grammatica delle frasi per comprendere rapidamente il significato delle frasi e padroneggiare punti grammaticali difficili.

Altre funzionalità web

Oltre ai sottotitoli video bilingue, Trancy fornisce anche traduzione di parole e traduzione a tutto testo per pagine web.