10 Things to Consider When Designing Your Website...and Why They're Important

Creating your space on the internet is both exciting and challenging. Your website is a place for your dream clients and customers to find out more about you and to hopefully do business with you, so you want to ensure that your site is not only beautiful, but practical, professional, and easy to navigate. It’s no small task! I still have things I want to do to my own site to improve it’s functionality and look, so I understand the struggle. Here are ten things to consider as you set up your new site or work to improve your current one.

Here are 10 things to consider when designing your website: 1. White Space 2. Photos 3. Good Writing 4. Fonts 5. Cohesion 6. Clear Navigation 7. Contact Info 8. Social Media 9. Links 10. Call to Action. Read more about each at delightedco.com/blog


1  •  WHITE SPACE

White space is like a breath of fresh air. It’s pretty much exactly what it sounds like: the blank space on your website that surrounds your text and images. It creates a clean and uncluttered feeling on your page and helps provide a sense of direction to your visitor. Look at the two examples below.

EXAMPLE 1:

Images via Unsplash:  Pink Building  |  Pink Florals

Images via Unsplash: Pink Building | Pink Florals

How do you feel when you look at this page? Possibly overwhelmed? Everything is squished together and there’s no room for your eye to rest. The background image is busy and the logo, navigation and text is uncomfortably tight. It kinda gives me a bit of anxiety and if I visited a page that looked like this, I’d hit the back button so fast. It’s too much.

EXAMPLE 2:

10 Things To Consider When Creating Your Website. | Via DelightedCo.com

This second example is more inviting. Why? Because of the white space! You’ll notice there is space between the logo and the navigation bar, and between the navigation bar and the body of the website. Not to mention the spacing of the body text: both between the letters and the lines. You probably feel a little more inclined to start reading the text in this version as opposed to the first (except for the fact that it’s placeholder text called lorem ipsum and is not actually readable :)

2  •  PHOTOS

Photos are invaluable to your website’s success. When is the last time you came across a website with dark or fuzzy images? Maybe the color looked “off”? Even if photos on a site are bright, clear and have great color, they might have too much going on or may simply be irrelevant. What about the background? Is it clear or distracting? Depending on your site’s platform, images can also look skewed if the dimensions aren’t just right. (Side note: Squarespace keeps the dimension of your photos equal so when you resize an image, the proportions are always the same which means no skewed images. Thanks Squarespace.)

If you find yourself needing help with your images, here are some tips:

  • Crop out extra background “noise” or anything that distracts from what you’re wanting to feature.
  • Only include photos that are relevant to your product or service or brand.
  • Remove dated pics. If your photo has someone wearing a style from 15 years ago, you may find you attract the wrong clients or customers.
  • Brighten your photos with an app such as Afterlight, or in Photoshop.
  • Use quality stock photos. Google “stock photos” and download images that are free for commercial use, or buy a few. Please note: it is illegal to use photos that don’t belong to you. Be sure to read and understand the usage rights provided on any stock photo website you visit and only use images you have permission to use.

3  •  QUALITY WRITING

This is difficult. Not many of us feel that we are naturally good writers—I certainly don’t! It often feels awkward to write my thoughts for anyone and everyone to see. I’ve ripped out many pages from my old journals and Hello Kitty diaries over the years because I simply could not handle reading those ridiculous thoughts I wrote in junior high, high school, or even college. Who am I kidding, I’ve also shredded pages that were written well past my college years. I completely embarrass myself.

But whether you like to write or not, words are necessary when you're creating a website. Highlighting a process or service, adding an about page, or a creating a blog post requires writing.

Here are a few quick tips to consider when writing your copy:

  • Avoid fluff and unnecessary words. For example, here are two ways to say the same thing:

Sentence A: Try to avoid fluff and remove any unnecessary words that take you longer to get to your point.

Sentence B: Avoid fluff and get to the point.

Right? Short sentences often make the biggest impact. You want your personality and character to show in your writing so don’t be too brief or robotic-sounding, but do edit. (I’m naturally long-winded so this is particularly hard for me.)

  • Use spell check. We all make spelling and grammatical errors every now and then, but if these mistakes are a regular occurrence in your writing, it will inevitably become part of your brand. And not in a good way. So edit! I’ve heard numerous times that you should spend more time editing than you spent writing.
  • Use editing software. Grammarly or Hemingway Editor are great, free options.
  • Ask a friend or family member to edit for you. You’ll obviously want to ask someone who writes well themselves and understands the correct way to use a semicolon :)
  • If you can afford it, hire an editor. Or if you’re hiring a designer for your website, ask if she has an editing option...some designers do the editing as an add-on service when designing your site. And if not, she may be able to recommend someone who can edit.

