Web Page Creation tools provide ways to create a personalized, publishable websites depending on the needs of the user, Most of these tools are very easy to use as they have templates categorized according to themes and serve different kinds of functions. Some tools allow editing while on the go. These websites can be used for self promotion (portfolio), business, and spreading information.
WIX
Website Templates for specific purposes
Drag and Drop
Integrated Apps
Business Features
WEEBLY
Website Templates for specific purposes
Drag and Drop
Mobile Editing
Business Features
File Management
File Management tools online are used to convert files to different formats and address compatibility issues. Some tools are as simple as .doc to .pdf converter while some offer a large variety of file formats that may no longer be familiar to common users.
Zamzar
Multiple file formats to choose from.
Word2pdf
Word document to pdf converter.
Mapping
Online mapping tools allow users to view a map of the world or just his or hr own neighborhood. Some maps have advanced features, such as real-time navigation and routing, nearby establishments, and even links to booking for restaurant or lodgings.
Google Maps
Earth mode
Real-time Navigation and Re-routing
Nearby places
Directions
Waze
Real-time Traffic and Navigation
Community-driven Real-time alerts (Traffic Report, Police Reports)
Basic Web Design Principles and Elements
Purpose:
Identify the purpose of your website
Each page of the website needs to have a purpose
Content
Users visit websites because of the contents of the websites.
Content is very important so make sure that the content of your website is of high-quality and credibility.
There are a lot of websites that gain traffic because their content is of high-quality even if the websits are not that well designed.
Communication
The design of your website should communicate with the user clearly.
Information should be easy to read and easy to digest.
Make use of sub-headings, bold text and, bullet items.
F Pattern
Studies shows that people tend to scan computer screens in an "F" pattern.
What they usually see is the top and left side of the screen.
When deciding for the over-all design of a website, consider the viewer's visual flow, Place the important information at the top and left side.
Navigation
Your website should be easy to navigate.
Some of the effective ways to easily navigate a website are through page hierarchy, labels, and clickable buttons.
Online viewers would want to find information in your website quickly.
Three-click rule: users can find the information within three(3) clicks.
The homepage should show the important information.
Page titles should be simple and descriptive.
Page titles should not confuse the readers about the content of the page.
Maintain consistency of main sections and labels for each page of your website.
Clear structure, visual clues, and recognizable links will help the viewers navigate the website easily.
Typefaces
Sans Serif font is easier to read online.
Serif fonts are more decorative and are easier to read in printed works.
16px is an ideal font size for reading online.
Streamline the design of your web page by sticking to a maximum of three (3) typefaces.
Colors
Colors help enhance the user experience.
For text and background, choose contrasting colors to make the content easier to read.
To create balance and harmony, choose colors that are complimentary.
Vibrant colors can be used for buttons or call-to-actions to catch the attention of the user.
White spaces help give a modern and clean look to your website.
Images
The right images will help you connect with your target audience.
Infographics, videos, stock photos, and graphics can be effective ways of communicating aside from texts.
Grid Based Layouts
Help arrange website content into sections, columns, and boxes.
Help your website avoid the messy look and create balance.
Load Time
Your website should not take long to load.
Optimize the file size of your images.
Combine the codes in central CSS or JavaScript to reduce HTTP requests.
Combine HTML, CAA, and JavaScript codes to speed up the loading time.
Mobile Friendly
Make your website accessible to different devices.
You can build a responsive layout to make your website adjust depending on the screen size.
You can also build a separate website that is specifically designed for mobile devices.
Other Elements Of A Website
About Us
This tells the user about the owner of the website and what they do.
It discusses the company's information for a business website or personal information for a personal website.
Some websites put testimonials and success stories in this page.
This can also be a page where other related pages about the company or people involved to the website can be placed.
Keep your About Us page simple and avoid making it too long.
Provide enough information to keep the interest of the viewer.
Contact Information
Having the contact information available to users add the legitimacy to the website because users can contact the website owner if they have any other questions.
Keep the contact information visible for users to easily see.
A contact form is also great way to communicate with the website owner. This allows users to email you directly from the website.
Tips: Keep the contact information static and available in all pages in the same location so that it is visible.
Call-to-action
Call-to-action is the part that users are encouraged to take an action after getting information from your website.
This can include: sharing the website, commenting on a post, making a purchase, signing a form, etc.
To encourage an action from the user, make sure your call-to-action sign is obvious and strong.
You need to determine what you expect users to do after revisiting your website
The design of your website should point users to do the call-to-action.
Seach Features
This helps viewers find information in your website quickly.
The search feature should be easy to use and big enough to type words in.
You can use the standard magnifying glass as an icon for search.
Information Footer
Footer is at the bottom of the page. It is a place where you can put information that won't interfere with the design of your website.
It should blend with your website and should have a minimalistic look.
The footer should be simple and useful.
It is commonly used to put location, contact information, links and other important contents.
The footer is often static and available in all pages of the website.
Buttons
The clickable buttons in your website should be recognizable.
Buttons should be of the same shape, design, and color theme.
Consistent button design will help users easily identify that an object is a button.
Learn
Create an Account Visit https://www.wix.com/ Create a new account or if user has existing account sign in with current account.
Create a Website Click Create you website.
Choose a Template Choose a template from the design. Click view to view the template. Click edit to use the template in you website.
Side Bad Click Background to change the background of the website. Click Add to add objects, images or text box in the website.
Navigating to Pages Click the drop down menu that is located at the top leftmost of the website. Choose a page where you want to navigate to. You may also customize the name of the pages by clicking the three dots (…).
Editing a text box Click on the text box you want to edit. You may drag the text box to the location you want to put the text box. Change the size of the text box by dragging the corners. Click edit text to change the text. A formatting box will pop up to change the format
Tool Bar The tool bar will allow you to copy, duplicate, arrange, paste, delete or align the objects in your website (i.e. text box or images).
Mobile View On the upper right corner of the website click the Mobile icon to view the mobile version of your website. Editing the Mobile Website Drag and arrange the objects of the website in the mobile view. Publishing your Website On the menu, click the Site menu. Click save if you want to save but not publish yet your website. Click preview to take a look at your website before publishing it. Click publish if you want to publish your website in public. Click view public site if you want to view your website.
Editing a Text Box Click on the text box you want to edit. You may drag the text box to the location you want to put the text box. Change the size of the text box by dragging the corners. Click edit text to change the text. A formatting box will pop up to change the format.
Publishing your website On the menu, click the Site menu. Click save if you want to save but not publish yet your website. Click preview to take a look at your website before publishing it. Click publish if you want to publish your website in public. Click vie public site if you want to view your website
Reflection: I enjoyed this lesson and I learned a lot about this and now I know how to make my own website using Wix.com and I will be use this in the future.
Comments