Part Two: Website Design

Size: px

Start display at page:

Download "Part Two: Website Design"

Rosaline Floyd
6 years ago
Views:

1 Get Started Building Your Website Part One: Planning Get started building your website Part Two: Website Design

2 Design 101 Choosing a Style Your Business Logo or Website Name Developing Brand Colors Picking Font Pairings Table of Contents Background and Banner Images Customizing Your Layout Creating Your Own Columns Dividing Text with Horizontal Lines Other Useful Widgets Inspiring Visitors to Take Action Publishing Your Website to the World 2

3 Design 101 3

4 Design 101 Writing, image searching, planning, oh me, oh my, where does the actual site-building begin? Right now, my friend. The fun begins. Here s Part One: Planning in case you missed it. Looking at site design from a birdseye view can be a bit intimidating. The Internet is chock-full of amazing web design, but it also has its fair share of sites that are, well, somewhat lacking. No one chooses to have a less than appealing website, so how do you avoid it? Thus the panic begins. Where do I put my logo? How many columns should each page have? What color suits my branding? Widgets? What are widgets?! Take a deep breath and rid yourself of the unnecessary uneasiness. We ve got you covered. You ve already made it this far. With a little bit of explanation, your website will be well on the road to success. 4

5 Design 101 Choosing a Style Once you re ready to start building, enter the Yola Sitebuilder where your website patiently awaits. From here, you can work on the default Style Super Flat or choose any of the available Styles. When choosing a Style for your website, it s important to note that a Style, or template, is really the skeleton of your website, and can be completely customized to your tastes and needs. We ve found that it s very tempting to look for a Style that matches your business or personal site. For example, if you re building a site for your school, you may select our Elementary Style; or if building a site for a cake shop, you may choose our Pink Cupcakes Style. For maximum control, we recommend using Super Flat or Skyline, as these are the most flexible Styles we have available. You can see the level of customization you can create without any previous website-building knowledge on the following page. 5

6 Design 101 Super Flat Default design Customized design Skyline Default design Customized design 6

7 Design 101 Your Business Logo or Website Name In this day and age, logos are everywhere you turn. Billboards, buildings, automobiles, cell phone cases, clothing you name it. Creating a memorable logo and brand is a powerful way to help your business stand out in people s minds. If you don t have a logo in order, you can always type in your business name and choose a cool font that s different from the ones you chose above. You can then take advantage of the branding opportunities that come along with our dynamic new Styles, Skyline and Super Flat. Upon selecting Skyline out of the Styles tab, open up Style Designer from the Page section and under Colors, you can upload your Logo. Once uploaded, your logo and navigation alignment is completely customizable. Double click on the space where the logo and navigation live, known as the header. This will display properties only pertaining to the header. Under Layout, you can choose to have your logo be positioned on the left, right, top or bottom of the navigation. 7

8 Design 101 Want your logo within your banner? Super Flat is the way to go. Upon selecting Super Flat, hop into Style Designer, upload your logo to begin customizing. While in the Logo section, adjust its alignment, choosing between left, right or center. Next, decide on the sizing of your logo, using the Width scroll bar. Once your logo is in place, your banner may feel like there s something its lacking. Save and exit Style Designer, hover over the banner area and click Edit Heading. * 3 Fill in your Site Tagline with a phone number, tagline or slogan to add more life to your Banner. If you d like your Tagline and Heading to show up on all pages, be sure to check the box that says Apply page heading to all pages. 8

9 Design 101 Don t have a logo? Not a problem. With Style Designer, create your own Main Header and Site Tagline font pairings, making it easy to differentiate between your company s name and its tagline text. Simply click within the banner section and change the Font Family under Tagline. 9

10 Design 101 Developing Brand Colors Between backgrounds, headers, sub headers, banners and copy, choosing your website colors is one of the more exciting aspects of site building. Before you ve chosen your website color palette, it may a good idea to delve into the psychology of your color choices. Yes, there is in fact a psychology behind colors studies show that colors evoke emotion and can represent different messages. For example, blue conveys clean, calming and focused, while yellow conveys bright, positive and youthful. Yes, there is in fact a psychology behind colors studies show that colors evoke emotion and can represent different messages. A great way to get the wheels turning is to think of the tone you ve envisioned for your company (you ve already done this in the Planning section with your website and blog copy). Next, determine which color will provoke the desired emotions. 10

