Project 3 Preliminary

[Megan Greaves]

For Project 3 I decided to take on a lovely little website for a company called Pacific Northwest X-Ray Inc, found here: http://www2.pnwx.com/
This site is a real piece of work. Navigation is confusing, hierarchy is non-existent, random colors are all over the place, and that background hurts my eyes. Another perplexing thing is that there is actually navigation not shown on the home page. Clicking on a random item will lead you to other pages with actual categorical navigation, which of course, is still a bit all over the place and confusing.

I would like to think that between my two concepts, there is something that might be considered a working layout.
These are the two versions of the homepage layout.

For demonstrative purposes, I also have these versions which demonstrate the dropdown menus. Will I regret this? Probably.

For the navigation, I decided to keep both forms the original site used, albeit with some refinement. The front page featured "popular items" which I narrowed down to common items, and the hidden navigation seemed to be broad categories. I kept the names of them but borrowed the actual list contents from what appears to be the alternate site here: https://pnwx.wordpress.com/. I didn't find this alternate site until after I started working, but it was useful to be able to borrow some of its content.

For my second pages I decided to actually create a new page that I felt that the original site (or sites, as it were) needed. I created a "contact" page where the contact information was neatly displayed but also had a way that a user to the site could request more information about products or placing orders anything else.

Honestly, I think my mobile versions are my weakest areas for sure. I haven't quite mastered that ability to make the mobile version, frankly, look good while still matching the desktop version of the site. I hope to get a lot of constructive feedback on these. I'm not really sure what to do with them.

Mobile homepages

Mobile dropdown menus

Mobile contact pages

A couple things to note: the "accessories" category, which I demonstrated in the dropdowns, is the largest category on that site, which is why it sits at the top, so the whole darn thing will fit. The others aren't quite so long. The contact pages my be slighty dissimilar to the other pages, the reason being that the other pages have a master while the contact pages do not. I intent to have the hovered over or clicked category name to change color. I think thats about it for the on topic stuff. I also wanted to let the people know who voted on my animal videos poll that I have in fact posted a couple videos to a topic I created, and everyone is welcome to post their favorite cute animal videos to it. I'm fond of baby seals, so that's probably the kind of content I will mostly post.

Anyway, I'm eager to get feedback from you guys! I worked really hard on these but I know they can be better.

[Cole_Richards]

Hi, I really like your designs, they definitely improve on the original website, I prefer the lighter design, the look is very clean and professional, definitely in line with the subject. There are some issues with how the images are sized in the different designs. Otherwise these are really well done!

[Elle Barre]

Hi Meagan,
You certainly took this company out of the Dark Ages into the Now, and made it classy. Big picture of the Doctor brings it alive and into this century: modern hairdo, young woman doctor (stethoscope: she's a doctor, not a technician) You've organized that tornado of information they have in those two sites into manageable groups of information and made it all accessible.

Here's what I would tweak in this enormous job you did (if this was my design and it will be when I totally steal it for my project):

I would somehow mute/neutralize/blur/fade/eliminate the xray itself: 2 reasons: it's a busy background behind a busy foreground (the 'browse by popular') and made my eyes kinda pinwheely. :- ), and 2., It's a brain and I started looking at it real hard, and wondering, is that a tumor? What's that? Mainly, it's distracting. It's going to be a medical target audience, but still, I think blowing up the image so it's mostly just a close-up on the doctor's face so she's not so far to the right of the page, and keep just a section of the xray she's holding. I think, that might create a subtle frame (on three sides: left: xray, bottom: her arm/shoulder, right: her profile) for the 'browse by popular' icons to 'gather in', while the xray could be very faded. And, now that it's moved far to the left, it could present a muted, bluey background for the navigation words, which I'd change to the sans-serif you use elsewhere in any case, and make them white against the 'bluey' background if you go that way. I think the serif font you've got there is so tall and skinny, accentuated by spreading them far apart vertically... it affects legibility and 'grouping' for me.

If you don't move the xray, I would somehow mute/neutralize/fade its appearance so it isn't fighting with the foreground. Then, the tightly-framed pictures of equipment will be easier to look at, could even be bigger, less crammed into their frames. Maybe that light blue for the circle frames instead of black would give the pictures in them a little breathing room, and, it would be a nice way of grouping them, very separate from the nav buttons, and search bar...

2nd page: drop down menu background... I would go for 100% opacity. So many words, it will be easier to read them with fully opaque background.
2nd 2nd page: I like the fonts (all sans serif) here much better. :- )