4  •  FONTS

As much as you may want to use a cute script handwritten-type font for the copy on your site, it’s important to think strategically and realistically about the color, style, and size of your fonts. First of all, do you spend hours writing posts for your blog so that people will say “cute font”? Probably not. Don’t let font colors or style distract from the words themselves. You want to use an easy to read font that is an appropriate size and color. Here’s an example of a page with a decorative font that is not very legible.

10 Things to Consider When Creating Your Website. #4: Clear Fonts | via delightedco.com

5  •  COHESIVE STYLE

Creating a cohesive style for your website is not only fun, but it sends a message that you are professional and thoughtful in your approach to business. Some ways to make your website look “put together” are with fonts, colors, buttons, and brand elements.

  • Fonts: Choose two fonts that work nicely together, usually a serif and a sans serif that complement each other. Use an easy to read font for the body text and something equally easy to read, but with a contrasting look for the headings.
  • Colors: If you don’t already have a color palette from your designer, choose a few colors and find the hex codes for them so you can add them throughout your site. Squarespace makes this easy with their Style Editor. If you don’t know what a hex code is, you can find out more on Squarespace’s Color page.
  • Button Style: Choose a button size and style in Squarespace and keep the same size and style consistent throughout your site.
  • Brand Elements: Use brand elements such as a submark, texture or shapes to make each page feel like it belongs with the others.

6  •  CLEAR NAVIGATION

Your navigation bar is the table of contents for your site. It is usually located at the top or the side of your website and lists the pages you have on your site. Things to consider with your Navigation Bar are:

  • Titles: Each navigation link is a page title. Make sure they are understandable. You may be tempted to be cute and creative with the words you use, but the navigation bar is not the best place for that. When you have a guest visiting your site, you want her to know exactly where to go and how to find out more about what you do. Navigation titles like “Work With Me” or “Services” are clear and understandable. Versus something like “How Can I Help You” or “Get This Party Started".
  • Limit Choices: Make it easy for your visitor to find what they are looking for. You want her to know what her options are without overwhelming. Usually five links is ideal. The important but non-critical links such as Shipping Policies or FAQs would do well at the bottom of the page in the footer, and Contact, Services, and Shop would be best at the top in the main navigation bar.

7  •  CONTACT INFO

If you are a brick and mortar business like a shop or cafe, keep your physical address in the footer so visitors don’t have to go to your contact page to figure out where you’re located.

Provide a contact form or an email address where people can send you an email directly from your website. Ideally both. That way if someone is on your site but doesn’t have time to write out her message to you then and there, she can save your email address and send you a message from her own email account when she has more time.

8  •  SOCIAL MEDIA

Add all of your main social media accounts to your footer or header so they’re easily clickable from any page on your site. You never know exactly when something you have on your site will resonate with a particular person, so giving direct access to your social media links is a good idea, no matter what page they are on. This is standard in Squarespace if you set-up your Connected Accounts.

9  •  LINKS

  • New Window: When linking to a page that is not part of your website, be sure you are directing it to open in a new window. Whether it’s a link that is providing credit for a photo you used, a link to a recommended book you just read, a link to your social media accounts, anything. Anytime you have a link that takes you to another website it should open into it’s own tab or page so your page stays open in your visitor's browser. Otherwise, your links will steer readers away from your website and they may never find their way back.

  • Blog post links: I recently read Emily Henderson’s “What Goes Into a Blog Post” post. Love her so much. Anyway, she had a whole post on how her team creates a blog post and all the effort that goes into it. One of the many tidbits I got from her post was the idea of back links. It’s basically going back into old posts and linking to newer posts. I know it’s a thing, I’ve heard about it before, but she made it so approachable and normal. For example, if you wrote a blog post two months ago highlighting your favorite dining tables, and are now writing about dining chairs, you might consider going back to the original dining table post and linking to your new dining chair post and vice-versa. This not only keeps visitors on your site longer, but it provides value to your readers because you're giving them an easy reference to learn more about a subject they're interested in. It also adds new life to your older posts which might otherwise have been lost in blog land.

