|
Design tips :
Colors.
-
When using colors on a website it's advisable to stick to 1-3 basic colors.
-
The function of colors is to make the website more alive but also to draw the attention of the visitor to certain points on the website/page.
-
A common error is using too many colors in text and images creating clutter, the outcome is that the visitor will be confused.
-
Observing this page/website, notice I have used 3 basic colors : gray - white/black - green. When looking at this page the visitor will be focused on the logo, tittles, links and social media buttons, the rest is intentionaly left gray/white.
-
When using a large text , make sure it's easy for the visitor to read. Use bold text on words or phrases you want to highlight, use color when needed but keep in mind that most visitors already do an effort to try to understand the text so adding colors, changing letter types or mixed use of capital and small letters will only confuse the visitor more, diverting the attention from the context. A good advice is to use the font Style box in the menu.
Images - numbers.
-
When using images on a website (not a photo-page) follow the rule of less is better. When using images make sure that the images are related to the content and context and the images fit the general layout of the site. (Having a website, that uses green layout, it's maybe better to fit in an image of a person in a green or gray sweater then a white with big red dots)
-
A common error is using too many images on a webpage creating clutter, the outcome is the visitor will be confused.
-
Of cours one can say more with one image then a thousand words but the strength of this wisdom also lays in the "...one image...".
-
So when you use images select a number of images that fit the content of your page and enhance the experience.
-
Using less images will also improve the load-speed of the web page there a page with 3 images will load faster then one with 30. It's posible one needs 30 images on a certain page(e.g. manual screen-shots page...), in that case it's advisable to spread them out over several pages. an example here is the Editing the template page.
Images - size.
-
The size of the images used will impact the load-speed of the page. Knowing this there are a few things to be aware of : Always have the images sized. When placing an image of 2000px-2000px on the web space, then inserted it in web creator and size it to a image of 100px-100px, making it smaller. The result will look satisfying, but when it comes to the load time the file (image) loaded is still the same as the one of 2000px-2000px, meaning making images smaller in webcreator is not improving the loadtime.
-
Best practise is uploading the image needed to the webspace, then inserting it in web-creator and placing it correctly in the layout of your page and sizing it to your needs.
-
When done, navigate to image properties and have a look at the height and width of the image. Now, resize the image on the PC accordingly and upload it again to the webspace/side, set the height and width of images properties now to auto.
Images - quality and copyright.
-
Check for having the copyright for using images. A common error is to copy images from famous websites and using them in a personal one. Be aware that images are copyrighted and you can be prosecuted for using copyrighted images.
-
When using pictures be aware of the copyright and the right of privacy. When using a personal picture of somebody that is using a product on the website always clarify with the person in question if the picture may be used for publishing. It's even recommendable to have this under a written contract. Never use somebody's personal pictures on your website there you this is violation on the right of privacy.
Tables.
-
Once the draft is finnished, just create the same boxes by inserting tables. in my case click in table, insert table 1rx1c, insert table 1rx1c, insert table 1rx2c.... until the screen fits the draft you have made. Now it's just a matter to fill the boxes with content and layout.

-
The advantage of the use tables is that images, layout and text remains the same in all browsers. With other words, when not using this method chances are higher that images and text will be differently located when opening the page in diffrent browsers.
Code.
-
There are lot's of free gadgets and code for improving your website but keep the same rule in mind as with images, less is better, use what you need : An example here can be a digital clock. Knowing every operating system has a build in clock and almost everybody that will use a website or internet probably also has a mobile with a clock then why inserting a clock on your start page or website ? A weather report or rain-radar gadget is maybe nice on a personal website, so visitor can find out what the weather is like but when having a website that is covering how to build websites the visitor has no need for that information.
Web-creator.
-
When creating a project always work with a template as mentioned in Editing the template.
-
Be aware that saving your project every 10 minutes to not loose any information while pressing the wrong buttons.
-
Make a backup by FTP every hour to make sure having a backup from all files on the webspace so you can always roll back to an earlier created page.
-
Have mozilla firefox, google chrome and internet explorer installed so you can check the result of your work in diffrent browsers.
-
Always make sure that the "view tableborders button" is switched off before saving their this can create errors in the layout of the page.
I hope this website will make you see what a great tool One.com
can offer and how you can implement these tools in your website. |
How to insert HTML code? »
Here you will a step by step description how to insert HTML code in your webpage.
Editing the template »
Here you will a step by step on how to edit a one.com template to your own needs.
|