AppCloud Dashboard Design Updates »
Created at: 29.06.2011 21:10, source: Engine Yard Blog, tagged: Product appcloud dashboard ui ux
Last week we rolled out a major application-centric UI redesign for our Dashboard, which lays the foundation for many awesome features coming down the path. We’re very excited about where the user experience is headed, and we look forward to all the improvements we have planned which will allow people to manage their clusters and applications more easily. However, we realize that not everyone is as happy about this initial step as we were. Our excitement to show off our changes led us to ship something that isn’t up to our usual standards of excellence, and for that we very sincerely apologize. We are definitely listening to the feedback we’ve received through emails, Twitter, support requests, and comments here on the blog. We are prioritizing the most painful issues and plan to address them as soon as possible. The list of immediate improvements include:
- Adding an instance summary for each environment on the dashboard so you can see what is running.
- Ensuring that the status indicator for environments and instances reflects the appropriate state.
- Showing stack updates on the dashboard index so you can see environments that need updates.
- Making active alerts for your environments more visible.
- Simplifying the process to add an application to a new environment.
- Clarifying when you are viewing a production environment.
- Placing the deploy button front and center on the new dashboard.
- Giving prominence to all applications running on an environment.
more »
Adding Apps and Environments »
Created at: 23.03.2011 17:00, source: Engine Yard Blog, tagged: Product appcloud new environment workflow ux
The time has come! Today we're rolling out the unified New Application & New Environment workflow that Jina wrote about last week.
Based on internal user interviews, we think the biggest cognitive shift comes when deploying an existing application to a new environment for staging or development purposes. In the past, you needed to create a new, empty environment and then manually attach the app from within that environment's Applications tab. From now on, you can use the "Add Environment" tool on the Applications index (see below).
For daredevils who want to deploy more than one application on an environment, there is an "Add to Existing Environment" button when AppCloud asks for new environment information (see below). Be sure you understand all the pitfalls before attempting this method.
One last thing: we've also implemented some pretty new form styles that, thanks to Josh Pyle's Uniform jQuery plugin, should render with enviable consistency across different platforms and browsers. Thanks, Josh!
more »
Front-end Maintainability with Sass and Style Guides »
Created at: 20.01.2011 04:22, source: Engine Yard Blog, tagged: Uncategorized haml sass ui ux
At Engine Yard, the User Experience team works frequently on the front-end (HTML & CSS) of our application, AppCloud. It's also common that our Ruby developers write front-end code as well. When the UX team began realigning the AppCloud UI, it involved refactoring the HTML & CSS for better efficiency. We also created a style guide to document the new front-end architecture. We're sharing the methods we've used and how it's helped us to work more efficiently on the AppCloud UI.
Modular CSS
Haml and Sass are two gems that are easy to include into your Ruby on Rails application. At Engine Yard, we use both of these to maintain our front-end code. Sass variables and mix-ins are amazing resources that make managing styles much easier. This is fantastic for maintaining UI elements and adhering to brand guidelines. Within our AppCloud front-end framework we have variables we've set up for our colors based on our branding color palette. That can look something like this:// --------------------------------------------------
// COLOR
// --------------------------------------------------
$color_border = #ccc // light grey
$color_background = #f8f8f8 // lightest grey
$color_background_alt = #cfdbe8 // light blue
$color_background_alt2 = #e3e5cf // light beige
$color_text = #555 // dark grey
$color_text_alt = #999 // medium grey
$color_text_alert = #910f0f // bold red
$color_text_callout = #236DA6 // bold blue
This way, when we need to use the color for our borders, we can just call on the color variable, $color_border. If we decide to change this color, we only need to change it in one place. If we need variations on this color (like for shadows and highlights), we can use that variable combined with Sass's built-in functions:
h1 {
border-bottom-color: darken($color_border, 10%);
}
We've used the "color_" prefix in these variable names to help avoid any clashes we might run into. It also helps provide some inline context (documentation is always a good thing). The important thing here is we keep our variable and mix-in names descriptive, but we avoid using presentational names that could change one day. By using $color_text_callout instead of $color_text_blue we don't have to change all of our variable names if we change the text from blue to red. We can use comments to help remind us of hex value colors which are located in the one place we'd make changes, if need be.
Variables and mix-ins are a great way to help improve and clean up semantic HTML (if it's done right). In our last related blog post, we mentioned that we're using the 960 Grid System which uses CSS classes like “grid_1”, “prefix_9”, and “alpha”. For the semantic front-end neat-freaks out there, this can be cringe-worthy. However, if you're not already using a framework like Compass, you can simply modify the 960 Grid System, allowing you to have the best of both worlds (modular efficiency and clean, semantic HTML). You can turn all the class names within the framework into mix-ins, which will make HTML go from this:
<div id="sidebar" class="grid_1 prefix alpha">
(content goes here)
</div>
to this:
<div id="sidebar">
(content goes here)
</div>
That's so much better, isn't it? We can do this for other common styles like clear fixes, rounded corners, visibly hiding elements, etc. If you define your UI elements' visual design styles as variables or mix-ins, you can have a much easier time updating these styles in a consistent way.
Maintaining an Interface Style Guide
Interface Style Guides are an essential way to keep track of branding and visual design guidelines and front end architecture requirements. The key to keeping a style guide useful is that it should stay relevant and informative. However, this can be a tedious task that often gets forgotten or avoided. Online style guides are easier to maintain and distribute as opposed to printed documents. To keep our style guide relevant, it lives in our internal-only admin section on the very same application it describes. We display our color palette alongside the relevant Sass variables and since we've built the style guide into the application using the same front-end, we can use the same variables we're referencing to render this palette. When we change values to these variables, the palette updates automatically.more »
Realigning the Engine Yard AppCloud UI »
Created at: 18.11.2010 02:04, source: Engine Yard Blog, tagged: News 960 css design ui ux
My colleague, Andrew announced the new Engine Yard AppCloud User Experience team about a month ago. We are very excited about the ideas we have for AppCloud's UI, and are working surely and steadily toward a better user experience. Along the way, one of our priorities was to refactor the UI's HTML/CSS for better maintainability and consistency. This allows us to work more efficiently on our design and front end architecture. Today, you will notice a major layout update: We've moved to a fixed-width layout. This is so the AppCloud UI can provide a greater experience on smaller screens -- still very important today with the popularity of smaller laptops and devices like the iPad. We opted for a fixed layout over a responsive fluid layout for now in order to maximize maintainability. In general, we believe fluid layouts are better suited for publication websites as opposed to applications. Instead of trying to reinvent the wheel, we opted for the 960.gs which is a solid grid system that is very easy to integrate into our workflow. Another change you will notice is that AppCloud is more tightened up and polished. We're implementing design systems for our typography, colors, form, tables, and other elements in our UI, which gives everything a consistent visual language. We'll show off our style guide in another upcoming blog post. We would love to know what you think. Please feel free to share your thoughts with us over email or Twitter.
more »
The Pixel Brigade Has Arrived »
Created at: 19.10.2010 20:20, source: Engine Yard Blog, tagged: Uncategorized appcloud design ui ux
Hi there! My name is Andrew Collins, and I'm here to tap dance with Photoshop and markup like vaudeville in its prime. Jazz hands!
Engine Yard recently hired me and Ms. Jina Bolton to work on Engine Yard AppCloud User Experience, and we're thrilled by the opportunity—it's an awesome team here at Engine Yard, let me tell you.
There's plenty of work ahead of us, and we'll be continually rolling out improvements just as fast as our fingers can massage those style sheets. You may have already noticed some of our handiwork—shiny new buttons and prettied-up text, that sort of thing. There are larger interface changes on the horizon too, but we'll save those for another blog post.
With those larger changes in mind, however, we're planning on launching some user study initiatives soon. Please get in touch with us (email or twitter) if you're in San Francisco and would be willing to answer a few questions or let us observe the way you work with Engine Yard AppCloud. We want to make things feel as effortless and human as possible, and we can't do that without tons of feedback. Don't be shy!
Speaking of feeling human, here's a photo so you can put faces to our names. Say hi if you see us wandering around the city or in the halls of some upcoming conference.
And, because it bears repeating, we'd love to hear from our users regarding Engine Yard AppCloud's aesthetics and usability. Just ping us via email or twitter and let's get to talking.
more »
Tag cloud
Categories
Links
Blogs: 43
Posts: 2516