One of the first things you notice about the new Microsoft homepage is the position of the main elements. From the main navigation at the top, to the drastically changing left margin, Microsoft’s previous website was much more usable, organized, and beautiful.

On the old website, the main navigation was on the right to give focus to the main content to the left. The highlighted content stood out among all the rest and was both colorful and bold. On the redesigned site, the main content does not stand out and is not aligned with the main navigation. What’s frustrating as a user is that the secondary content below is indented on both sides even more than the main content, making the page seem top-heavy. Additionally, the main navigation feels scrunched into it’s container and selecting an item reveals merely a large lists of information. The strength of the previous navigation was the use of images and text when clicking an item. As a whole, the previous design was easy to follow and intuitive, but the new page is difficult to browse and sloppy.

Speaking of sloppy, the actual items within the page are not aligned evenly. While the main navigation is about 82 pixels from the left and right edges, the Microsoft logo and slogan differ by 10 pixels. The location marker on the top right of the page is similarly misaligned with both the navigation and the slogan. The highlighted content below the navigation is about 6 pixels too short on the right.

You might be asking, Michael, don’t you think you are nitpicking a bit? The answer is no. If you look at any good corporate web design, the alignments, the colors, even the fonts are chosen for a reason. Sites like Apple.com or NVIDIA.com are simple, clean, and effective at bringing users to the content that’s most important to them. The new Microsoft.com is only a shadow of it’s previous self and fails to adhere to the number one rule of web development: content first.

As a means of demonstrating my point, I have done a quick touch-up of the new Microsoft.com. I altered alignment and spacing mostly in an effort to stay true to the new design, but you can see what even subtle changes can do to improve a design.

I hope that over the next month their new homepage is reconsidered. As a company, Microsoft cannot afford to appear sloppy and out of touch with people, but right now they have a long way to go. I find it amazing that a company like Microsoft continually falls short. For the record, how could they not champion Windows Vista, which I added in my revision image as the first item? Despite it’s flaws, Vista is a good operating system and ignoring it does not exude much confidence. As a long time supporter, they need to stop cutting corners and start doing something differently. Right now, things just aren’t working:

For more information, check out their website.

At first glance, the Erskine website is well organized, features a simple but usable color pallet, and is very accessible. However, let’s take a look at some of the sites more specific strengths and weaknesses.

Strengths

1. The layout of Erskine’s website is a fluid grid-like layout. The top banner introduces viewers to the company and provides subtle illustration work. Organized and clean, the layout draws the eye around content that is both prioritized and accessible.

2. The color scheme, while dark, is not distracting or gloomy. The green link color coupled with the pink accents add to the design and is a balanced way of making the text items distinct. Overall the dark values of the site draw attention to the prominently featured portfolio items.

3. Site Navigation: The pages are listed horizontally across the top of the page above the banner - there when you need them, out of the way when you don’t.

4. Less is more. The reason the layout works so well is that it’s not covered in ’stuff.’ It’s simple with easy to understand copy (writing) and with special attention given to accessibility. These items include title items on links, alt tags on images, avoidance of Flash and small fonts, and a high attention to detail.

Weaknesses

I can only find one weakness worth mentioning: the lack of empty space. While the site features an organized layout, the lack of space without text or images makes it hard for the eye to rest. While this is not inherently a large issue, a few more blank areas for the eyes to rest wouldn’t hurt.

Conclusion

Taken as a whole, the Erskine website is a beautiful piece of XHTML and CSS. With a fluid, organized, and accessible layout, visitors can easily navigate the content. With a unique blend of colors and style, it’s easy to see why Erskine enjoys such a large and loyal following.

Remaining bugs:
Outdated ‘Submit’ button.

IE: No padding below comment login
IE: Improper formatting of some comments.

All these issues have been taken care of. If you find anything else, please don’t hesitate to contact me - I greatly appreciate the effort!

-Mike

Today was a big day for me. Being Dugg has been a dream of mine for a while. Now I won’t say that there weren’t many who thought my ad were real and had their wallets ready, because there were, but that’s not the part that interests me most. It’s those individuals who took the time to really look at my work, whether they thought it was real or not, and tore it apart. Here are some of their comments, paraphrased:

“Apple would never use that kind of grammar.”

“I can’t tell if it’s fake or not - it looks too rendered.”

“The layout looks poor and there’s evidence of font kerning (otherwise known as poor font smoothing - thanks Photoshop!)”

“The dock icons are incorrect and the shadows look off.”

Well, to all those who chimed in - thank you. It was a pleasure to receive your comments. So much so, that I’ve already updated the ad, and while the copy (writing) needs work, the render looks better than I ever thought it could. I couldn’t think of a better result than to be on MacRumors, 9to5 Mac, and Digg. This opportunity gave me the chance to reflect upon my craft, and for that, I am truly honored.

For those of you who may be making your way here from Digg, MacRumors, or any other website, I hope you have enjoyed and appreciated your visit. I look forward to what the future holds and am just as anxious as the rest of you to see the real MacBook Pro revealed. Hopefully it will be before the end of September =).

UPDATE: It’s been almost a day now and my ad is making its way around the interwebs. While many are still calling fake, please realize that this rendering is really a piece of art, one that represents hours of work. I cannot tell you how frustrating it is as an artist to have something you’ve created be criticized without being able to say, “Hey, I’ve updated this!” or “I’ve already fixed that!” Regardless, I hope people realize, sooner or later, that the ad was simply a Photoshop demonstration and was not meant to be considered the real thing. For those of you who dugg it, I’m glad I could wet your MBP appetite.

UPDATE 2: Well, the Digg number has finally settled close to 2200. A quick Google search reveals that I fooled many into believing the ad, although a bit rough, looked authentic. With many people claiming it to be an accurate progression of the MacBook Pro line, I have since updated my concept (available in my portfolio with a revised advertisement) to enhance it’s realism. For the most part, I am pleased with the result. A sample is presented below.

Regards,
Michael

When Apple CEO Steve Jobs previewed OS X Leopard in 2007, he made sure to point out its “prominent active window,” notably a reaction to the updated interface of Windows Vista. However, do his words hold up? Let’s find out.

The first obvious difference between Leopard and Vista is that one uses transparency while the other does not. This itself presents our first problem for Vista. Because the window is transparent and there is no defined color, the interface must rely on whatever object is behind to help paint the window. This creates a lack of control for the window styles. In addition, the use of white highlights to decorate the window will become unreliable with a light or white colored background. Leopard does not have this problem because the interface is solid and 100% reliant upon itself. You could argue that I am completely ignoring the coloring effects of the desktop window manager (DWM.exe) which create the default blue hue on active windows. However, much of the time that color is washed out by its background and certainly does not compare with the solid colors used in Leopard.

The second thing one notices when comparing Vista and Leopard is the use of depth. It is universally recognized that the further a color is from the eye, the darker and more muddy said color becomes. In Windows Vista, the active window uses colored glass coupled with opaque diagonal effects; in Leopard the active window is a deep gray gradient.

Therefore, keeping what we know about depth and distance in mind, Leopard’s interface is counter intuitive. To have a dark window represent active windows and a light window represent inactive windows is peculiar. Nevertheless, Leopard’s use of color and shading on active windows is much more apparent than the more flat inactive state, allowing active windows to appear more dynamic. Thus active windows pop off the screen more and inactive windows seemingly blend together. This effect is enhanced with the addition of coloring on the minimize, maximize, and close buttons, and a large drop shadow on the active window.

Windows Vista’s use of depth is limited. Because of the transparency, the window style cannot be as adaptive. The difference between the active and inactive states is merely a change in the amount of opaque effects within the glass. Nevertheless, the large minimize, maximize, and close buttons help the user differentiate between inactive and active windows with color clues. While Leopards window style is gray, Vista has the advantage of using color. When in an active window the red close button is more apparent than the smaller, circular buttons in Leopard. Additionally, Vista uses subtle coloring effects around the bottom and right side of window borders as well as within the glass to bring prominence to the active window. Nevertheless, the differences between the active and inactive windows are not as pronounced as Leopard because the transparency cannot blend less or more than it already does, which makes it more difficult for the perceived depth of the windows to change enough to create a clear distinction.