10  •  CALL TO ACTION

A few weeks ago I was helping a friend tweak her Squarespace website and realized the link to purchase her product was hidden behind an invisible rollover. There was no way to see the "shop" link unless you rolled over a certain part of the site just-so, or clicked the box in the upper corner for the navigation bar drop-down. 

Not good! A home page filled with beautiful product photos is worthless if your visitors can't easily access the purchase page. In this case, we added a Shop Now link right dab in the middle of the page —in a strategic and visually pleasing way, of course. Now, when her customers visit her site, they can easily click to access her product page and make a purchase.

You want your site to be beautiful, but it also needs to make you money. Be sure to provide an easily accessible link that prompts your visitors to take action.

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •

What do you think? Are there things on this list that you will start working on to make your site more user friendly and effective? I'm still figuring out the editing piece, myself. It takes lots of time and I'm never quite satisfied, but those apps I mentioned have been helping. I hope this was helpful and as always, let me know if you have any questions.

20 Reasons to Use Squarespace for Your Website

Choosing a platform for your website is a big decision. When I started Delighted Magazine in 2012, I was using Blogger. And even though I had a custom URL to make it seem more legit, it was still Blogger which only has so much functionality. I was regularly frustrated when it came to customizing and felt like I had to learn things through a lot of trial and error versus having clear instructions and an understanding of how the program actually worked. But it was free and was good enough. Until I discovered Squarespace, thanks to my sister. I gave it a try and I haven’t looked back.

Chances are, you’re wondering if Squarespace might be the right solution for your website—and it just might. Here are 20 reasons to give it a try!

Are you wondering if Squarespace might be the right platform for your website? Here are 20 great things Squarespace offers. | From Delighted Creative Co.

1  •  Simple but Beautiful Design

It’s pretty clear that Squarespace is designed by people who know what they’re doing when it comes to design. Their layouts provide plenty of whitespace and padding where necessary so your website looks professional and has “room to breathe”. There are various styles but every one of them is designed in a clean, structured way that is ideal for showcasing your work and adding customizations to reflect your company’s style. A company whose overall aesthetic is clear and pretty to look at is a definite plus.

2  •  Templates

Each template offers different features and variations. For instance, the navigation bar location, whether or not it has blog capabilities, the footer style, and so on. Squarespace offers a description and feature list for each and every template so you can compare and decide which works for you.

As you’re trying to figure out what template works for you, you have the option of loading more than one template on your site as you’re building it, and do a “test run” where you see how a certain template will look with your content. This is a great way to get a feel for different options. For time’s sake, I recommend first deciding what features you think you’ll need. Consider the look you like, the content you’ll be providing, the what your ideal client or customer may be looking for in terms of their experience on your site, whether or not you need a blog, and if so, will you need a sidebar? Once you have answers to those basic questions, review the template options and visit the sample websites that use the templates you’re interested in so you can see the template in action on a real-life website.  

Use these questions as a starting point to figure out what template will work best for you:

  1. Do you want a blog? If so, do you need a sidebar for your blog where you can have category links, an “about me” section, a search bar, etc?

  2. Do you want a website where all of your information is on one page? Or do you prefer a home page with links that direct your clients and customers to other pages on your site?

  3. Will you be selling products directly from your website?

  4. Will you be adding a lot of photos and portfolio work?

  5. Do you only need a landing page?

The Squarespace Help Guide offers additional info as you’re going through the decision process. If you’re feeling stuck, you can reach out to the Squarespace team for suggestions. They ask that you answer some basic questions for them and they’ll direct you towards some great options for your needs.

20 Reasons to Consider Squarespace for Your Website from Delighted Creative Co.

3  •  No Coding Required

It’s like a dream come true: you can have a beautiful, professional website without needing to know even one line of code. As you’re setting up your website, keep in mind that there are some limitations with what you can do to your site without code because you’re working within the boundaries of a template. If you love a particular feature from your favorite website or blog that was created from scratch on a platform using CSS and HTML, you may be frustrated when it’s not possible to recreate. For instance, a colored footer may not be an option with the template you chose. But don’t be! Consider your visitor’s needs and focus on how they’ll be using your site and rest easy knowing that for most websites, what Squarespace offers is more than enough.

The features and options in Squarespace have been well thought out and their process for adding content is super simple. I’m quite certain you will be pleased, if not ecstatic, with the final layout of your site. A place online that is all yours—and it’s easy!

