I received my B.F.A. in Graphic Design from Indiana University-Purdue University in Fort Wayne, Indiana (now called Purdue Fort Wayne), then completed my M.F.A. in Graphic Design from Indiana University, Bloomington, Indiana. While in Bloomington, I dabbled in other areas of study including video game design, Unity, 3D modeling, Maya, virtual reality (VR), board game design, book design, digital publishing, logo and branding, and even metals and jewelry design.
Unike the other sites I designed while working at Tribeswell LLC, this one was a little more involved and certainly stretched over a longer amount of time. Some of the key features of this site are the movie banner/hero graphic on the home page (and some interior pages), the hover effects on the home page "Divisions" section, and the interactive map in the footer of the page.
These moving parts add elements of interaction and intrigue for the viewer. The intent is to get people to want to look at Boyd & Company's services and to redirect the viewer to services they may need in the future.
The interactive map in the footer is helpful to illustrate the wide range, geographically speaking, of service areas Boyd & Company can offer. Though they are situated in a small Indiana town, their reach is well beyond Indiana borders and a bold interactive map prominently shows that.
My part:
This project was a large endeavor that gave me time and flexibility to create something that other construction companies did not—and probably would not—display for their website. Boyd & Company wanted to stand out against their competition and I was happy to build a bold display for them.
To that end, the home page was my main focus and displaying the divisions gave the page a novelty that is memorable. After searching many competitor websites, I realized most construction website are very static and sterile, or just simply boring. Having motion effects really emphasizes their interest in innovation. This was hard to prototype due to my lack of experience with Adobe Edge, which I later replaced with InVision, even though it would not show the motion graphics.
The video banner graphic was mixed drone footage that was 1080 resolution. The footage was a great asset, thought it was just too large for web standards. I used Adobe Premier to edit and remove some footage to bring the video to a manageable length, then used Handbrake to compress the video to a manageable size without losing too much quality. The final length and quality render was appropriate for displaying immediately when the page loads.
The interior pages also reflect elements of the home page and the circular design repeats nicely as a header for the Division pages. The Division pages showcase the service types within the company and are illustrated with SVG icons. Many of the icons were used with GPL, but when a license was not obtainable, I would create a new, custom icon instead. I built the icons first with pencil and paper, the used Adobe Illustrator to build and exported as SVG. Using SVG ensures that interactivity and graphics customization can be utilized in the future, when necessary, and also gives great resolution without having to use multiple PNG files.
The map in the footer went through a few iterations before the developers combined various ideas and landed on this style of interactive map. I think the map is a fun and useful way to display multiple company locations without overusing text.
All the photos were provided by Boyd & Company, though many needed to be adjusted for size and clarity. I used Adobe Lightroom to adjust the images so the were bright and lively, yet clear.
This home page displays a movie banner: edited in Adobe Premiere and compressed using Handbrake.
On-hover effects and darkened overlay add intrigue and interaction to this section of the homepage.
a fun and useful way to display multiple company locations without overusing text.
Many of the website's service icons were custom built using Adobe Illustrator and exported as SVG.
This site was built using the Scratch Theme framework for WordPress, which was developed by Tribeswell, LLC. AspiraCE's primary goal is to allow their users to take state required medical tests online for certification/endorsement.
My Part: I was the lead designer for this project and built the mockup using Adobe Photoshop and InVision (I did not code any of this site). I recreated the logo (I've found many smaller companies misplace their branding assets), built the home page graphics, managed page and content layout. Some of the interactive elements are the login panel, which is located at the top right of the screen, and also the menus layout.
Since the website holds so many options for a variety of users, I suspected navigation would be an important part of the experience. I positioned the navigation to the left with the second level navigation expanding next to it. This way, the user will always be able to return to a previous location in the site. There is also a filter for Profession, State, and Category.
The interior pages also have navigation issues due to the massive amounts of data available for the user. To alleviate the visual burden of finding what is needed, I attempted to focus typographic hierarchy through color and position.
Though the site has made modifications since my initial design, I see see opportunities for further development, particularly the menu interaction. Some typography (size) and color choices could also use a touch-up. Due to the framework, the current layout probably will not change, but I could see a better visual flow through their interior pages.
Home page
About Us page. Left navigation is static while the right side scrolls.
After the user's location (state) is selected, they are able to see the courses available for certification in that state.
This project was a commission for Tribeswell, LLC and was built using the Scratch Theme framework. The website is a simple, multi-page site that includes updated drink specials, menu items, notable information about the establishment, and (later added) a calendar function.
My Part: I was the lead designer for this project and built the mockup using Adobe Photoshop and InVision (I did not code any of this site). I rebuilt the logo using Adobe Illustrator and created a style guide which included typefaces and color choices.
I found that using InVision to show a functional site to the client is super helpful. I think this site only had a couple small changes from the original prototype and all of the quirks were worked out before the coding started. After a relatively easy build, the site was deployed.
I also shot all the site's photographs using my mirrorless Samsung NX300. This little camera packs a PUNCH! It's a 20.3mp, 23.5mm CMOS sensor that shoots in fine JPG and RAW, and only weighs about one pound. I used the accompanying Samsung 18-55mm lens for most of the pictures and a wide angle lens attachment for some interesting effects. All the photos were shot in manual mode and edited using Adobe Lightroom.
Future considerations would include a better format for their menu (instead of using a PDF, which admittedly is easier to update), and changing their dropdown navigation colors, which seem a little clunky.
Home page: three major sections, banner, three column testimonials, and Menu call to action.
Static footer with location, hours of operation, and social media icons
This project came to me through my time working for Tribeswell, LLC. Necter is like Tinder, but for groups. The idea is that you and your friends create individual profiles and link into a group of 2-5 people. Then, you can match with other groups to hang out in group settings instead of individual dates.
The reason I added this (defunct) project to my site is that I learned an ENORMOUS amount about prototyping and mockups during the initial design stage—but I'll talk more about that in a minute. Unfortunately, I did not archive this project diligently and pretty much all the screens (and InVision prototype) have been lost into the ether.
I created over 60 screens for this prototype so it would function like the app. The screens included everything from the sign in and onboarding to the profile creation pages. I even made a loading gif for when the server is loading groups. This thing looked and felt like a real working app. This project made me learn so many Adobe Photoshop shortcuts and forced me to become efficient with my time and tools. The duration of the project was quite lengthy, too, and contributed to many hours of practicing digital mockups. I worked on this prototype non-stop for about 3 months!
I cannot take full credit for this design, though. The logo was already created and the colors where chosen, but most of the layout is mine. There was much input from the client and the coding team while putting this project together and it was a struggle to incorporate all their wants into the prototype. Obviously, I cannot please everyone and some compromises had to happen.
That's not a complaint, but a reality of working with clients and in teams. Through working on this project, I realized there were some things missing from my tool bag and that I needed to get a better grasp on my part as a designer. Explaining my design rationale to my team and the client needs to improve.
Create a group by connecting to your friends
Connect your group to others. Use the chat feature to talk individually, or as a group.
Lesson Zest was an interesting project from Tribeswell LLC that changed and grew as the project passed hands. The logo, however, has endured and I'm happy to still see it living in the wild!
The original design for this sight prototyped with InVision, but had a fixed, left side navigation so the user could preview information in the main section. The demand for the user to continuously scroll could become tedious if the individual page content was too large, and a left side navigation could solve that problem while still giving the main section room to have spectacular background images.
As you can see on the logo samples page, there were many options to choose. These logos were first hand drawn, then built in Adobe Illustrator. The color choices were based on fresh colors and, of course, lemons! The final logo has two color variations depending on the background; green "Lesson" or yellow.
( I often pair logo samples on a light and dark background so the client can see the effect of background color choices. Using a #000 black background for samples can be too drastic, so I opt for a grey, instead.)