HBF Web Design

This design isn’t final, myself and my team must first pitch own designs and ideas to Band (Design Studio) and own tutors. If Band like all (hopefully) or some of own ideas and designs then we can pitch those to the Hawke’s Bay Foundation, who will have the final say.

 

Hawke’s Bay Foundation website design

The preloader

Preloader-#2.gif

Before the website even opens the visitor will be greeted by this preload, while the website has the chance to load.

It consists of the HBF logo, which is flashing, and the loading circles below, which ditto the colours of the logo.

 

Home page

screencapture-192-168-91-28-33334-Preview-website-design-about-html-1476225738470.png

I changed the background back to the original light blue because worked better with their tine of voice, clam, kind and giving. The gray works better then the white as the main colour for the font because it doesn’t get lost in the background.

‘Hawke’s Bay Foundation’ is also much larger so it stands out enough to be seen but not enough to be in your face. The logo is nicely tucked in behind the title.

Every element has the scroll effect opacity so as element scroll up, out of view they start to fade out.

The ‘Log in/Sign up’ is opaque so as scroll over elements on the pages it doesn’t interfere as much but it becomes solid once the mouse rolls over or clicks it

 

Log in/Sign up page

screencapture-192-168-91-28-33334-Preview-website-design-log-in-sign-in-html-1476225797576.png

Stories page

screencapture-192-168-91-28-33334-Preview-website-design-stories-html-1476225828314.png

The top of Stories, Donations and Store will all feature a slideshow of Hawke’s Bay at the top of the page with the page name and icon on top

 

Example Story page

screencapture-192-168-91-28-33334-Preview-website-design-plunket-html-1476226204355.png

Every story page will utilise the different ways of communicating information, text, image (slideshow), video and statistics/info-graph (which isn’t featured in this example).

The top of the will have a single feature image that can also be found in a slide show on the page.

Information like, image and video will have the option to share on multi social medias. This information will be embedded with a link that leads back to the story on the foundations website.

At the bottom will be a link to the Donation page, if the visitor feels the need to donate after reading the story.

 

Donations page

screencapture-192-168-91-28-33334-Preview-website-design-donations-html-1476226007758.png

 

Store page

screencapture-192-168-91-28-33334-Preview-website-design-store-html-1476226046776.png

 

Vector Works

Charging Post #2.png

This is my idea for a ‘Charging post’ (one of my very first ideas in this project) where the public can pay 50 cent or a dollar to charge their Phone. Obviously all the money goes back to foundation as public donations.

They could be installed on the street or you could upgarde a lamp post in to one

Conclusion

Over all I enjoyed the project, working in a team and with actual clients. At times I did get confused about who we were supposed to be listening to and what we were designing but it all fell into place before the two week holidays started. HBF and Band were very easy to work with, they were open to new ideas and had constructive feedback which help us understand what they needed.

I believe myself and my design team worked well with each other, communication did breakdown at times but it didn’t effect us that much, and the amount of work we produced together is solid. Our different sets of skills helped us attack different areas of the project which allowed us to show HBF and Band a variety of ideas.

My web designing has improved but I want to take it to the next level I think I need to learn more about HTML AND CSS code because Adobe Muse can only take you so far until you want something no one else has designed. The one thing I really liked designing was the t-shirts for the foundation because it reminded me of how much fun it had designing merchandise for my portfolios at High School. Next time I enter a project I will design what I design best and improve my skill in of areas in my own time.

Leave a comment