Project Summary
Client: Frontier Web Development
Project Description: New site for http://frontierwebdev.com
Introduction:
We want to create a new version for
our own website! The launch of it will be an html website that may have some
cool flash features added on as we design them, but there won’t be two separate
versions of it like our current site.
Goals
for the website:
1)
Memorable design and features
2) Clean & modern design that reflects our personality
3) Improved content organized more intuitively so everything is easy find &
digest
4) Showcase for our work that highlights our better projects more and our
weaker project less
5) Easy-to-use admin tool that reflects what our clients actually use so we
“practice what we preach”
Budget
approach:
There
is no real budget for the website as it’s our own. We will of course approve
any amount of time as long as it makes sense to spend it. However, first this
first, html version of the website, we would like it to be easy to develop so
hopefully it can be done in 1-2 months rather than 3-6 months.
Notes:
The clickable mockups aren’t current for this project so only reference the
final jpeg files.
Mockups are schematic and can be changed if the development team has an improved or more efficient way for implementing something.
Content migration plan for new website:
Use content from NewWebsiteContent.htm for the new site as applicable. However, we should pull the following content from other sources:
1) Portfolio content from our current site to the Work section of our new site
2) Educational articles from our current site to the “Good stuff to know” section under Resources of our new site
3) Newsletters from our current site to our new site
4) People bios from OurPeopleBios.htm for the new site
Planned sitemap: user end
- Home page – mockup 100 – Below the site header,
- Banner – Mockup 100 & mockup 130 – this area should be a cool sliding version of what we normally do for most websites that will be easy for Jenna to manage on the admin site. However, we also plan to use this area potentially for cooler flash animations to do fancier versions of the banners.
- For the banner, we’re not planning any Flash animation at this time since Jenna is on vacation. So the estimates don’t need to include time for that as it will be done separately.
- Recent Work/Case Study/News/Resource – because there is limited space and we’d like to hand-pick what is here, it’s probably fine to just do it as HTML where Jenna can easily change the image and text that links to the appropriate part of the website. However, if this can be designed so we can do it more easily that would be nice. Having this section automatically or randomly pull from each section seems suboptimal as there may be too much text for it to look good & it may not pull the item we should be showcasing. Having it randomly populate would be pretty cool though.
- Mockup 101 – Twitter feed – we want a scrolling “ticker” twitter feed at the bottom of the website that can be toggled on and off (as seen in mockup 101)
- Mockup 120 & mockup 121 – Drop-down – There should be fairly simple drop-downs for Work, Company, Services & Capabilities, and Resources
- STS login – Mockup 250 – This would be a lightbox that would show when a user clicks on “support login”. Should be straightforward.
- Header – most mockups – We want the header titles (like Our Work, What’s New, etc.) to display on pages as if someone is typing it out with a blinking cursor once the page loads. Hopefully this can be going on while the user is using the actual page so they don’t have to wait for the header name to be spelled out before they use the page.
- The checkered header and homepage banner background should also stretch all the way to the right and left as seen on mockup 100 and other mockups
- Scrolling Header – Mockup 240 – For the header navigation menu we ideally want it to stay fixed for all pages even when the user scrolls down on the page. Please see this mockup to see how Jenna envisions the page scrolling up with a bit of transparency for a cool effect.
- Drop-downs – mockup 120 & 121 – These should be fairly simple and clean looking
- Our Work – Mockup 140 – We’d like this page to scroll through projects when the user moves his/her mouse to the left or right side. Kind of like some sort of feature Wilk saw on Logitech.com. I’m not sure what he was looking at though when Jenna was in the UA office but the description above should hopefully make sense.
- Mockup 141 – we’d like the client to be able to do an autocomplete search by project name and also to view work we specify as “recent”, having a “case study” or just show all work. This way we can only show recent good projects for “recent” and also reorder All Work so our boring/old projects are near the back.
- Mockup 142 – This page will have the details for the work project. Please note that for “case studies” this page will be in the same layout but there will be more text (not just overview text section). We would love to have a feature to integrate with our facebook account so people could comment on our site about the projects they like and such. We of course would want to be able to approve the comments before publishing on our website. Also note that “prev project” and “next project” should scroll to the next project within the filter the user was viewing. So, if they were looking at “recent projects” and clicked on Family Chiro, then next project should show another “recent project” not the next one in “all work”.
- Mockup 143, mockup 144, mockup 145 and mockup 146 – the other project images for this project that we’d want to show. This should give you an example of how a full project will be displayed.
- About – Mockup 150 – a content-only page that should be in the mockup layout
- What’s New – Mockup 160 – our news section that we’d like to display differently than we do for our other sites as it will display 8 items and then have pagination to see more news items.
- Web Hosting – Mockup 170 – content-only page that should be in the mockup layout
- Creative Branding Services – Mockup 180 – content-only page that should be in the mockup layout
- Our Process – mockup 190 – content-only page that should be in the mockup layout
- Our People – mockup 200 – again, we want this to display kind of like “what’s new” in comparison to how we normally do this page on our other sites. This will let everyone be shown all at once in an attractive way.
- Mockup 201 – the people detail page
- Resources Article – mockup 210 – content-only page that should be in the mockup layout that has some side banners (which should be for all resource content pages). For the “Read full article” link what we picture happening is for the rest of the text to “slide” out below kind of like what happens for accordion style Ajax drop-down menus we’ve done before.
- Resources Newsletter – mockup 220 – content-only page that should be in the mockup layout. The right-hand side can just be html that we’ll update with a hyperlink when we have a new newsletter to put up as a PDF.
- Contact – mockup 230 – Content area on the left side of the page, with some sort of interactive map on the right side. Doing the map in a standard way with Google that allows people to navigate with it on-screen would be nice. If there are cooler ways to do it for our site, let us know as that would be cool but we don’t need something like what we did for Old Dutch.
- Contact drop-down – mockup 231 – This drop-down should be like what we did for Old Dutch products on their site (http://www.olddutchfoods.com/about-us/contact-us/inquiry, see “choose product brand”) for the client-facing members of the FWD team.
Planned sitemap: admin end
The admin mockups should hopefully make sense given the developer notes in red.
If there are question, please don’t hesitate to ask and the AT will clarify them. If there are things or suggestions we missed from when you discussed the site with Jenna on her visit to the UA office, let me know and let’s discuss. We want our website to be cool and memorable, but we also want to be able to build it without spending way too much time.