What's My Title Today?

Throwback Design

2013-06-20T09:59:00.001-03:00

So right now the design trends are very simplistic, lots of white space, big buttons, flat colors. Think minimalist. Think flat.

Does this remind anyone else of the 90s?

I am sure I've been at this too long, and I guess my age is now showing. Everything often comes full circle, and design (in any form) is no exception... look at fashion design, it's like someone went through my elementary school clothing and tried to make it seem new again.

Of course there are new things thrown in there. Infinite scrolling is really hitting the main stream, as is parallax scrolling (I TOTALLY was designing a website for my singer friend years ago with this concept in mind... I never did finish the site tho - I should really go back and look at that some day. Maybe I was a bit ahead of the game there... of course it was built in Flex, a dying technology.)

Why these trends? Why this movement? In a word, mobile. I don't think it's any secret or any great epiphany that mobile is steering web design at the moment. People talk of "responsive layouts", I call them liquid layouts, same difference. But I think now it's more about uniform layouts. Web sites that can be shown on a large or small screen, look the same, act the same, and still be a good experience regardless of the device. This is definitely a challenge. I think this is where all this white space and simplicity comes from. You of course miss out on space usage since people tend to have larger and larger monitors now a days... and you miss out on cool use of gestures on mobile. So the argument then is that it's more important to have a uniform experience regardless of device. I can see both sides of the coin, but I tend to agree more with the majority, that uniform experience trumps coolness.

I should be able to look at a web site I often browse on my lunch break at work on my laptop later on my iPhone while waiting for the bus and just know how to use it. It should look and feel familiar. It should behave the same way. I shouldn't think "this site looks better on my iPhone" or "this is too hard to see/use on my iPhone".

What's happening, is what UXers have been screaming for for years, content is driving the site. No longer is the coolness factor having people logging on.... instead your content, which is, lets face it, the REAL reason you're online in the first place, is driving the design of the site. And that's as it should be, if you're a purist.

So as a UXer I can sit back and congratulate my peers on winning a battle... but now I have noticed a new one emerging from the ashes. Actually ironing out that content up front. I am finding it very difficult to have my clients decide what their content would consist of. Sure, we can come up with a site map, no problem. But what goes into each of those pages? They usually can't give me a real answer... and that's where I am struggling. How do I design a web site around content if I can't get the content out of my clients? They are so anxious to see a design, they can't wait for the content to be ironed out. I guess I need to put my battle helm back on.

http://www.hongkiat.com/blog/web-design-trend-2013/
http://onlifestyle.co/2013/05/22/weekly-infographic-web-design-trends-for-2013/
http://vandelaydesign.com/blog/galleries/flat-web-design/

InDesign default units

2013-05-16T10:44:00.000-03:00

I always found it annoying that when first creating a document InDesign it defaults the size in Picas. Call me unworthy, but I don't work in Picas, I work in Inches (yes I am Canadian, whatever metric system). So every time I would create a document I would go to Edit - Preferences - Units & Increments and change the Horizontal and Vertical Ruler Units to Inches. One day it occurred to me, shouldn't there be a way to set this once and have it the default so that I don't have to do this EVERY DAMN TIME? (Why it took me so long to think of this, I don't know. Don't judge.)

After just clicking around InDesign for a couple minutes I found no immediate way to do this, so I turned to my old friend Google.

