Justin Carter's madfellas.com

Redesigning the FarCry 7 Webtop Header

At Daemonite HQ we've been working away on the upcoming release of FarCry Core 7.0. The long list of goals for FarCry 7 included Cloud and PaaS friendliness, support for CDNs, bulk upload of files and images, queued processing of image crops, startup performance enhancements, better archiving and undeletes, a new site tree with instant previews and device type switching, and a redesigned webtop.

There are a number of features that make the new webtop nicer to work with and nicer to look at, and some features which are subtle but useful.

1. Client / project branding

You can now upload a logo for your project which will display in the top left corner of the header. FarCry of old used a text label for the site title and an optional tag line, but if you happen administer a lot of FarCry sites their respective webtops can begin to look the same, so using a logo to quickly identify a site is a nice touch.

2. Improved navigation

FarCry has always used a tabbed UI in the header and a long list of navigation links on the left hand side, with a drop down toggle to move between subsections. For large applications with many dozens of features it may have taken up to 4 clicks and a little waiting to get to a particular part of the application. The new webtop header in FarCry has familiar tabs at the top with multi-column drop down menus that activate on hover for desktops, meaning you can reach any part of the application in just 2 clicks.

3. Environment indicator

Developers, application testers, producers, content contributors and administrators will often find themselves switching between different operating environments of the same application, i.e. development, staging, production. The thin green bar you see at the top of the screenshot indicates that the application is running in a production environment, and it expands to reveal the environment name and domain / IP address / port number that the application is running on. One nice feature is that if you forget to configure the environment you'll see the red "Unknown" indicator, which is a good trigger for making sure that you're indeed working in the correct environment.

4. Favourites / starred pages

This is just a small feature that is helpful if you have access to a large number of areas of an application but need to access a few key sections quickly or frequently. Simply clicking the star icon will favourite (or unfavourite) the page, and clicking the favourties drop down toggle will show you your current list of favourites for easy navigation.

5. Profile menu and avatars

You can now edit your profile or log out by using the profile menu in the top right corner of the header. A profile avatar can be automatically picked up from your email address using Gravatar or you can upload a profile image when editing your profile. This is just a small touch but helps to make the webtop a bit more personal.