Building an attractive website for your Village

Manuel Acevedo
Jul 20, 2016 · 4 min read

Village Goal: When trying to convince people to join the village, you want to have an attractive website that explains WHAT is a village. You can think about the website as a 21st century brochure.

HowTo guide to build an attractive website on Helpful Village

The first step is to think about the menu structure you would like to have, the menu structure is like the “Table of Contents”. We believe that Lamorinda Village has a Menu Structure that makes a lot of sense:

Once you have thought about the structure of your “brochure”, we recommend that you start writing the content of each page on whatever medium makes the most sense to you (Microsoft Word, Open Office, pen and paper).

Once you have your content ready, the next step consists in publishing them online and finally taking care of the style of your website.

So, let’s summarize the steps, before we explain how to publish your web page on Helpful Village:

  1. Think about your Menu Structure (Table of Contents)
  2. Write the content for those pages (Text and pics)
  3. Publish the pages on your village website
  4. Graphic Design: Make those pages look really good !

HowTo guide to publish your content on Helpful Village

When you log in with Admin rights, you will see an Edit Button at the bottom left corner of each of your editable pages:

Image for post
Image for post

When you press on the “Edit this Page” button, you will be redirected to the editable version of that page:

Image for post
Image for post

In technical terms, this is what we call a WYSIWYG editor that allows the person to make simple changes to the text and content of that page.

Image for post
Image for post
If you don’t SAVE, the page changes won’t stick !!

Once you have changed the content of the page, do not forget to hit the SAVE button !

The WYSIWYG editor is easy to use, but if you want to go further and fine tune the page, you may want to have a look and edit the HTML code. Editing HTML code is not easy and you may require help from a Web Designer or Computer Scientist that can speak that weird foreign language that the machine speaks…

Image for post
Image for post

Hitting the source code button, allows you to open the “techy” HTML Editor.

Image for post
Image for post
When done editing the HTML code, press OK and then press SAVE

HTML is a computer-friendly Markup Language that is certainly hard to read for humans.

The trade-off of the HTML editor is that it is harder to use, but gives the power to do virtually anything to people that are able to use it.

At this point, you know how to edit the web pages of your village website. The next step is to make them look good !

The best websites have a consistent style across the board, so we recommend you establish some design guidelines (color palette, page layout, etc).

Making the webpages look good is not an easy task and you may need help from a graphic designer or a web designer.

How to interact with a graphic/web designer

At Helpful Village, we love when villages have beautiful websites. A beautiful design makes the website more attractive and can make it easier to attract prospective members and sponsors.

Helpful Village is not offering any counseling on the artistic side, so we invite you to find a local graphic designer or artist in your city that can help you design a great logo and a beautiful website style.

The single most important thing to keep in mind when interacting with a designer is to take your time and go step-by-step with him/her. We recommend you ask the designer to focus on the artistic aspects of one single page. Before you ask a designer any code, we recommend you ask them to send you images (photoshop) of his/her proposal for any single page.

Image for post
Image for post

Once, you have a single page design that really fits your village style, you may ask the designer to build the next five photoshop images, and then the next ten photoshop images.

The last step is to code the photoshop design into actual HTML code. This means writing the HTML code from those photoshop images. We would like to underline that a good photoshop designer is not necessarily a good HTML coder (nor a good HTML coder is necessarily a good Photoshop artist). Those are two very different skill sets and only some people are really able to really master both.

Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store