One last difference to mention between Vista and Leopard is that while one features a full border, Leopard does not have left and right window edges. While this works in Leopard’s favor to focus priority on content, the change to the borders in Vista between the active and inactive states helps round out the transparency effect and keep a consistent look. It also keeps window contents from blending in with surrounding items and other windows.

So who’s the winner? The active window in OS X Leopard is more effective and differentiated from the inactive window than Windows Vista. Despite the counter-intuitive usage of light and dark gray in Leopard, Vista’s glass effect does not allow enough distinction between inactive and active windows. While the subtle differences between the window styles in each operating system work well, the overall effect is accomplished better by Leopard, but there is certainly room for improvment.

Have you ever noticed a picture that didn’t look quite right or a website where some of the colors looked flat and blended together? It may have something to do with your monitor’s color settings. Here is how to fix it:

Grab a pure white piece of paper and put it over half of your monitor. Find a place on your screen (a blank Word document, a web page with a white background, or a blank Paint document) and see how the white of your monitor compares to the sheet of paper. If you notice any hints of color, your monitor is incorrectly calibrated.

Now I fully intended on writing my own color calibration tutorial, but J.L. Morton of Color Matters has an excellent guide already written with detailed information for users with more questions and deserves credit for his great article. Morton walks you through finding your monitor’s gamma, black and white value scale, and color consistency. Hit up the link above to follow his tutorial and get your monitor correctly calibrated!

Summary of Key Points

• You may buy the iPhone 3G for $199/$299 (subsidized) as a new subscriber or as a first generation iPhone customer. You may be eligible for subsidy pricing if you are in good standing as a current subscriber.
• Current AT&T customers not eligible for upgrade pricing will be made eligible at the launch of the iPhone 3G (this makes sense because subscribers who skipped the last iPhone, or those who purchased plans last year would otherwise need to wait, eliminating a large sector of potential buyers; the phone has only been available for 12 months, less than the length of the average contract.) This is my own personal guess, but good standing and good credit might apply.
• If you receive the iPhone at the subsidized price and cancel your plan within 30 days, you get your money back, but must return the phone. If you cancel your plan after 30 days, you get to keep the phone, but must pay the Early Termination Fee (ETF).
• You may use your iPhone on another plan once canceled after 30 days, but the full features of the phone might be unavailable.

For privacy, the representative’s name will be hidden.

Me: I was planning on buying the new iPhone, but according to what I’ve heard, if you did not purchased the 2G iPhone, or aren’t a new subscriber, you are not eligible for the subsidized prices of $199/$299. I was hoping you could verify this for me.

Representative: Correct, it is set up for someone who just got the last one, and now there is an upgrade.

Me: So if I bought one I would have to pay the unsubsidized price and I cannot cancel before 30 days or AT&T takes the phone even if i don’t buy it at the subsidized price?

Me: I thought if I bought the phone and a plan I owned it?

Representative: I am sorry, I do not think I understand the question.

Representative: You do own it.

Me: I heard that if you buy the phone subsidized, but then cancel your account before 30 days, you must return the phone and I was wondering if this was true AND if it held for someone like me who would have to buy the phone unsubsidized.

Representative: I am in technical support, so I would need to research that for you. I would be happy to do that, if you can allow me five minutes to see what I can find out?

Me: Sure thank you. I appreciate your time–I know you must be getting a ton of questions about this phone.

Representative: I will return.

Representative: Device Pricing: $199 8GB and $299 16GB for new activations and qualified upgrades with 2 year agreement

Me: Ok, so that appears to be the subsidized price.

Representative: That is the price.

Representative: It is cheaper, but the data plan will be more.

Me: I am not eligible for the subsidy because i just got a phone a few months ago. Are you saying the $199/$299 is for unsubsidized plans also?