Click through the properties and add in any hex color code that suits your fancy and watch your site s transformation unfold before your eyes.

11 Design 101 Ready to try on a few choices? Enter Sitebuilder and open up Style Designer from the Page tab. PAGE TAB Spread across the left hand side of your screen are a variety of properties available at your expense. Click through the properties and add in any hex color code that suits your fancy and watch your site s transformation unfold before your eyes. When you find the right color, take note of the hex color code located at the bottom for future use. Upon clicking through Style Designer if you find yourself stumped on color choices, there s a great tool called Adobe Kuler that can help you navigate the plethora of colors available. Choose a single color, and it will give you an entire palette from which to choose. If you ve got a really great image for your banner, you can also select colors from that image to help match your website. In the Image section, we showcase a website with a color scheme that matches the banner image or logo. Choose your shade Choose your color 11

12 Design 101 Once you find your perfect palette, it d be a shame to lose it. Use the spaces below to jot down four or five colors to use:

13 Design 101 Picking Font Pairings Following suit with colors, fonts also have the capability of evoking emotion. Coming to a website and seeing five or more different fonts tossed about the page can feel similar to walking through a ransacked house. You d much rather have a website that s more welcoming. yola When selecting fonts, try and stick to two or three selecting the first for your headers, the second for your paragraph copy and maybe a third for a tertiary header. Some typefaces give off a pleasing ambiance, whereas others feel illegible in comparison. Bearing in mind that the main goal in web design is to appeal to your audience, helping them to easily read and understand what you do and how you can help. Before coming to a final decision, put yourself in your visitors shoes. Is this font something you can imagine reading, page after page? Fortunately, Style Designer provides plenty of font pairings that work well together. Choosing one of these will spread each font across your entire site in an elegant manner. Some typefaces give off a pleasing ambiance, whereas others feel illegible in comparison. 13

14 Design 101 In Sitebuilder, open up Style Designer from the Page tab, and under the Presets section, select Fonts. This will prompt a box on your left to open that displays over 30 pairs of fonts for you to test on your site. These dynamic font pairings allow you to blend serif and san serif fonts, as well as having pairs of only serif d sans serif d serif, and only san serif fonts. Georgia Helvetica Once you find a pairing that you like, write them down so you don t forget and so that you can use them for both online and offline marketing:

Design 101 Background and Banner Images Although deciding upon backgrounds and banner images may be a difficult feat, it s such an exciting process this is where your site really begins to come

15 Design 101 Background and Banner Images Although deciding upon backgrounds and banner images may be a difficult feat, it s such an exciting process this is where your site really begins to come together. Upon selecting a Style, your new website will pre-populate with a default background image. As enticing as it may be to claim these new digs as your own, the way to make your site stand out from the two billion (or more) other sites on the Web is to create a website to truly call your own. Fortunately, we ve got a variety of backgrounds and themes from our newest Styles, Super Flat and Skyline from which to draw inspiration....the way to make your site stand out from the two billion (or more) other sites on the Web is to create a website to truly call your own. 15

Design 101 To start, let s take a look at Super Flat. Upon entering Sitebuilder, Click the Styles tab, select the Recommended section and choose Super Flat.

These themes display an array of background images with matching color palettes. Go ahead and try a few on for size you ll be adding your own background image or texture in no time. Now, onto Skyline.

16 Design 101 To start, let s take a look at Super Flat. Upon entering Sitebuilder, Click the Styles tab, select the Recommended section and choose Super Flat. Next, hop into Style Designer by clicking on the Page tab and clicking Style Designer. From here, under Presets select Themes, and you re officially cruising down Inspiration Dr. These themes display an array of background images with matching color palettes. Go ahead and try a few on for size you ll be adding your own background image or texture in no time. Now, onto Skyline. In the Recommended tab of Styles, Select Skyline for a completely different look at feel to your site. Upon opening Style Designer, you ll see a very different look than that of Super Flat. We like to call this handy, new design tool Basic Mode. Using basic mode, easily adjust your background by flipping through the wide variety of samples under Background. Pair these with the color changeable color palettes available to you in the Highlights section. Miss the list of all the customizable properties in Style Designer? No problem. Simply scroll to the top of Style Designer and toggle to Advanced, and you can see all the twists and turns you can customize for your website. 16

