Website Designs

Creating the navigation:

ss

This is the navigation for SDCREN’s website at the moment, for me it’s too long and complicated. They could group up the sections with the use of drop boxes to organise the navigation more effectively.

  • Home
  • About SDCREN – About, Events, Local Installations, Local Installers, SDCREN Wiki, Renewable Energy Tours
  • Useful Information – Guestbook, Case Studies, Renewable Heat Install Training, Toolkit, Community Energy, Top Tips
  • Newsletter
  • Contact Us

Website Design Ideas for ‘Homepage’

file_000

The  main idea focus for the website would to have some form of video/picture/slideshow at the top of the page in big below the navigation bar. This feature engages the viewers to find out more about the company, the events going on etc. It would either have the information there or be a link to another page on the website for the viewers to visit/navigate to.

Homepage (Design 1)

Website Design 1.png

The main image in the middle along with the welcome is a slideshow, so the whole feature will change onto another image and some other information on an event or update etc. The design of the information over the top of the image using the logo as the separation I feel is effective, you can display a image and have text relating to the information. The design is well organised and is clear for the audience to understand and navigate.

Design 2

website-design-1-2

The middle image will change and there will be different text making the audience find out more about a different aspect of the company. It is effectively a slideshow to different areas of the website, with different images of the coastal areas they work in.

Website Design Ideas for the ‘About Us’ Page

file_000

The use of the images engage the audiences to the page, the text will be situated at the side of the page for both of the designs. The map will be for when the audience scrolls down the page to see more. It is the diagram of the areas that SDCREN covers.

Design 1

website-design-2

This design is organised with the use of lines and shadows to break up the different areas of the page. The use of the logo as the outline for the image came from it being an ‘About Us’ page. The logo is the company and the picture is a coastal area they have in their area to work in. I feel as though this design is effective in representing the company with the image to the left. Underneath the page would continue to show the areas that they work in.

Design 2

website-design-2-2

This design uses the idea of having the photo full sized across the width of the page and with the use of a rectangle at half opacity as the background for the information. This design in my opinion provides a more clean and professional look, the rectangle isn’t too bold and you can see through it allowing you to see the full image and the text at the same time. the opacity might have to be adjusted if the text is struggle to read.

Website Design Ideas for the ‘Contact Us’ Page

file_001

The contact pages for websites are generally plain and boring, this is due to their simplicity and for a clear understanding. My first idea is a plain and simple idea, I want the page to be clear and easy to understand along with the information being well organised.

Design 1

website-design-3

The information has been organised for a clear understanding, If the contact page was unclear, it wouldn’t be very helpful for anyone who wanted to contact the company. The system of having two methods of contact allows the page to be split into two for a more organised view.

Design 2

website-design-3-2

This contact page is less boring with the use of imagery for a more engaging look. The page would scroll down for the full address and a map view of the location of the address or visual aid. The image above the map is just a coastal area in the area that SDCREN covers. This design could be considered less professional to the other design but there are more aspects to the page with the audience might prefer.

Mobile Design (Homepage)

Final 3 Page Designs

From the small survey I conducted within the college, the three final website page designs will be:

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s