I’ve spent some time this week adding some tweaks to our login/sign up page. The team seems to dig it. I added a noise bg image to the main for area, giving it some implied tactile value. I also removed the top bar, until the user is on a content page or logged in – [...]
I’ve been getting a few requests to have a special section just for UX visual elements, so here’s a wireframe I’m working on. I usually work like this: Personas>Spec>Paper wire-frame>Mockup>Build
Last year, we needed to visualize how the development team was going to work together. So I whipped up an amended venn diagram.
Back when we were introducing the UX/agile workflow to the team, I needed to put together a flow-chart to show how it was going to happen.
We’re planning on transitioning away from our legacy (table-nightmare) marketing website, and building use-case based micro-sites. Here’s the wireframe we put together: And here’s a couple links of iterations of it: http://www.blacklinetracking.com http://www.blacklinesafety.com
Here’s an old persona set we put together last year. It was a great exercise because we found we were designing for ourselves, and not our customers. We used input from both marketing and customer support.
Here’s a few mockups of static pages and their content holders. I designed these in Photoshop and hand-coded them with TextMate – all XHTML/CSS (CSS2 in some cases)
While we wont be implementing this until we choose a new billing gateway/provider, etc, this is an early mock I provided.
Blackline needed a solid but passive way to communicate via automatically generated alerts and password reset messages. We put together this simple email design. Right now, we’re testing it (notably in Outlook), with that fractal email validator I posted a while back.
Last week at work, Jesse implemented a new templating system on a few pages, called Mustache. We’ve got it working within Zend. It allows you to create matching jQuery and php code, so that you can have designers (like me) make forms look decent without messing up the validation and nesting.