Representative: Data Plans & Pricing The 3G iPhone will be activated on existing AT&T voice rate plans, but new data plans have been created for the 3G device. All 3G iPhone customers are required to have one of the new data plans and qualifying voice plan Customers intending to use the 3G iPhone for access to corporate email, business applications or access to corporate intranet are required to activate with Enterprise Data Plan for iPhone The 2G data rate plans will remain available for 2G devices until further notice IRU service discounts for both voice and data plans will apply to 3G iPhone, but not 2G iPhone CRU service discounts for voice and data will apply to both 2G and 3G, when on a qualifying data plan IRUs will not get a discount on device purchase for 2G or 3G iPhones

Representative: Yes.

Representative: It is the straight up price, it is already cheaper.

Me: Device Pricing: $199 8GB and $299 16GB for new activations and qualified upgrades with 2 year agreement.

Me: I wouldn’t be a new activation or a qualified upgrade though, at least that’s what I assumed.

Representative: Yes, it would add two years, I believe. I am still reading.

Representative: Upgrade eligibility will be determined based on standard upgrade eligibility rules. Customers must be upgrade eligible to receive the qualified upgrade pricing. However, not all customers will be qualified upgrades. AT&T has not determined the price of the 3G device for non-qualified upgrades. All customers will be required to sign a 2 year agreement. There will not be a “no commitment” price for the 3G iPhone.

Me: So i wont be eligible for the $199/$299 price?

Representative: NOTE: When the 3G device launches, all active postpaid customers in good standing with a 2G iPhone will be eligible to receive the qualified upgrade pricing for a 3G device regardless of service tenure (customers that would not otherwise be eligible due to tenure will be made eligible at launch).

Representative: It would be determined by your existing service standing.

Me: okay

Representative: Like how often someone is late on the bill, or how much money they spend with us.

Representative: Things like that determine your eligibility.

Me: So if I’m on a family plan and have 18 months left on my contract, if I were in good standing they might say “You are upgrade eligible?”

Representative: Yes.

Representative: A family plan spends more money, that could help.

Me: Okay

Representative: When the 3G device launches, all active postpaid customers in good standing with a 2G iPhone will be eligible to receive the qualified upgrade pricing for a 3G device regardless of service tenure (customers that would not otherwise be eligible due to tenure will be made eligible at launch).

Me: “Customers that would not otherwise be eligible due to tenure will be made eligible at launch.” That would include someone like myself if in good standing?

Representative: That is what it is saying in my information.

Me: Even though I’m not upgrade eligible, I would be made eligible for the phone at launch?

Representative: I understand, that is what it sounds like. That is only fair because it has not been out that long.

Representative: Activation of 2G devices will continue to be activated via the existing iTunes tether process Existing 2G data plans will remain available for 2G devices until further notice

Me: Good point. Even if you got a phone last June you wouldn’t be able to get an iPhone now still if you weren’t upgrade eligible.

Representative: They have to take that into the process.

Me: AT&T would eliminate a good chunk of revenue if they didn’t make people eligible at launch

Representative: The return policy for 3G is changing from 14 days to 30 days for both Apple and AT&T stores. To cancel service within the first 30 days, the customer must return their equipment to the place of purchase (no exceptions). If the customer cancels service after 30 days, they will be charged the ETF. The customer is not required to return the device to cancel after 30 days.

Representative: I have tons of information!

Me: “To cancel service within the first 30 days, the customer must return their equipment to the place of purchase (no exceptions). If the customer cancels service after 30 days, they will be charged the ETF. The customer is not required to return the device to cancel after 30 days.”

Me: So I would have to return it, but I would get my money back if i cancel within 30 days?

Me: After 30 days I can cancel and keep the device, but pay the ETF.

Representative: That is what it says, but anything is subject to change.

Me: if i were to cancel after 30 days and pay the ETF—I could still use the phone with AT&T on another plan–I just wouldn’t have any of the extra goodies like visual voicemail etc?

Representative: It is just like any other contact with this one.

Representative: It would be like any other PDA, you would have “issues” with it without the iPhone data plan.

Me: Would you mind explaining the issues one might have? Would they go away if you added a data plan?