17 Customizing Your Layout 17

Customizing Your Layout Designing the layout of a website can feel like climbing a mountain. It takes dedication and strategy, but once accomplished, you feel as though you re on top of the world.

18 Customizing Your Layout Designing the layout of a website can feel like climbing a mountain. It takes dedication and strategy, but once accomplished, you feel as though you re on top of the world. Fortunately, it s not nearly as strenuous! Let s get you to site-building bliss, shall we? So you ve selected your Style, you have some copy and images and know which colors and fonts to use now onward to layout. If you don t have a distinct layout in mind, try drawing some inspiration by flipping through a few of our preset layouts. While in Sitebuilder, click the Page tab, and select the Layout subcategory. This will open an array of presets ranging from two columns, to three columns over one, thus giving you the variety that any site-building buff may need. These layouts can be changed for each page. 18

19 Customizing Your Layout Need to see some finished products to decide which would be most suitable for your vision? You can always browse the Internet in search for sites whose layout you like. Or, here we have Zek Design, a site built with our default, or single column, layout with widgets dragged in for a customized layout: 19

20 Customizing Your Layout And here we have Cozy Cakemaker, a site built with a double column layout: Once you ve decided on a layout, you may be itching for further customization no problem. We ve got column dividers, custom panels and horizontal lines galore. 20

Customizing Your Layout Creating Your Own Columns Using our Column Divider widget, you have the ability to create custom columns and place them anywhere with ease. Let s use Zek Design as an example.

21 Customizing Your Layout Creating Your Own Columns Using our Column Divider widget, you have the ability to create custom columns and place them anywhere with ease. Let s use Zek Design as an example. Here we have the Column Divider widget used to properly align Picture and Text widgets, giving the site a polished, professional look. To try out the innovative tool, once in Sitebuilder, click the Widgets tab, and under the Popular section, you will find the Column Divider widget. Drag and drop this the widget to the area of your choice, and there you have it your own custom columns! Widget tab Column divider widget 21

Customizing Your Layout When using the Column Divider widget it s important to note that it s is not limited to pictures and text place any widget in your custom columns to create your own unique

22 Customizing Your Layout When using the Column Divider widget it s important to note that it s is not limited to pictures and text place any widget in your custom columns to create your own unique design. This includes placing columns within columns. In the example, the column divider widget was used in conjunction with two more column divider widgets, to create four, individual squares of copy. With this source of customization, your options are endless. 22

23 Customizing Your Layout Dividing Text with Horizontal Lines As simple as it may be, one of our favorite design tools is the horizontal line widget. This tool provides a sleek, polished way to break up and organize your site s content. Picture this: In planning your site s layout, you realize both your services and pricing pages don t have enough content to keep them separated. Being the planner that you are, you decide it d be optimal to combine them into one page. Once the separate sections are sharing a page, how do you decipher between the two? This is where the horizontal line comes in. Try out the Horizontal Line widget by going into the Popular tab of the Widgets section in Sitebuilder. Drag and drop your line to the area of your choice, and you ll be able to customize this divider to match your fresh, sleek design. 23

24 Customizing Your Layout The default horizontal line is a thin, grey line, but you can change the color, thickness or even make it dotted or dashed. Don t be afraid to try a variety of styles, you ll know the perfect divider for your page when you see it. Once you find the right one, be sure to make note of how you did it and use to divide all of your sections so that your site maintains a consistent look: Straight Dotted Dashed Color: # Thickness: px 24

Customizing Your Layout Other Useful Widgets In addition to these widgets that help with your layout, there are a plethora of other elements that you can drag and drop on your site from a

25 Customizing Your Layout Other Useful Widgets In addition to these widgets that help with your layout, there are a plethora of other elements that you can drag and drop on your site from a fully-operational Online Store to marketing from Constant Contact and appointment scheduling. You can even use the HTML widget to add any custom code from social media sites or add Google Analytics tracking, a tool that helps you track visitors on your website. The options are endless. 25

