• Add to Collection
  • Tools Used
  • About

    About

    This is a responsive website in first iteration. I created the design and the code. Next phase will be adding some parallax scrolling effects. “… Read More
    This is a responsive website in first iteration. I created the design and the code. Next phase will be adding some parallax scrolling effects. “I've worked with Angela on several projects and always find her to be professional, creative and easy to work with. I would recommend her to anyone who needs creative graphics work, website design or anything that falls into that arena. I have complete trust that she will do a great job." -- Rick Ruiz, Owner, Zenvironment Read Less
    Published:
 
Website at: zenviro.net
 
This is the first iteration of a responsive site. Below is the DESKTOP SITE VIEW.
(Below) Current TABLET and MOBILE views of the site. The responsive style sheets work smoothly to transition to different device widths. The MOBILE version is too lengthy at this point, so content will be hidden eventually.
(Below)  DESIGN CONCEPT 1: The client is an environmental lobbyist with several water clients. So emphasis on the beauty of water in nature, zen-like themes to connect with the company name, quiet, soothing imagery. Sections for mission statement, contact info, about the owner, clients, services and possibly a section at the bottom to include personal writing projects, recipes, events etc. Advanced wireframe.
(Below)  DESIGN CONCEPT 2: Concept was to show a "slice" of the environment from sky to earth to water. Colors have more energy. Almost looks red-white-and-blue patriotic. May not fit the zen-like quiet energy requested for this website. Advanced wireframe.
(Below)  DESIGN CONCEPT 3: This is the third concept. Less colors, calmer imagery creates a quieter mood. This will be a parallax scrolling website with javascript actions and gradual reveal of sections. Advanced wireframe. 
(Below)   FINAL APPROVED DESIGN CONCEPT and we're ready to build. We made a few rounds of changes to the design (see 3 previous layouts) and here is the approved version. More white space in the middle services section created a better resting place for the eyes compared to the image-heavy previous concepts. "Contact" was added as a fifth item to the navigation and the contact information has been moved to the bottom. The original idea for the nav bar had to be revised as the purple and white circle idea was too invisible. Navigation needs to be very noticable so the design was modified during development. Advanced wireframe.