OK. So, you’re designing your site and you really, really need nice photograph of a monkey riding a bike to bring your home page alive. Of course the first place to check is our own library (Insert-> Library-> Images), but if we’re all out of monkeys riding bikes (sorry) what do you do?
Fri, 7 Mar 2014
Fri, 7 Mar 2014, 18:15
Wed, 29 Jan 2014
Wed, 29 Jan 2014, 15:00
Tue, 19 Nov 2013
Tue, 19 Nov 2013, 17:21
We're surrounded by a constant stream of images, but how much do we know about taking them? Here's a round up of snappy resources to get you on the right track.
Nothing quite tickles our chucklebone like a bit of camera calamity – our regular visits to Terrible Real Estate Agent Photographs are testament to that.
Thu, 14 Mar 2013
Thu, 14 Mar 2013, 16:23
Thu, 22 Nov 2012
Thu, 22 Nov 2012, 16:05
Easier to use, higher quality images, more control over thumbnail styles… these are just some of the benefits of our new Lightbox image gallery.
The gallery became available to all Moonfruit users this week as part of our staged roll-out of Moonfruit v6 – the new and improved version of our software. The gallery is available for customers using v5 as well as the new v6 Early Access Preview.
To start using the new gallery in v5: In edit mode select ‘Insert’ on the toolbar and then select ‘Image Gallery’ from the widgets.
See below for more details on how the new Lightbox gallery will improve your site. To view more gallery styles and effects visit our New Gallery Styles site. And please do let us know what you think by commenting below.
Mon, 24 Jan 2011
Mon, 24 Jan 2011, 09:35
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.
Fri, 14 Jan 2011
Fri, 14 Jan 2011, 17:33
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.
Fri, 7 Jan 2011
Fri, 7 Jan 2011, 17:39
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!
Thu, 23 Aug 2007
Thu, 23 Aug 2007, 15:35
Wed, 15 Aug 2007
Wed, 15 Aug 2007, 10:22
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?