26 Customizing Your Layout Inspiring Visitors to Take Action The last step is getting visitors to take action on your site. When visitors come to your website, there should be a primary flow for how you d like them to click from page to page. Remember your primary goal or mission? Whether it s buy now, sign up, learn more or other, you want to guide visitors to take action and be active participants on your website. A Call-To-Action (CTA) is a word or phrase that upon reading your message, urges your visitor to take an immediate action for example, buttons clearly stating Upgrade now or Sign up. Get started The goal of a CTA is to demand the attention of your visitors, alluring them to continue in the direction you d like them to go next. Keep in mind that it s not always Buy Now. 26

27 Customizing Your Layout The contents of your CTAs should vary from page to page. Think of it this way you re browsing the Internet in the hope of finding tips on interior design. You stumble across a site. You see an eye catching CTA. What does the button say? Buy now?! You barely know anything about the company. So, where do you go from there? You certainly aren t going to click that overzealous button of theirs. You ll most likely go back to your search result to browse the next site on the list. Your CTAs should be enticing rather than bombarding. Instead of simply placing that Buy now button on each page, try adding buttons such as Sign up on your homepage, and Support button on your FAQ page. To build credibility, save the Buy now button for your pricing page and online store. There are three main focuses when it comes to creating a successful CTA: 1. Placing them in the right location 2. Demanding users attention with the proper visuals 3. Choosing which actions are necessary for each of your pages Considering a CTA s main objective is to direct your visitors through your flow, signing up where you want them to sign up and purchasing where you want them to purchase. 27

28 Customizing Your Layout A great example of a properly placed CTA is on Evernote s homepage. Upon entering Evernote s homepage, users are prompted with a single-field form accompanied by a green button simply stating Sign Up. More importantly, is the driver to that button, which is the promise of the content: Remember Everything. 28

29 Customizing Your Layout Another example is to use the custom panel widget to highlight your CTA. If the aim of your website is to drive business, then you. may want to have a space for visitors to call you or to fill out your contact form. Or perhaps, you want to highlight a specific product line. Here are a few examples of CTAs using the custom panel widget. Call Us Now! Phone: (415) Mission St. San Francisco, CA This site was built on Skyline, a Yola template. Take your business online and start building your website today. In just a few minutes, you can create a professional website on Yola. Get Started. support@yola.com 29

30 Customizing Your Layout Think about the layout of your content. Where is the best place for your driving message? In the spaces below list four pages of your website (if you haven t built one yet, try four pages you plan on building), and what the CTA on each page will be and where it will take a visitor. Page 1: Page 2: Page 3: Page 4: CTA: CTA: CTA: CTA: Goes to: Goes to: Goes to: Goes to: 30

31 Publishing Your Website to the World 31

32 Publishing Your Website Adding to the Content World Holy cow, you re almost done! Take a deep breath, it s gonna be ok. Publishing your site can sometimes be a scary endeavor. Remember you can always change your website and re-publish. There s also a really great checklist to help make sure, you ve covered everything. When you build your site on Yola, you can publish it to a subdomain for free. What that means is that your site will be live and viewable by anyone. However, you will have a.yolasite.com after your site name. For example, instead of yola.com it would be yola.yolasite.com. We highly recommend that you publish to your own custom domain (or URL), especially since it helps build your site s credibility and is great for search engines. It also costs less than a movie ticket or a large pizza whichever you prefer. But if you re not ready, there s always the subdomain just to get you started. 32

33 Publishing Your Website Adding to the Content World We ve written plenty of blog articles on why a custom domain is important and what to do if your domain is unavailable. There s also plenty of tips on how to choose a domain name. e. You ll find that once you ve built and published your website, there s a whole other ballgame of getting visitors to your website and even expanding your credibility and protecting your privacy. One aspect to note is that you may want to have a custom address to go with your domain. This is especially important for businesses, but we find that a lot of our users like them for personal use as well. Having your own domain and address just makes sense. It also helps people remember who you are. Think about it, would you open an that comes from cocacola@gmail.com? Probably not, but you just might open one from info@cocacola.com. Ready to click that publish button? Go for it! We re proud of you already. Let us see what you ve done. 33

34 It s easy to have complete control over your website. Create a professional website in minutes with Yola. Start building for free

Part Two: Website Design

Get Started Building Your Website Part One: Planning Get started building your website Part Two: Website Design [insert your branding here] Design 101 Choose your Template Your Business Logo or Website