Menu
Fpweb Icons
Fpweb Icons
By ,   No tags,   0 Comments

When I started at Fpweb, I was a little overwhelmed with just how many services they offered, and because I was now in charge of the website, I was able to display those services in a way that made the most sense to me. First, I started by turning their 5 different dropdown menus into one mega menu. MegaMenuMockupOld

But it didn’t take much time for us to add more services that would ultimately make this version feel overwhelming. My next course of action was to silo the services we offered, and give users a sense of what each service was if they didn’t recognize the name. That meant creating icons for each one of our services.

MasterIconsAll1

Because tedious detail heavy work is kind of my jam, I set up 100 100px x 100px illustrator artboards and put my guides 3px away from the each edge of every artboard.

IconsCapture1

Then I created some standards for the icons so someone else could create new icons that matched.

  1. All strokes are 3px at 100px high
  2. Rounded caps on all strokes
  3. Rounded corners
  4. Height must be 100px
  5. Width should be 100px
  6. Type, when used, is Filson Soft Bold (outline type)
  7. Corner radius’ use increments of 3px
  8. Whenever possible use circles for curved strokes
  9. Gaps are 6px excluding end caps (Example below)IconsCapture3

Then created a few digital mockups of how the new mega menus would look.

WhyUsMenuMockup SupportMenuMockup SecurityMenuMockup ManagedMenuMockup

Between the digital comps and the final code, we made some changes to the way we siloed our services. MegaMenuMockup2 MegaMenuMockup4 MegaMenuMockup1 MegaMenuMockup4

In addition to the mega menu, these icons had to work as large icons as well to help break up our enormous amounts of text.

Timbers Army Heartland Regiment Scarf

Alright, so if it wasn’t made abundantly clear in my post about my last TAHR scarf, I’m a huge Portland Timbers fan. Every year the Timbers Army Heartland Regiment releases a scarf, and this is the 2017 iteration.

Like I do with everything I design, I started in my sketchbook.

TAHR 4.0 Sketches

Then I moved to the computer machine with the ideas I had.

I chose “Straight From The Heart” as the tagline to pay homage to the incredible crowds that traveled from around the world to the Heartland to watch the Timbers win the 2015 MLS Cup in Columbus. I used the TAHR logo and wheat on one end to celebrate the heartland and the crossed axes motif and trees on the other end to celebrate the motherland (Portland).

TAHR 4.0-01 TAHR 4.0-02

I submitted this design for approval to the Timbers Army merch department in Portland and they gave me permission to use their logo, and informed me that the manufacturer needed the design to be simplified down to five yarn colors from their catalog. Also in this phase, I decided to use a more athletic looking typeface.

TAHR 4.1 Front TAHR 4.1 Back

 

The design was approved, ordered, manufactured, and distributed to Timbers fans across the country just in time for the 2017 season opener. Scarf 4.2 Back Scarf 4.2 Front

It didn’t take long after that for a fellow heartlander to get the scarf to Timber Joey to be displayed on the famous victory log. At the time of me writing this, it’s week seven in the MLS season, and the scarf is still being laid on the log before every match.

TimberJoeyTAHR 4.0

Fpweb.net Managed Services Page

When I started at Fpweb, their services were offered on a hourly bank model where customers could buy hours to complete a project. One of the first things I did as a part of the company was help them transition for a bank model to a subscription model.

I started in my sketchbook with a rough wireframe of how I’d lay out the page.
WireframeSketch1

 

Then I started working out the typography for each subscription plan.

WireframeSketch2

 

Then I combined all the type to see how it’d look all together.

WireframeSketch3

 

Then I went to the computer and made a digital comp.

pricing_mockupR2-01

 

I used our brand colors for the whole pricing chart, but it soon became clear that with the broad scope our new subscription model would be used in, I’d need to brand each plan individually. I created avatars that would represent each plan because when you order one of these plans, it’s like your ordering one full time employee with that title.

WireframeSketch4

 

Then I color coded each plan and it’s corresponding avatar to enhance the brand.

person_admin person_db

 

person_dev person_sec

 

Then I went back to my sketchbook to quickly draw up how the page would look with avatars heading up each of the plans.

WireframeSketch5

 

Finally, I turned my sketches into code and deployed it on our .NET platform.

See the live page here.

This animation will loop across six screens at the US Cyber Vault booth at the Healthcare Information and Management Systems Society convention in Orlando.

Secure VDI

By ,   No tags,   0 Comments
Deserted Village Project

I wrote a grant to go to Greece last summer and document abandoned villages with the end goal of using that data to populate a web app.

Beer 30

By ,   No tags,   0 Comments

Retraspec

By ,   No tags,   0 Comments

What is Retraspec?

Retraspec is a social app focused on the past. This app you share your life’s defining moments–how, when, and where you experienced them.

User Goals

  • Share personal experiences
  • Relive moments in time
  • Discover moments by location
  • Sort moments by date
  • Make human connections

Targets

  • Instagram users
  • Ancestry.com users
  • The curious
  • The adventurous
  • The nostalgic

Map

map mockup

Retraspec opens to a map of your current location with moments to be explored where you are. This helps you to connect based on the shared experience of being in the same place in the world.

Add Moment

add-moment-mockup

This is the feature in Retraspec that allows you to share the experiences that have defined your life. You can add up to five photos, a story explaining what your moment means to you, and the location and date it took place.

Favorites

favorites-mockup

The favorites page lets you store your favorite users and locations so you can easily access the people and places that matter most to you. You can sort your favorites by date from both the list and the map view.

Profile

profile-mockup

Your profile is your personal travel album. With every moment you share, you write another chapter in the story of your life. You can recount the defining moments of your life in your profile through the map and list view. If you’re after a certain moment, you can sort by date or search for it.

 

See the live demo at the link

Timbers Army Heartland Regiment Scarf

What makes the Timbers Army the greatest supporters group in American sport is their organization. Not only has the Timbers Army helped sell out every game in MLS franchise history, but there is a traveling contingency that coordinates with regional supporters for away matches. These regional sub-groups organize watch parties, travel plans, and merchandise production in their region. There are sub groups from Alaska to Portugal, and everywhere in between. For decades scarves have been the quintessential accessory for football fans around the globe, and every Timbers Army subgroup has at least one scarf, usually a new one ever season. So when I got the chance to design a scarf for the Timbers Army Heartland Regiment, I was honored.

tahr 6

For the front I wrote a slogan that emphasized the midwest’s landscape, fierce loyalty, and the Timbers’ green and gold worn on the pitch.

tahr 4

On one end of the scarf I used lyrics from Atmosphere embracing humble midwest pride, combined with deconstructed elements from the logo.

tahr 3

The front of the scarf features our name and the rising sun motif adopted from the Timbers Army.

tahr 5

On the opposite end, I denoted all the states who supplied supporters to the TAHR.

tahr 1

The fringes are blue to signify the heartland sprawling landscape nestled between the two coasts of North America.

tahr 2All 210 scarves sold in less than 24 hours.