Web Design with Flo(W) – DAY 18 – Responsive design

Web Design with Flo(W) - DAY 18 - Responsive design

Website looking all jumbled on mobile?
I can’t think of anything worse!

Except maybe your laptop freezing and loosing all your work. But hey, let’s get back to our topic of the day.

So now that you’ve developed your design for desktop, it’s time to make sure it looks good on other screen sizes as well.

Just go through each page you’ve designed and toggle between tablet and mobile screen sizes to adapt your design.

With most people using mobile devices more than desktop nowadays, I’m sure you understand the importance of a responsive website design!

___

Are you stuck or do you want someone do it all for you?
Send me a DM 📲
___

Web Design with Flo(W) – DAY 17 – Building your website

Web Design with Flo(W) - DAY 17 - Building your website

Now you’ve got hosting sorted, it’s time to start building your website and bringing it to live!

The first obvious step is to install WordPress. If you picked a WP-specific hosting provider, you can just follow their set-up wizard.

Once you’ve done that, go to Plugins > Add New and search for Elementor.

Just like you did with creating your design, start by building the homepage first. Once you’re happy with it, you can move on and create the other pages.

Tip: If you have an email list sign-up form, don’t forget to link it to your email marketing software!

___

Are you stuck or do you want someone do it all for you?
Send me a DM.

Web Design with Flo(W) – DAY 16 – Hosting

Web Design with Flo(W) - DAY 16 - Hosting

Let’s get you some hosting!

In order for you to develop your website on WordPress and get it ready to launch, you first need to choose a hosting provider.

What the h*ll is hosting, I hear you asking?

Well, let’s put it simply.
Just like you pay rent for your appartment and the address is what tells people where you live, the hosting provider is a server where your website lives and the domain is taking users to the right address 👩🏻‍💻

Do some research around your needs and which hosting provider would suit you best, but generally if you’re building a WordPress website, I’d advise you to go for a WordPress-specific hosting provider.

Personally, I like using SiteGround for all my websites (➡️ sign up here: https://bit.ly/3rGi86s).

💡 Tip: While you’re still working on your website, you don’t want anyone to accidentally stumble on it and see your work in progress. Make sure you first develop your website on a temporary staging domain (which you’ll get through the hosting provider) and migrate it to the live domain once you’re done – I’ll let you know when!

Web Design with Flo(W) – DAY 15 – Designing your website

Web Design with Flo(W) - DAY 15 - Designing your website

Now that we’ve covered all the basics, today you’re going to define the visual aspects of your website.

Have a look back at the mood board you created for the art direction step. You’re now going to select specific items that are going to make up your basic tool kit.

Define every aspect that is going to be relevant moving forward: fonts, colour palette, type of visuals,…

Next, start designing the hero section of your homepage.

Tip: Spend some time trying out different design options as this is going to define the visual direction for your whole website.

Once you’re happy with the hero section, you can start designing the other pages using the same visual direction.

Don’t forget to consider what your website will look like on other screen sizes!

Tip 2: When designing your website, make sure the focus is on what is most important. Remember you can use scale, colour, position and motion to create hierarchy in your design.

Web Design with Flo(W) – DAY 14 – Design skills: visuals

Web Design with Flo(W) - DAY 14 - Design skills: visuals

Time to get visual!
Today you’re going to select your visuals.

First you need to know that visuals have different roles in design. They can help clarify information, educate your audience, evoke a feeling or just decorate.

How do you choose your visuals?
Again, there are some principles you should keep in mind:

– be clear on the role of the visual
– ensure high quality of the visual
– maintain a consistent environment (lighting, shadows,…) throughout the project
– ensure readability when combining with text
– make sure visuals follow colour fundamentals
– visuals should be an easily explainable idea
– avoid clichés

Tip: Before you upload them onto your website, make sure you optimise your visuals for the web (file size, quality, file type,…)!