Streaming live at 10am (PST)

Website for 10th largest school system in the USA


#1

Hi guys! I used webflow to prototype and design the website for Fairfax County Public Schools (FCPS) in Virginia.

Here are the links of the major pages I built:
Most links don't work, but you can use the menu to navigate to Kindergarten Registration at least, as well as schools and centers.

The final launched site is viewable at https://www.fcps.edu/

We basically did the initial base design in Photoshop..then I quickly translated the design to a webflow prototype. Our Front End Developers (FED) then took my webflow prototype and translated it into a Drupal 8 website for the client.

Our FEDs said that working with Webflow instead of Photoshop was really great, and much less frustrating than working off a Photoshop Document (PSD).

This was a first in terms of a workflow for us, and give a lot of credit to webflow for providing an awesome tool to help in creating such a large and complex website. When I first built it, webflow had not yet released flexbox so I created all my cards using traditional float methods. After flexbox was released, I re-did all my cards in flexbox and it was SO MUCH EASIER.

I was the designer working on this project, and I work for www.forumone.com


#2

isn't the "float-less" life so much more fun? :slight_smile:

Great job on the launch!


#3

@DFerroF1,

Nice subtle colors and great use of imagery.

Beautiful responsive mode!

Well done man.


#4

this is really great work. thanks so much for sharing.

i am dying laughing at "cankle container"...i am so going to use that :slight_smile:

edit: was this the first forum one project that you introduced webflow to the workflow? if so, how difficult of a sell was it?


#5

Yes this was the first project we used webflow on. It was not a difficult sell at all. I told our team I wanted to use a tool that could demonstrate to client exactly what we propose for navigation, mobile etc. and they had no problem with me using it.

Our Front End Developers loved the tool, and wish to see it used more often across projects. Said it saves them time and ensures a higher quality end product.

I have since used webflow to prototype changes to existing sites we have out there, such as NIFA. Check out the secondary page 1 and secondary page 2 I created too.

  • The idea was to show the client how the site would look with a much wider layout, and how a CMS driven hero card on homepage could work. Compare my webflow prototype with the current live website.
  • Click on the hero image to show the proposed hero card designs and colors I wanted to show them
  • Click on the language select to show how I thought we could incorporate google translate into the site.

The hardest sell has not necessarily been to my manager or the company, but to fellow designers. It's not that they don't like the tool or want to use it, it's tough to find the time to learn a new tool and incorporate it into workflow.


#6

Hey @DFerroF1,
Really nicely done. Looks very clean and accessible.

If you won't mind sharing, how did you go about creating the navigation menu? No need to be too detailed, but rather a rough description of what you did would be great.


#7

It was fairly complex to get that slider to come in, then for another to come in after you click deeper into the menu. I had to use their animation tools to have one menu slide out, then another come in etc. When one slid out, I would set it to display none, then one slid back in, I'd set it to display.

Well, this is one criticism to webflow..if you go the route I did..and need to go in and edit some text in the menu..it's VERY tough. I wish they had a sort of..turn off all CSS option that allowed you to access deeply hidden areas like mine. You can go in and dissect the menu in the link I gave above. Try and change the text inside the menu, then turn on all the animation again afterwards. You'll feel my pain.


#8

Thanks for sharing! I'd figured that you would probably had difficulties editing structures of stuff for hidden menus. @PixelGeek, hopefully you guys could find a way to address this issue. Something to allow us to see through hidden items or some sort.


#9