4  •  CSS Can Be Added for Customization

If you do need a few customizations or if you know CSS and want to change your template at all, you can! I have limited CSS knowledge but did make a couple changes to my site using code. As an example, hover over any of the images on my site and you’ll see the Pin It button is unique. I designed the button in Illustrator and used code I purchased to add it to all of my images.

5  •  Adding Content

Squarespace uses an intuitive block system that allows you to build your website by adding blocks on your page and choosing what you want that block to do. Do you want an introduction paragraph? Insert a text block and start typing. An image? Insert an image block and upload your image. A space for your social media buttons? Insert a social media block and connect your accounts. Easy! Each content addition gives you a feeling of accomplishment.

6  •  Ease of Creating and Editing

The simplicity and intuitive-nature of Squarespace is probably one of it’s best features. Considering that most websites are constantly being updated with new content, it’s important to use a platform that makes editing and adding a simple task. Do you want to add an image? Okay, choose the image block, upload, add the description, maybe a caption, make it a link to anywhere, and Save. Simple! Do you want to add a newsletter subscription sign-up form? Place the newsletter block on your page, add your mailchimp credentials, and you’re all set!

7  •  Customer Service

Wow. The customer service Squarespace provides is amazing. Open a ticket via email or chat and you will have a friendly answer to your question within 24-hours or so. The customer service is ah-mazing.

8  •  Tutorials and Help Boards

On top of their great customer service, Squarespace has endless tutorials with clear instructions and has captured them in a super organized way. If something isn’t addressed in their tutorial pages, you will likely be able to get help via Squarespace Answers, which is a peer-to-peer community for anyone using their platform.

9  •  Price

Squarespace offers different pricing tiers which currently range from $5 to $40 per month depending on your business needs. The sites I have designed have all been between $5 and $26 per month. You can do a side-by-side comparison of the options for each price range and see what works best for you.

20 Reasons to Consider Using Squarespace for Your Website from Delighted Creative Co.

10  •  They Thought of Everything

From social media links to forms to inserting dividing lines to adding a video, it’s all a possibility with Squarespace. Yes, there are certainly some limitations, but for the most part, if you need something included on your site, you’ll be able to add it. And if you happen to know how to code, you can always use the code box to add unique content as necessary.

11  •  Built-in Tools

There are a number of tools that are built into the Squarespace platform that eliminate extra work. An example of these tools are the favicon uploader, photo descriptions, site information, and logo header. In the case of the favicon, for example, you don’t have to use a favicon generator or create a file that is exactly the right size for a favicon. Instead, Squarespace allows you to upload your image and it will add it as a favicon for you.

12  •  Sell Products

I don’t sell products on my site, but if I ever decide to, Squarespace has e-commerce options that will allow me to sell directly from my website. Some of the extra features they offer for e-commerce sites include shipping label services, inventory tracking, and accounting services.

13  •  Contributors

If you collaborate on blog posts or work as part of a team, you can provide permission to others to collaborate or contribute to your website by editing or adding new content depending on the authority you provide to them. This is helpful when you need someone on your team to add images to your gallery, or make changes to a page, or add extra items to your shop, etc.

14   •  Photo Resizing and Editing

You can resize your photos and even edit them directly in Squarespace! Talk about streamlining. I will say, I rarely use their photo editing option because the images I add to my site are ready-to-use when I bring them in, but knowing that I can tweak any image by brightening or cropping if I need to, is super valuable.

20 Reasons to Consider Squarespace for Your Website from Delighted Creative Co.

15  •  A Custom Domain is Included

When you purchase an annual subscription, your domain name is included! As long as the URL you want is available, you can request it directly through Squarespace. This means you don’t need to purchase your URL separately and connect it, although if you do have a domain already registered elsewhere, it’s easy to direct it to Squarespace, of course.

16  •  Hosting is Included

Squarespace hosts your website so you don’t need to pay for a hosting service. This is ideal because everything is connected and seamless.

17  •  Professional Gmail Account

Depending on the plan you choose, a Gmail account with your domain name may be included and if so, it can easily be set-up via Squarespace.

18  •  Content Transfer

You can transfer your content from Blogger, Tumblr or WordPress into your new Squarespace account and you can transfer your products from Big Cartel, Etsy, and Shopify. In true Squarespace fashion, step-by-step instructions are provided on their help pages so you aren’t left trying to figure it out on your own.