Mobile version (just talking the light one...) Again, I'd lose the distracting xray; fix proportion of the doctor so she's not distorted (that telegraphs "there's not enough room here"; pull Name down from the edge/corner; use that san-serif font for nav buttons and here's an idea: group them horizontally under the company name in two rows, 3 on top and 2 under, then you can order them so that Accessories takes a back seat, while still being on top enough that its drop down menu has room to unfold. That might be a way to put them on your pc version, too: in a banner right under the name across the top, so Accessories doesn't have to be first. Okay, going to copy you now. :- )

[kpargs]

Hi,
I proposed to do this website also, it's not that great...I like how you handled this one, The lighter layout is prettier to me, but for some reason the darker version seems like it contains all the information and navigation better. So have fun

[Fatkid53]

I do like turtle. Also, I like the lighter set you have going it definitely feels like the them is cleaner and the images/icons flow a bit better. The thing I might change is with such a clean design maybe take out the solid black stroke around the items and the data entry area and use a drop shadow to subtly create that same separation from the background. Otherwise awesome start, good luck with the next stage.

[Instructor]

More polling? With a meme answer? I'm in!

Put me down for a serious answer of the lighter design. It looks more "medical" to me. Cleaner and clinical.

Part of that is your excellent selection of background image. It both illustrates what your entire site is about and provides color and visual texture to your layout. You've then built a nice clean layout that collapses well as it sizes down into mobile. One of the benefits of super clean, high-margin layouts like this one is that they're pretty liquid and easy to collapse. Your header and navigation are well placed and easy to read. I like the way you hide the true scale of the website behind a set of dropdown menus. The whole thing is very clean. Fits well with the medical/clinical content. The pictorial based product navigation seems to be working pretty well too. You've got them labeled so people don't have to guess what they mean, which is a typical pitfall with icon/image based navigations and they're nicely illustrative.

I wouldn't squish your background image on the mobile design. Just crop it a little differently to take advantage of the taller height and narrower width. I'd also put a light spot, maybe a soft glow or something (see prerecorded class coming out tomorrow the 31st) behind your text area. The type fades a little bit when it gets into the x-ray. I like the all sans-serif look of your contact page better than the mixed serif and sans-serif of your home page.

BTW, don't sweat the large dropdown menus either. I went over how to do dropdown menus in my pre-recorded class on Tuesday the 29th. It's not hideous, although the selectors get a little long, particularly if you need to style the buttons themselves ("nav ul li ul li a" ahoy!).

Lookin' pretty good! I'mma go buy me some X-Ray equipment. What could possibly go wrong?

[Samantha_Thomas]

I think your darker box website design would work.
Don't get me wrong, they both would be very valid options, and both work significantly better than the original. The darker blocky version gives off a better vibe, at least for me, and still keeps the air of professionalism. Maybe in the future, you could keep that layout and mix it with lighter colors to see what it looks like. It might turn out to be super cool and organized mixed like that.

[lilykmitch]

Hi Megan
I like the first, lighter design. It looks a lot more professional and more modern than the boxed and darker one i think. They both are really good though! I think the only thing is to make sure the pictures arent stretched or distorted it seems like maybe they might be a little im not sure. Awesome job!

[zandrews]

Hi Megan!

Great start here with your website redesigns - each is strong in it's own way. It seems I may be the outlier here per your poll as most people liked turtles (lol I do like turtles too though) but I actually prefer your darker, blockier site. I feel the contrast just pops off the screen a whole lot more than the other set. That said, I am not sure I am totally feeling the boxiness of everything, particularly on the homepage with the items lined up below. I feel the items should be displayed on a separate page within the site on a white background so that it has a cleaner, more streamlined look (also just from a subjective standpoint I try to avoid boxes unless its a form or particular call out just cause it can get real crowded really fast with so many geometric shapes). Speaking of forms, your contact page is excellent and well spaced/thought out.

Honestly, if you go with the darker option, I would just move down the navigation bar and move the item listing to the "Equipment" page and then your home page will look super sleek. Great work on both of these though. A medical related website is hard to make interesting but with your use of colorful contrast, particularly on the dark option, I think you did a really great job! Looking forward to seeing which one you pick and move forward with!

[squidgola33]

I think you have a good start here, on the page where you the user puts in their information, the opaque image you have in the background makes it kind of difficult to see that black font on top. I would try choosing another image or different font or color.