At the end of this article (http://indesignsecrets.com/changing-indesigns-default-ruler-measurements.php) I discovered that there is a very simple way to do this, it`s just not all that intuitive.

Open up InDesign but do NOT open or create a document. With no documents open go to Edit - Preferences - Units & Increments...

Change the Ruler Units to your preferences and click OK.

It`s so simple! I wish I did this so long ago...

Illustrator Align to Artboard

2013-05-16T10:17:00.001-03:00

Don't ask me why, but me and the Illustrator Artboard have never truly gotten along.

I had a logo file that I wanted to export as a JPG on a perfectly square background so that it looked good on the client's Twitter and Facebook page. I knew how to get the artboard to be a square but I did not know how to center the logo on the artboard.

A little research with Google found me the answer. (http://kcoppock.wordpress.com/2007/03/18/adobe-illustrator-align-to-artboard/)

First to get the artboard square; File - Document Setup..., hit the "Edit Artboards" button. In the options just under the file menu there is W and H (width and height), choose the same number for both, hit Enter, voila!

Next, getting the logo centered on the artboard.

First I grouped all the objects in the logo (select all objects, right click, group).

Then I opened the Align panel (Window - Align).

On the Align panel I clicked the "Align To" arrow in the bottom right and chose "Align to Artboard".

I selected my grouped object then hit the middle and center align buttons on the Align panel.

Done!

Where have you been?

2013-05-01T15:31:00.002-03:00

Where have I been you ask? Well I went and had a baby, aka time sucker/love of my life.

I haven't been working much with code, so I have less to post about. I've been doing a lot of visual design and IA work lately and it's great!

Hope to start posting more often!

2011-09-28T13:02:00.001-03:00

Great example on creating and positioning TitleWindows.

http://www.mxml.it/index.php/2008/06/18/positioning-popups/

Paper Prototyping

2011-06-23T09:40:00.003-03:00

I've been pretty far down in the trenches the last couple months, hence my lack of posting. It's good to be busy, and working on what I love the most, visual designs.

A fun thing happened while on the client site last week, and I thought I'd quickly post about it.

I was there to present my visual designs and get feedback before the requirements doc was finalized. I had suggested to the client previously, with the recommendation of my company's UX Director, that I try some paper prototyping with some real users. They liked the idea, but didn't really speak of it much since. So there I was, on the client site, working away at some suggested changes made by the BAs in our morning session, and here comes a BA with a user. "Do you want to try some paper prototyping?" I was a little stunned, but luckily had my visuals previously printed (all be it in black and white). I took the user into a meeting room. Now this isn't something I had ever done before, I read a couple articles, looked at some examples online, but that was the extent of my knowledge. What the heck, right? No better way to learn. Jump in the deep end.

By the end I had some great feedback and a bunch of marked up papers all over the place in no logical order. You know what? It was fun. It was great to have a one-on-one session with a user. There was no one else there to basis him, or explain how something should work, or guide him into the right place. It was just me, my mock ups, and the user. That's real research.

I got to do it once more while there, and it looks like I will be making a trip back specifically for the purpose of paper prototyping.

So I've now convinced my client to let me do contextual research and paper prototyping. Hooray for advocating the value of user experience research!

Default Flex DateChooser to tomorrow

2010-11-23T11:31:00.006-04:00

I have a DateChooser control and I was trying to default it to have tomorrow's date selected. This is actually really easy to do, but it took me a fair amount of time to figure it out, so I thought I'd post this just in case anyone else has some trouble.

Create a variable for today's date:
[Bindable] private var today:Date = new Date();

Then set the selected date of the DateChooser. You may also want to set showToday to false so that today's date isn't highlighted.

<mx:DateChooser selectedDate="{new Date(today.fullYear,today.month,today.date+1)}" showToday="false"/>

The selectedDate property only understands straight dates with no time, which is why I had to assign it this way. If you're at the end of the month/year Flex is smart enough to know that date + 1 should take you to the next month/year.

Here is a sample with view source enabled.

Word wrap in AdvancedDataGrid

2010-11-19T12:20:00.004-04:00

So getting a column field to wrap in an AdvancedDataGrid isn't as easy as just setting the "wordWrap" property to true. Maybe it should be, but it isn't.

First thing's first. Do you have an itemRenderer on the column you're trying to wrap. If the answer is yes you have to make sure that itemRenderer is based on a wrappable component. For argument's sake, lets say you have a Label itemRenderer, well you're going to have to change that to be based on Text, and you're going to have to give it a width to give it the capability to wrap (percentWidth = 100 works nicely).

Then set your wrap-able column to wordWrap = true.

Finally set your AdvancedDataGrid to have property variableRowHeight = true.

Here is a link to an example with the view source enabled.

My first experience doing contextual research

2010-11-09T15:24:00.002-04:00

For some back story – I’ve been on this project for 2 years now. I’ve helped design and build two dashboards and have never had the opportunity to meet or talk with a user until now and I am no expert in the client's line of business.

I met with 7 users from 3 different user groups; 1 group per day; 30-45 minutes with each user, followed by an hour group session discussing the observations. A lot of them have similar issues. Issues within groups of users seem to be pretty much the same.

I found myself getting frustrated and having to consciously calm myself down while meeting with the users. Seeing the roundabout way some of them had to work just to use the system drove me crazy. If I had only been involved from the beginning in this capacity, and with the requirements gathering for each release, these poor users wouldn't have to deal with a system that really doesn't meet their needs. But hey, better late than never I suppose. That is the story of my life... the story of UX.

I had some follow up meetings with some managers and I could feel the overall manager not taking all of the feedback seriously. His job is to get things done quickly and at the lowest cost... and lets face it, UX takes time and money, and when done in the beginning will save so much time and money in the end. What I basically want is a redesign of a two year old system. That's a hard sell. But, being an outside consultant, I can push for my cause a little more than the average employee. That is why they hire us, after all.

I typed up all my observations and recommendations and sent them off to my manager. I broke them out into three categories; 1 – quick fixes, 2 – can be done leaving the main system as is, 3 – needing a total redesign.

Our plan of attack is to pull out the major changes and estimate how much time each one will save each user, and then do the math. Time equals money, and if the changes save enough money, we can go after some funding to make the system better. If nothing else, we can at least implement the quick fixes over the next couple months.

All in all, it was a very positive experience for me. I thought I would have been more uncomfortable with it all, being that I’ve never done contextual research before, but it was all very natural once I got there and was sitting with the users.

Spark Icon button

2010-06-30T14:39:00.002-03:00

So the Spark button doesn't have the icon property... which to be honest annoys me a little, but I do understand that they want the skin to be separate from the code.

Anyway, I made an icon button based on some other examples I've looked over.

To see the working example with view source enabled click here.

Spark ComboBox vs DropDownList

2010-06-30T08:25:00.004-03:00

I discovered yesterday that with the new Spark components there was no "editable" property on the ComboBox component.

I realized that the Spark ComboBox is always editable by default, and with no way to turn that off I was confused. Did a little research and found that to have what would have been ComboBox editable="false" in Halo is now simply DropDownList. Two different components.

I think it makes sense to have these separate.

Spark image button

2010-06-22T09:26:00.014-03:00

So skinning spark buttons with images isn't the same as skinning halo (mx) buttons with images.

It's a 3 part process.

components.ImageButton.as


package components
{
 import spark.components.Button;
 
 [Style(name="imageSkin",type="*")]
 [Style(name="imageSkinDisabled",type="*")]
 [Style(name="imageSkinDown",type="*")]
 [Style(name="imageSkinOver",type="*")]
 
 public class ImageButton extends Button
 {
  public function ImageButton()
  {
   super();
  }
 }
}

Script block


[Embed('assets/images/btnGoUp.png')]
[Bindable]
public var btnGo:Class;
  
[Embed('assets/images/btnGoOver.png')]
[Bindable]
public var btnGoOver:Class;
  
[Embed('assets/images/btnGoDisabled.png')]
[Bindable]
public var btnGoDisabled:Class;

MXML block


<components:ImageButton buttonMode="true"
   imageSkin="{btnGo}" imageSkinDisabled="{btnGoDisabled}"
   imageSkinDown="{btnGoOver}" imageSkinOver="{btnGoOver}"
   skinClass="assets.skins.ImageButtonSkin"/>

Here's a sample with the view source enabled.

What is a UX specialist?

2010-06-15T21:16:00.004-03:00

A UX specialist is the best thing your company never knew it needed.

Remember the day you got your first microwave? Your first cell phone? Your first smart phone? Your first DVR? Remember life before these devices? Can you imagine going back to that? What these devices do for your life, is what a UX specialist can do for your development company.

A UX specialist can make things run more smoothly. A UX specialist will always make a product better, and will make a client happier. They may need some time up front, kind of like how you need to spend time learning and setting up your smart phone when you first get it, but more often than not, the total time spent on the project will be less because all those bumps and kinks get sorted out right up front. Because of this, a UX specialist will make your other team members happier because their job will be easier and there will be less rework.

If you're running your TV without a DVR, you're missing out. If your development company is operating without a UX specialist, they're missing out. You may think everything is fine the way it is, but once you have UX, you never go back.

iPhone & iPad design PS goodies

2010-06-09T16:01:00.004-03:00

I have to very quickly come up with a design for an existing application for the iPad and the iPhone. No real time to learn some cool new tools (unfortunately). I am most comfortable in Photoshop so that's what I went hunting for for tools...

These are just awesome and so helpful...

iPhone: http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/

iPad: http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/

Flex 3 & Flex 4 Frankenstein

2010-05-26T15:02:00.002-03:00

So we have a large dashboard application built in Flex 3.5 SDK. Anyway, making it work with the Flex 4 SDK was annoying and took nearly a week.

So the client doesn't want to give me the time to rewrite the UI in the new spark stuff BUT instead slowly convert it over time. So I started to try that... doesn't seem possible. Spark components don't work with the "Use Flex 3 compatibility mode" box checked. When I uncheck that box my whole project blows up and looks totally messed up.

So my ultimate conclusion is that a Flex 3 Flex 4 Frankenstein is not really possible.

Flex 4 SDK - backwards compatible?

2010-05-17T15:57:00.003-03:00

So for the last few weeks I have been trying to get our current Flex 3.5 SDK to the new Flex 4 SDK. Wow. Backwards compatible? Not really.

After much annoyance and code changes, I finally got it working and running without run time errors. Now there are lots of things wrong visually mostly with the fonts.

What I am discovering is that the CSS inheritance seems to be lost. For example, if I have a VBox that has its color style set to white, its children are not white. Not sure what is up with that. So in my Application style tag I had the font family set... but it's not picking up on all the components inside the application, which means there are lots of problems with labels being too large and not fitting properly.

So now I am messing with the CSS files and the component files.

So far my take on the backwards compatibility? It's barely there. I mean everything functions okay (once you get all the initial errors and warnings cleaned up) but there is going to be a lot of work visually.

Looking for a website?

2010-05-12T14:35:00.003-03:00

I'm looking for some freelance work if anyone knows of someone needing a website.

I'm done my latest side project and usually like to have one on the go at a time.

You can see samples of my work here: angelaportfolio.com

East Coast German Shepherd Rescue

2010-05-07T09:00:00.004-03:00

Yesterday I put up the newly redesigned and rebuilt East Coast German Shepherd Rescue website.

We adopted our German Shepherd, Keely, from this rescue. Since then I have chatted off and on with the founder of the rescue, and have gained the up-most respect for her and what she does. I wanted to help, but wasn't sure how. One day she mentioned how difficult it has been to get updates to her website, and new dogs that come into her care can't get adopted if no one knows about them.

And so I began a mission to design a better website.

How it is currently is only the first round. I need to learn more about PHP and different content management systems. The ultimate goal is to enable her the ability to update the website easily herself. I also have several ideas to make the site better, more interesting, and to get more funding.

Here's a link to the site (iteration 1)
http://www.ecgsrescue.com

Learning Flex 4

2010-05-04T11:21:00.004-03:00

I am watching a few videos on Flash Builder 4 (or Flex 4) from Adobe's site.

http://www.adobe.com/devnet/flex/videotraining/

This is my first taste of the Spark components, and let me tell you, they are so much better and easier to customize. They haven't transfered all the components over to spark yet, so we'll still have to use some MX components, but they have done a lot of them already, and are continuing to work to get them all converted.

I haven't tried to actually do any real work with this yet, but so far it has my vote.

VSS plugin for Flash Builder 4

2010-05-04T09:40:00.003-03:00

So the new "Flex Builder", now called Flash Builder, is out. I have recently installed it... all was fine until I tried to use the VSS plugin. It wasn't being recgonized.

Now I know you need the Java Development Tools plugin for it to work... but I couldn't find that either. They really changed the whole install new features thing in Flash Builder 4.

So I hunted on Google for a while and found my solution, install it manually:

http://renaun.com/blog/2010/03/31/416/

Thanks Renaun!!

PHP photo viewer script

2010-04-23T15:59:00.001-03:00

Very cool and very simple PHP/Javascript photo viewer script.

http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm

Perfect for handing off to a client that doesn't know how to code html but that is computer savvy enough to drop images in a ftp directory.

Dreamweaver

2010-04-23T14:33:00.003-03:00

So I never really truly appreciated Dreamweaver until recently.

I had never really used the ftp function of Dreamweaver (insane I know). I'd use it to write html and css code, then I'd just put the updated files on the server using a generic ftp client.

Now that I am maintaining several sites that got tiring, so I looked into and started using the built in Dreamweaver ftp functionality. What a difference! Just a right click away from putting changes up on the server. It's quite wonderful actually.

I always knew it existed, I just never bothered to use it.

Just goes to show... just because you do things a certain way and it works fine, doesn't mean it's not worth learning a new way.

Simplistic web design

2010-04-06T19:42:00.002-03:00

So I am kind of digging this whole move toward more simplistic, minimalistic web (and other app) design. I like the feel of space. I like that there isn't lots of distracting chrome and boarders. It's all about the content, it's all about getting what you were trying to get done, and that's the whole point isn't it?

Now don't get me wrong, I love color and added interest. - I am a bit of a color nut to be honest. Whenever I check out http://colorschemedesigner.com/ (aka my most favorite place to get a new color scheme) I always pick the tetrad first. - I just think there are better ways of adding those things than a lot of what we have been doing. Clean and simple. That's the new way to go.

http://sixrevisions.com/design-showcase-inspiration/40-beautiful-examples-of-minimalism-in-web-design/

Publishing this blog on another website

2010-03-03T09:52:00.003-04:00

So I am working on a new portfolio site and I wanted this blog to be featured on that site. I didn't want to show a link or just a feed digest, I wanted the entries in FULL shown on the website. Well... little did I know it was so easy. I spent hours looking for a solution that was built right into something I already subscribed to! Feedburner that is.

I found the info I was looking for here:
http://www.tipandtrick.net/2008/display-and-show-feed-on-html-website-with-feedburner-buzzboost/

You can subscribe to Feedburner very easily if you already have a Google account. Then you can burn the feed by just putting in your feed address.

Then click the Publicize tab. Click BuzzBoost. Fill out the form and choose FULL HTML. Once you're done it will give you a script to put into your website. So easy and so very awesome. You can also style it to look however you like using CSS. Perfect.

Using Flex's default cursors

2010-01-28T13:22:00.008-04:00

So I made my own component, and I wanted the default move cursor that Flex has built in to appear on the mouse over of my component. I thought this would be an easy task - oh how wrong I was.

An hour of researching later I was no further ahead, besides discovering that mx.skins.cursor.moveCursor was in fact a style and the image was in Assets.css (from this helpful webpage here: http://www.loscavio.com/downloads/blog/flex3_css_list/flex3_css_list.htm). It occurred to me that I know how to get a value out of a CSS file, and therein lied the solution.

[Bindable]
public var myCursor:Class;

//Called on creation complete
public function complete():void
{
myCursor = mx.styles.StyleManager.getStyleDeclaration('DragManager').getStyle('moveCursor');
}

//Called on mouseover of the component
protected function mouseOverWindow(evt:MouseEvent):void
{
CursorManager.setCursor(myCursor);
}

//Called on mouseout of the component
protected function mouseOutWindow(evt:MouseEvent):void
{
CursorManager.removeCursor(CursorManager.currentCursorID);
}