Moonfruit Lounge - Design corner

New Year Moonfruit Design Tips Part 3: Images and Graphics

leila — Mon, 24 Jan 2011 09:35:00 +0000

Images and Graphics

Great images and colourful graphics really bring a site to life. Whether you show off your latest products, snaps of your friends and family, or your creative handiwork, images are important for keeping your visitors engaged.

Upload your own photos or if you don't have any consider buying professional stock images from sites such as istockphoto (http://www.istockphoto.com). They're less expensive than you might think and for web size (small) it usually only costs a couple pounds or dollars per image.

Images taken with a digital camera are unnecessarily large for display on screen but with Moonfruit your images are automatically optimized for the web. When a page is saved images that have been scaled are resampled at their new size to ensure they load as fast as possible. Note: for serious professionals who are very concerned about image quality we suggest resizing your images in Photoshop before uploading, and then placing them on your page at their natural size. That way you control the sharpness and contrast of your images.

Using static images on the page is perfectly fine but sometimes you want to treat your images in a special way. Using a slideshow to add subtle animation is one way to bring them to life. Try hiding the thumbnails to create a slick animated sequence of images as we've done here. Alternatively the Image effects widget is a great tool for fading in a set of images, as they’ve done effectively on this site. For more ideas on how to treat your images have a look at our Image Tool Showhome here.

It's often the detail that makes a site look professional and small icons are an easy and useful design element to add to your site. For example, add a Facebook or Twitter icon to your page with a link to your profiles. Search the web for 'social icons' or for more general ones look in the Graphic Elements folder in the File Manager. We provide some simple colour changeable graphics that can be used very effectively.

Keep your logo simple and modern. It doesn’t have to be fancy, perhaps a small graphic or just your site name in a distinctive font that expresses what your site is about. Place it neatly in the top of your site and in a consistent position on all your pages.

If you have a bit of artistic flair and you’re keen to make your own graphics but don’t have the software there are some good free apps you can use online. Sumopaint is a really simple tool for creating digital graphics, and your creations can easily be saved and then uploaded to Moonfruit.

And finally, consider adding an Alt tag to each of your images as this can help with your Google rankings. An Alt tag is what a search engines will use to index what an image is about. This can be found on the Style tab when you click on your image.

Gooseberrymoon.co.uk is a fine example of a site using photography and graphics in a fresh and appealing way.

New Year Moonfruit Design Tips Part 2: Fonts and Typography

leila — Fri, 14 Jan 2011 17:33:00 +0000

Fonts and typography

Typography is increasingly important in website design and with Moonfruit it's easy to make your type look great. If you were building your site in HTML you might have only 5 or 6 safe font styles to use but with Moonfruit there are over 200 to choose from. You can see the full list here

Start by choosing a couple fonts that express the style of your site. For example, is your site slick and modern, dark and grungy or fluffy and girly? Keep it to a maximum of 2 (at a push 3) as too many fonts will make your site look messy. We suggest one each for your title and body text, and in some cases another for your logo. Be sure to choose a simple one for the body, something that's easy to read and works well at smaller sizes. You can vary the colour and size of these fonts to create other styles (for example subtitles, or small image captions) but be sure to keep these consistent across all the pages on your site.

Use the Global design settings panel to manage your title and body fonts, it’s a great way to keep the design flexible and consistent. When adding a title or body text box to the page it uses the style that’s been set on the Global Design Settings panel. If at a later point you want change the fonts on your site, you can change them on this panel and it will update the text boxes across all your pages. (As long as you haven’t changed the style on individual text boxes.)

Opera singer Charlotte Stephenson's site uses classic restrained typography to create a very professional looking online portfolio

For body copy consider increasing the line spacing to make your copy easier to read. The default setting is often too cramped and extra line spacing will allow your copy to ‘breathe’ and will look more professional.

In the Moonfruit Library you've probably seen the folder of text effects widgets you can use on your site. While these are fun to play with and can be used appropriately, if your site is for a business you probably want to avoid them, or use them very very sparingly. Too many big text effects on a page can be overwhelming and make your site look garish.

Finally, bear in mind that when browsing websites people tend to quickly 'scan' the page looking for relevant bits of information. Keep your text shorter than you would in print, in small digestable chunks. For longer articles consider breaking up your text with images and large pull quotes to make it more interesting to read.