19  •  Responsive Website

A responsive website is one where the content on your website is created to fit and look just as great on a computer as it is on a mobile device. The content is scaled, resized and in some cases, slightly rearranged depending on the device you’re using. Website developers typically code sites to be responsive, but if you’re not creating a website from scratch, there’s nothing to worry about: Squarespace has taken care of it for you. Their sites are designed and built to work well and look great on any device you are using. There are some tips and considerations to keep in mind when laying out photos and content so that you get the best results, but Squarespace has tutorials to show you how to best do that.

And as you are building your site, you are able to view a demo version of your site as it would be seen on a tablet or smartphone.

20  •  Free Trial

You don’t have to pay to play. You can try Squarespace for two weeks, for free! You are able to build your site, see how you like the templates, add content, try their customer service, and review and and all of the tutorials without paying a dime. Once your two weeks are up, Squarespace will often allow you to extend your trial even longer if you’re not quite ready to commit. So keep checking your email for the extended offer or send an email to their customer service team with the request.

I hope this has been a helpful overview. Let me know if you have any questions that weren’t addressed or if you want more information on any of these benefits I mentioned. Have fun building your site!

How to Add a Favicon to Your Squarespace Website

When you're on a website, have you ever wondered about those little icons on the tab of your browser window? They add some fun to the tab and make a website seem complete—like a pretty stamp on an envelope. I always feel like something is missing when a site doesn't have one.

Learn how to create a favicon and add it to your Squarespace website. Click through for the 6 easy steps to add this small, but impactful detail to your site. | Tutorial by Delighted Creative Co.

As much as I notice them, and oddly care about them, there was a time when I didn’t know what they were called or how they got there. I had no idea how to build a website either so it didn’t really matter. But then I took an Adobe Dreamweaver class and was sitting by a girl who knew quite a bit about coding and website terminology. She seemed like the perfect person to get insights from. So I asked her.

“It's a favicon.”

“I'm sorry...a what?"

“Fav-i-con.”

“Oh, thank you. And how does it get there?”

“You have to add it.”

And she turned aside. So the conversation was over, but at least I knew what they were called—and I had Google.

Favicons. They’re tiny but impactful.

If you love details as much as I do and you want to be sure you don't miss an opportunity to brand your site in this way, I'll show you how to make one! It’s pretty straight forward and Squarespace makes it unbelievably easy to add to your website.

Let's get started. First, we'll talk about size and style parameters.

SIZE

Favicons are small with a final size of 32-pixels by 32-pixels. Because of the size, a simple design is ideal. Consider using a brand submark or the first letter of your logo or any symbol that you regularly use in your branding. Whatever it is, the less complicated the better. However—you should feel free to use something that's a bit complex if it fits nicely in a square area. For example, the Starbucks favicon in my round-up below is detailed, but works because it's not too tall or too wide.

STYLE

• Submark •
A great option is using a submark provided by your designer or any design that is clearly part of your brand identity. As I mentioned above, the most ideal favicons are simple and recognizable, considering they are quite small.

• Type, Shape and Color • 
If you don’t already have a submark that would work well, consider using a square block of color or a simple shape that reflects your brand: would a star, heart, diamond, or circle be applicable to your brand style? Or how about the initials of your company name? Here are some favicons to inspire you:

LET'S MAKE ONE!

I use Adobe Illustrator when I create favicons for myself or for my clients, but you can also use Photoshop, or Canva, which is free. Here is how I created the favicon for my site:

Step 1 • Open a new 100px square artboard in Illustrator

Step 2 • Create the shape you want as a background. I chose a circle, but again, choose what works best for your brand. There is no need to add a background shape if you don’t want one.

Step 3 • Type the letter(s) you want to include and resize to fit over the shape

Step 4 • File > Save For Web > Choose PNG > Type Optimized if you have text. If you want to remove the white background, check the Transparency box.

Step 5 • Navigate to your Squarespace account > Choose Design > Logo & Title

Create a Favicon for Your Squarespace Website | Tutorial by Delighted Creative Co @delightedco

Step 6 • Upload your Favicon and Save

And that’s it!

Note: it can take a few minutes for your favicon to show up—you may need to refresh your web browser a couple of times (Command + R), or even close it out and reopen.

Let me know if you have any questions!