a magical guide to 
your dream website!


Building your website doesn’t have to be overwhelming! Enjoy this FREE Magical Guide To Your Dream Website that will help you craft your brand’s online home! This magical guide will give you a clear vision of what makes a “good website” effective. I will walk you through the top 8 principles and techniques of a strong website and how you can use these tips and tricks when building your dream website. There’s a little surprise at the end! Let’s get rockin’!

by Alexandra Sardi // www.alexandrasardi.com

8 PRINCIPLES OF AN EFFECTIVE WEB DESIGN

1. Purpose

In order to have a successful business, you first need to establish a clear vision of what your brand is, what your call to action is, who your people are, and the “why” behind having a website. This will allow you to mindfully lead your business with your brand and audience in mind. It is important to note that having a website…


(1) …establishes CREDIBILITY! It shows the quality of your products/services, customer service care, and people will see you as a true professional. That being said, you can charge more because you are a professional!!
(2) …helps you get FOUND ONLINE through Google search and Pinterest (a whole other search engine)
(3) …can ATTRACT your dream client. You want your copywriting, layout, graphics to stand out and speak to them!

2. Simplicity

Keeping your DREAM website simple and clean is the best way to capture your audience’s attention so that they know what to do when they go to your site. There are 3 main elements that will keep your website looking fresh and modern: colors, typography and images.

COLOR:

Color plays a HUGE role in the mood and feel of a brand — it can either make your brand appear modern, trendy, and fresh or old and out-dated. It has the power to invite people in and enhances the user experience. It’s good to keep the color scheme of your brand to less than 5 colors. Focus on colors that align with your brand and the message you are trying to convey to your audience.

Need help choosing your brand color? I love LOVE the tool “Color Wheel” by Adobe. You can upload a photo, and it will pull different colors from that photo automatically. Have fun with it!!

TYPOGRAPHY:

Typography shows off the vibe and presence of your website. It gives your brand personality. Use a max of 2-3 different fonts to avoid messiness and clutter. Remember to choose fonts that are legible and easy to read for your users.

The 3 types of fonts are:
1. Sans Serif
2. Serif
3. Script

IMAGES:

When it comes to connecting and communicating with your audience, visuals is the most important aspect of your website! It allows the user to visually experience your product/services through graphics, photographs, illustrations, videos, animations, and any other form of graphics! Use these visuals to stand out from your competitors and truly capture your audience’s attention!

3. Navigation

A key thing to remember when building your website is navigation — how easy it is for users to move around your website and take action. Keeping this user interaction as simple as possible gives the user the impression that they are in control. You don’t want to lose or confuse your audience by making them click through multiple buttons to get to the information they are looking for. You want your audience to get there within 1-3 clicks. Keep it simple and straightforward! And always link your logo back to the homepage!

 

4. Grid Layout

Have you ever been to a website where everything looks so messy and cluttered…you don’t even know where to begin?! Grid based layouts will be your best friend when you build your website. Think about a clean grid structure with columns, sections, boxes, and rows that line up and will make your site feel more balanced. This will help keep your design and content organized and will honestly be more aesthetically pleasing!
See above an example of a 1-column and 3-column grid:

5. “F” Pattern

When you think of the “F” Pattern design, think about our natural pattern of reading — left to right and top to bottom. It’s all about keeping the user’s visual flow and displaying information in order of importance. This leads to visual hierarchy! We need to arrange elements of your website in order of importance (i.e. putting your tagline and call-to-action button at the very top of your website makes it very straightforward to what your user can get from your business).

You can do this through font sizes, colors, imagery, contrast, typography, whitespace and more! What’s important is to prioritize your website by outlining or making a list of what you want your user to pay attention to first! Then design your website based on your list.

6. SEO

Search Engine Optimization (SEO) sounds very intimidating – trust me – I’m guilty of having thought so myself. Turns out, it’s not so scary after learning some of the terminology and the benefits that can come from tweaking your website SEO style! SEO pretty much means the process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine. SEO can be a really complex topic to cover, so for now I’m going to break down the verbiage for you and if you want to learn more you should definitely listen to Jenna Kutcher’s Podcast Episode 177, “The Entrepreneur’s Guide To SEO: How-to, Hacks, and Tricks to Get Traffic.”

Learning The Terminology:

Key words: words you’ll be identifying as ones that you think your audience will be searching for and that you want Google to show your content in their search results.


→ Blog post title vs. 
SEO title: the blog post title is what is shown publicly to your audience and the SEO title is what search engines use to determine what the content is about.

Slug: the part of a URL which identifies a particular page on a website (i.e. www.alexandrasardi.com/project-contact).

Meta description
: what will be shown as the first few lines of text under the title where your content shows up in search results.

Image name: give your image a proper name, always use lowercase, avoid using spaces and underscores, always use a hyphen instead (Do: alex-sardi-website-guide.JPG — Don’t: IMG_1234.JPG).

Alt text
: explains what the image is. It’s important because it can be used by search engines in addition to the content on your blog.

→ SEO by YOAST: a WordPress plugin that ties all of this together. Click here to learn more. For my SquareSpace and Shopify people, those programs already include a search engine section usually at the bottom of the editing page.

7. Load Time

Have you ever gone to a website and it took a very long time to load you almost wanted to give up? The “techy” solution is to combine code into a central CSS or JavaScript file (this reduces HTTP requests) and/or to minify HTML, CSS, JavaScript (compressed to speed up their load time). The most important and easier tip is OPTIMIZING your images (size and scale). This will help improve your speed condition and load your site faster. If you upload photos to your website that are too large, it will eventually slow down your website. Learn more on How To Resize Your Images and How To Optimize Your Images on the blog to get your website up and running smoothly!

8. Mobile Friendly

Last but not least, it is important to make your website mobile friendly and responsive so that it displays properly on all devices: desktop, laptop, tablet and mobile. This means that your website must be able to adjust to different screen widths because it is now common to access a site from multiple devices with multiple screen sizes. If your website is not mobile friendly and you’re wondering how the heck to rebuild it in a responsive layout, then please contact your favorite designer guru, ME!

download my magical checklist 
to your dream website.

There is A LOT that goes into planning a website. It can get a bit overwhelming when it comes to designing your very own website, setting tangible goals for your business, optimizing for effective search engine, and staying cohesive with your brand identity. I want to make it more simple for you. I’ve put together a checklist to help you stay organized and make your DREAM website come to life! 

WORK WITH ME

Click here to complete the project submission form! 


HOME        ABOUT         SERVICES         WORK         BLOG         PROCESS         INQUIRE

This error message is only visible to WordPress admins

Error: Access Token for alexsardi.studio is not valid or has expired. Feed will not update.

There's an issue with the Instagram Access Token that you are using. Please obtain a new Access Token on the plugin's Settings page.