Recently, we launched the website for VMware Event Broker Appliance (VEBA) and I wanted to share my experience putting together the website for our Product which was designed with utmost attention to detail, our users in mind and with a lot of hard work. When i started with VEBA, we had a great product and the team was hard at work making major improvements. However, we didn’t have a website for our customers to go read and learn more about our product. While we had all the content for the product along with the source code on our github repository, it wasn’t easy to consume for our users.
Upon identifying this gap and as only team member that was working full time with VEBA (yes, the team works on their free time to bring #VEBA to its Customers), I took on this challenge and decided to get this done while the team kept churning out marvelous features for #VEBA. With the website, the goal was to bring a fast, user-friendly and easy to navigate website that had all the information needed to enable our Users as well as guide them through the product in an optimal way!
Tools and Skills required
Github pages if you didn’t know allows you to host a website for yourself, your organization, or your project directly from a GitHub repository
- A passionate team 😉
- Working with Github (obviously)
- General UX sense and (optional knowledge of) Gimp
Check my website built entirely using HTML, Dog photos and CSS — https://about.pdotk.com/ (..updates coming)
Within a few days, we had a skeleton of a website ready but it was long from being called done! Here is what the website looked like midway through it’s evolution..
Landing Page and Otto
While Otto_Original.png was cool, he wasn’t ready for our website. Thanks to Frankie Gold’s recommendation, i started exploring Gimp.
I spent a lot of time (a loooot of time) on Gimp making only a thousand renditions of Otto to finally max out on Gimp capabilities i could learn and ended up with our final version of Otto in three formats —
- a favicon for our Browser title (can’t not have a favicon)
- a logo image for our header and finally
- a hero image for our landing page
Alright! I now had a new skill in my belt that i’m going to use more than my high school mathematics.
What about the rest of the site?
We now had a decent landing page but quite a long way to go…
GOAL: A single go-to location to find all the external resources and references that mentioned VEBA.
I started working on our Resources page first and “digital transformed” it from having just links to have embedded videos, a twitter timeline and a featured external links section to complete the look.
GOAL: Documentation makes or breaks a product. I wanted our documentation to be concise, navigable. It should guide the user and ease their learning curve.
We needed a documentation navigation which should ideally not scroll with the content and the content organized into consumable sections. While this took a lot of grunt work, i was able to build out a structure and ⬅ thanks to our Patrick Kremer who helped out a “little”, our documentation was getting to be more easy to consume and structured to follow! In order to guide our users through the documentation, I included a way for us to programatically add the most useful sections that our users would want to head to next from the current section.
A first hand example of Patrick’s user friendly documentation is displayed in his blog on how he got started with #VEBA.
GOAL: The goal here was threefolds — show off our community and contributors, be the go-to guide for those looking to contribute and reaffirm that the team is open, available to help by providing a way to get in touch!
We added a top contributors section to showcase our contributors’ efforts to our growing list of functions and to our repository!
GOAL: This page would serve as a marketplace of sorts to enable our Customers to get started quickly. Our initial page that listed all the functions were focussed more on the language over the usecase that it solved and it didn’t provide crucial details to our users.
The Functions page was modified to provide more details about what the function does, the languages that it’s been implemented on and also the use cases that it solved!
FINAL CUT & extreme makeover for the homepage
While the additional UI elements that you’ll see in the published website were not necessary, i couldn’t sleep at night without some UI extravaganza. I took a lot of inspiration from these references below and reimplemented them to fit our website.
Day-Night Toggle with Background Animation
Image: Day-Night Toggle with Background Animation GIF This is a nice little SVG and HTML animation for a toggle switch…
CSS Only Flickering Effect Neon Text
Image: CSS Only Flickering Effect Neon Text GIF We have seen many neon text effects and this is a new one designed by…
Iron Man's Arc Reactor Using CSS3 Transforms and Animations | CSS-Tricks
Alright Iron Man fans, fire up your code editors! We are going to make the Arc reactor from Iron Man's suit in CSS…
Old Timey Terminal Styling | CSS-Tricks
I saw a little demo the other day called HTML5 Terminal. It has some functionality, but it seems like it's just kinda…
Presenting — vmweventbroker.io
I’m not a web designer (used to be a web developer) by any means but I believe this is my best web design work and that we have delivered a detail oriented website that will be a great foundation to #VEBA by benefitting our users while looking aesthetically nice with cool fun features.
Please provide your feedback on twitter (@pkblah) or in the comments below on what you like and where we can improve!
Please checkout our website and look for those not-so-subtle easter eggs on our website. It took several days and nights (see what i did there) worth of work to get this website launched
VMware Event Broker Appliance
Use event-driven automation and take your vSphere Events to the next level! Easily trigger custom or pre-built actions…