Representative: Yes, they would, but without it you may not be able to use the phone. You might as well, just work through the contract.

Representative: Not, pay the ETF and be it is yours in two years.

Me: “Not, pay the etf and be it is yours in two years.” What? I don’t understand what you mean.

Representative: If you cancel after 30 days you will pay the early termination fees.

Me: Yes, and you’re saying the phone might not work if i cancel the plan or might not work with all the features?

Representative: Correct.

]]> http://www.mciarlo.com/2008/06/iphone-3g-att-voice-data-plans/feed/ http://www.mciarlo.com/2008/05/cairo-windows-shell-alternative/ http://www.mciarlo.com/2008/05/cairo-windows-shell-alternative/#comments Mon, 26 May 2008 16:47:46 +0000 mciarlo http://www.mciarlo.com/?p=14 A brief look at my desktop environment for Windows Vista and XP that offers numerous improvements over the dated Windows explorer.

Source: Cairo: Windows Shell Alternative » Home

Cairo replaces the Windows taskbar, ‘Start’ menu, and file explorer with its own incarnations. The problem with much of today’s interfaces isn’t that they don’t work, but that they don’t necessarily work for everyone and don’t provide the best experience possible. With Cairo you can transform your desktop from the dated Windows user interface to a brand new system that will change the way you use your computer forever. Taking advantage of proven functionality, and with stability and performance in mind, the Cairo Desktop system aims to give users a productive and easy to use shell that advances current technology standards.

Productivity

When it comes to making the most of your time, Cairo gives you the tools to work effortlessly and at your own pace. Powerful features give you flexibility and control.

Cairo Programs Menu
While the Windows ‘Start’ menu has progressed over the years, it still falls flat. Cairo’s applications menu allows you to easily browse through programs without excess clutter. Powerful options allow users to see recent files by application and open them without an extra window.

Multi-Desktop
Switching between multiple ‘virtual’ desktops allows you to utilize the space of multiple monitors without all the hardware. Keep yourself organized with powerful tools to swap windows between desktops or add and remove them at your whim.

Cairo Taskbar
Advancing the ‘taskbar’ concept, Cairo gives users the freedom to swap and group applications for easy-to-manage work-flow patterns. Integrating fully with the Cairo Multi-Desktop and other Cairo features, the Cairo Taskbar automatically adjusts to your application usage and is fully customizable.

Customization

Wouldn’t it be nice if you could pick and choose features and adapt your computer to meet your needs? With Cairo, you can customize your experience any way you want it.

Cairo Plug-in System
With low-resource plug-ins and endless possibilities, Cairo allows users to install, remove, or customize any extraneous feature. Each plug-in is thoroughly tested by Cairo developers for stability and performance, and to ensure that users enjoy an error-free desktop environment.

Drag and Drop Control
Many Cairo features include drag and drop functionality to easily add or remove options. Many specific tasks have multiple variances that allow the user to perform functions in a manner most comfortable to them. Finally, with an easy installation and configuration, you can be up and running quickly without unnecessary prompts. Should you choose, Cairo uninstalls just as quickly and is guaranteed not to conflict with system files or user data.

Design and Functionality

Today, design is emerging at the forefront of significance in all areas of life. Cairo applies fundamental design principles and philosophies to ensure a pleasurable and meaningful user experience.

Cairo File Explorer
With a sleek interface and organized layout, the Cairo File Explorer allows users to focus on their data without having to go on a treasure hunt. Despite it’s ease-of-use, the Cairo file browser harnesses a powerful blend of tools and option to let managing your hard drive as easy as drag and drop.

Dynamic Desktop
Browse files directly from your desktop. Not a power user? Just need a file quickly to show a friend or open in an application? With the power of Cairo’s Dynamic Desktop, users can access their documents, movies, and pictures without opening a window. Unique browsing options make it quick and fun to explore your data and the best part is that the dynamic desktop system works in tandem with the Cairo File Explorer to deliver unprecedented integration and functionality.

]]> http://www.mciarlo.com/2008/05/cairo-windows-shell-alternative/feed/