New Year Moonfruit Design Tips Part 1: Structure and Layout

leila — Fri, 07 Jan 2011 17:39:00 +0000

Over the next 4 weeks, we will be giving you hints and tips to improve your Moonfruit sites for 2011. Happy New Year!

Structure and Layout

Content is key. It can be either words or pictures, but offer something original and update your content often. People are more likely to return if they know your site is active.

Ideally keep top level menu options to less than 8 options (less is more!). You may need to reorganise your pages into easy to digest sections by using the Subpage functionality on the Pages panel. Also, to make it easy for visitors to get back to the homepage consider putting an invisible link over your logo that links back to the homepage (look for the Image Map widget in the Functional folder of the File Manager)

Use the Page Master under Design to put the design elements that will appear on every page. Your logo, menu, and loading bar live here.

Get people into your content immediately. A splash screen is generally unnecessary and only creates a barrier to your site. Visitors will make a split second decision whether or not they want to stay and an extra click or page load will likely put them off. An exception can be a photography or portfolio site with just a beautiful photo on a spash screen, but consider changing this image regularly to keep the site fresh. Also note that meaningful content (words) on your homepage will be picked up by Search Engines and will improve your ranking.

Keep page layouts simple, and most importantly consistent across the site. You can bend this rule for the homepage, which tends to be summary of all the other pages. Design trick - To make this easier create a sample page with your layout then hide it from the menu to save it for later. Whenever you want to create a new page make a copy of this sample page to start from.

For the design of your homepage it's useful to create a focal point, something larger than the other items on the page that immediately grabs the vistor’s attention. This can be a big photo, headline or combination. Perhaps highlight your latest product or newest content.

Don’t make your site too wide. Consider that your site will be viewed on computers with different screen sizes. What fills your large computer screen at home will be cut off on a small netbook and be displayed with annoying horizontal scrollbars. Generally vertical scrollbars are good but you want to avoid horizontal scrolling where possible. Although the standards are changing as monitors and resolutions increase the current accepted guideline is a width of no more than 980 pixels.

A Creative Soul is a good example of a site with a simple consistent layout and big focal image on the homepage

Keep an eye out next Friday for our second instalment!

Wanna build a template?

Joe — Thu, 23 Aug 2007 15:35:00 +0100

Here it is, the hottly anticipated guide to building design templates for SiteMaker. If you want to build us some templates to be used by hundreds of new people everyday, and get paid for it, then read on.

Attached below is a PDF template guide which outlines what is required to produce a design template. If you're interested in building templates for us and earning £100 ($200 USD) per template we buy, then read on.

Summary of how it works
SiteMaker sites are generated by combining a Design Template and a Site Type to produce the starting point for your personal website. The Design Template itself contributes a number of key elements to the finished site, which include:

Welcome page (homepage)
Page Master
Global design settings (including personalised palettes)
Site Settings

The Site Type is a list of pages that then get added to the Design Template to form the new site. All of these pages are based on standard layouts (page templates), which means the Design Template requires the content to be carefully laid out so that when the page templates are added, they are not covered up by graphic elements of the Design Template.

We’re now offering users the opportunity to build and contribute Design Templates which we will integrate into the product and allow everyone to use. We’ll also pay you a one-off fee for each template that we use in the product. Below we have included a list of what you’ll need to produce to get your Design Template in the right format for us to accept.

Setting up a Design template is fairly easy. Getting it to look great is a different story and depends on your experience with SiteMaker and on your creative flair.

To begin, build a new site and then follow the guidelines below, setting up the necessary sections of your site to create your template...

Moonfruit Design Template Guide

Templates, templates, templates

Joe — Wed, 15 Aug 2007 10:22:00 +0100

Fancy building some templates?

Howdy. Our design team have been working on a few new design templates to spruce things up a bit for the end of the summer (what summer?). And while we were doing it, we thought a bit about how we could open up template creation to you the customers, so that you can contribute to the media set available within SiteMaker. Sound interesting?

The long term plan would be to create a kind of template/widget marketplace where people could trade, buy and sell templates and other media (I stress long term - this will take a while). But in the short term, we thought we could publish a set of guidelines for how to build templates using SiteMaker, and accept submissions from people if they wanted to contribute something. We'd credit you with the template creation and pay a flat fee of £100 GBP ($200 USD) for each template.

Does this sound like something you'd like to do?