Blog 15 - Web Critique & Analysis

I reviewed two sites - Le Tote and Stitch Fix which are two sites that deal in paying a subscription to receive styled clothing in the mail. However, they are different in that Le Tote lets you wear and return the clothes whereas Stitch Fix styles the box for a nominal fee and you keep what you want, return what you don't.  The styling fee is then applied towards whatever you buy.

Here are some of the observations from the sites:

Le Tote -

• They communicate this is a styled clothing box for a fee where you can wear the clothes and then return them when you're done.  
• Its obviously for women only and excludes: men,children, and anyone who doesn't want to shop online.  
• Its easy to determine how the site works.  They have a "how it works" video that lays it out very well and all their text makes it clear what they're doing. 

Stitch Fix - 

• This site is very similarly set up to Le Tote.  So all the same bullets above apply; however, there is way more information available on the homepage about what the program is and how it works.

Both sites are very easy to navigate and find more information about.  It's also very easy to sign up and take the necessary actions.  HOWEVER, you cannot see any products or samples until you sign up.  So you HAVE to sign up in order to see more information! 

Both sites are also bright, classy, stylish, and easy to use. This is important since these sites cater to women and fashion.  Their audience is obviously those women who have more of discretionary income that want to change their wardrobe more often but either can't style for themselves or don't have the time.  Therefore, having a clean/classic/feminine site is a central theme of both. 

I like both sites but I do think that it's a pain that you MUST create an account to see anything more. I think they ought to offer sample photos or something that gives you a little bit more.  But then again, you're way more likely to sign up and pay for a box when you already have an account. Check out the homepage for the sites and see what you think!! 

Both sites use javascript and some web kits.  

I think these sites make shopping online much easier. Not only does the service make it easier in general to shop online, but its less overwhelming than going to Macys or Nordstroms.com and scroll through hundreds of pages to find what you're looking for.  

Plus, they offer you some customer photos so you can see the products on real customers which is really helpful.  I love both these sites and their services!! 

Blog 14 - UI, UX What's the difference?

I think this graphic is a great way to represent UI vs UX.  I saw it and thought - YES that's a perfect way to put it in simple terms.  For the most part we have all eaten ketchup and though the product on the right is the very same as that on the left, we all know the difficulty of the glass bottle.  As you pound away on the bottom of the ketchup trying to get just a little sauce onto your plate or food.  Until we resort to the good old knife in the bottle which is not very hygienic and doesn't provide that much ketchup anyway.

So then you get the squeeze bottle - same product with an entirely different experience. It's simple, easy and fast!  You get what you want, when you want it without a big fuss or mess.

So UX is the user experience while UI is the user interface.  While both of these refer to different things they do work together to provide a user with a "whole" experience.

You have to make sure the product works and provides the service/functionality that it should, but you also have to take into account how the user will feel as they're using the service.  If you don't design both well, then you're going to lose to a competing product.


Still confused? Well check out some of these resources to help put it into perspective.

http://blog.careerfoundry.com/ui-design/the-difference-between-ux-and-ui-design-a-laymans-guide/ 
http://eyeondesign.aiga.org/whats-the-difference-between-ux-ui-design/
http://usabilitygeek.com/the-difference-between-ux-and-ui-design/

Blog 13 - Inspiration!

I get inspired by websites and blogs or sites like Pinterest. I am not by nature a natural designer so I don't tend to come up with the ideas on my own but need to look at other sites or color schemes that are already put together.

In my day job I work as a systems business analyst so I don't get to be very creative.  Once upon a time I was an Instructional Designer so I did do more graphic type work and set up templates and the like - but after being years removed from such "stuff" its not as easy for me to design like I used to.

So why reinvent the wheel?!  In my HTML classes I have learned of new sites that offer you HTML color schema and I use Pinterest a lot as well as google searches to see what's new and different now. The bottom line is - DON'T FRET!  There are plenty of resources to help you along the way.  Your best bet is to keep up your skill set and keep learning!!

Blog 12 - Final Project Research

For my final project I am working on a website that deals with a small side business that I run on Etsy with my sister - Halo Halo Designs.  Its a women's fashion and resort wear company that offers specialty products in limited releases.

The main site is https://www.etsy.com/shop/Resortglam since its easy to market here as Etsy has a large customer base already.  This offers me the ability to sell products without having to pay for google ads, etc.

Similar companies include http://thebeachpeopleco.com though they really don't sell clothing they do sell beach blankets/towels.  There is also http://tolanicollection.com/ who offers a lot in womens fashion that could be used as beach and resort wear (though more on the pricey side).

Larger competitors are: EverthingbutWater and even stores like Nordstrom or Forever21.  However, since these are not small boutiques, I do not consider them as immediate competitors.

For this blog - I will specifically focus on Tolani as I believe they are the closest in competitor. Tolani offers a lot of different products and is very organized.  Their site is specifically set up as their own website whereas I use Etsy which is a template page.  There isn't a lot of "flavors" for those of us that use Etsy as the main page for their e-commerce.

Their site offers a lot of high end items and communicate travel, luxury and one of a kind items. It's similar to the  message I want to convey in my products; however, I try to curtail my products to a different price range.  I wanted to offer unique products but at a price affordable to the average woman. More expensive than forever21 but nothing like Nordstrom.  I think that Tolani competes in a higher end market against bigger designers found in some of those name brand stores.

Eventually Halo Halo would like to be on it's own e-commerce site but that requires more customers and followers who are going to shop your site directly by going to your www site.  I'm just not there yet.

Blog 11 - Net Neutrality

So what is Net Neutrality? 

Well in laymen terms it is the principle that internet service providers should provide access to all content regardless of the source without blocking or favoring of particular websites.   The bottom line is that its our right to communicate freely online. It prohibits the slowing of certain sites and speeding up of other (favorable) providers.  

Net Neutrality evens out the playing field - meaning that small businesses, start ups, and entrepreneurs are treated equally by providers.  Meaning that a bigger business like Target can't pay more to speed up their site while deliberately slowing down their competitors.  But it also ensures that you can access all content on the web without restriction.  

But what if there wasn't any net neutrality? Well there are a few possibilities that people have posed: 

- Providers could charge you on a "package" style basis similar to what you pay for TV. If you happen to go outside of your package you would be charged more OR you wouldn't be able to access certain sites outside of your subscription.  

- ISPs would be able to restrict what users can see which would remove the idea that the internet is an open forum 

- ISPs could slow up some sites and slow down others.  Whose to say that companies with deep pockets or political candidates wouldn't pay to receive such benefits? 

Ultimately, it might also mean that ISPs would have an easier time shutting down or limiting access to peer-peer sites as they could totally restrict those sites or slow them down to the point they're useless. 

Blog 10 - Favicon, what is that?

Ever notice those Icons that appear in your web browser tabs or web address area? Well that's a Favicon!

These small icons (16px x 16px) are associated with a website and used as a graphical representation of the browser. It's like easy branding.
It's also an easy way to save space on a site, browser, or favorites bar since they don't take up that much space.

Favicon formats have .ico, .gif, .png and .jpg extensions so they can be supported by typical photo editing software whether it be opensource like paint.net or Photoshop. However, if using something other than a Favicon-html kit then you have to be sure to save your file formats with the .ico extension or using type="image/ico" so that all browsers will recognize your favicon as you want.

Most mobile sites don't have favicons or aren't supported. Usually you simply end up with some sort of short cut or thumbnail and these aren't always pretty. However, touch icons are those "pretty" icons that show up on your iOS products like iPhone and iPad that look similar to a favicon but are bigger.

Once you've created a favicon, you simply add the icon to your head elements via <link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/ > and the browser should render it appropriately.

I'd love to try this out if I have time in one of our upcoming projects.  Fingers crossed!!!!

Blog 9 - Semantic Markup

Semantic markup are those "things" you add to your HTML code such as <header> <footer> <body> <div> <spans>, etc. that allow you to one) easily organize your text and two) provide you an easy way to style your design.

Without the use of the semantic markup your page would simply be full of various paragraphs, headers, etc. that would need styling.  In order to style those elements individually you would have to either do it inline or create a lot of different tags in order to separate your content for styling.

Additionally, as your webpages become larger, more complex or span multiple pages - you will want to label your sections in order to easily identify them for editing (and also styling).

Last but not least, semantic markup helps with search engines and indexing. Your markups help tell the search engine what your context is and how it should be indexed.  And if you've ever worked in web you know how important indexing is to get your content out there in search results or in trying to remove it (which is easier said than done)!

Blog 8 - Experience Design

Experience design, what is that?

User experience focuses on your users - what they need and value. In your design you want to improve the overall quality of the users interaction and how they interact with your products and brand.

Here are a few items to consider when creating your site:

• Is the content high quality that users will want to come back to in the future 
• Does the navigation make sense and is easy to find
• Are your page errors user friendly 
• Users scan, does your page require too much reading 

Good examples of websites with great experience design: 

• www.refinery29.com
• www.tumblr.com

I think these sites provide good experience design because the content is credible, easy to navigate and find, its very straight forward and the user can interact with various items on the page simply without too many steps or instructions.  The sites are also intuitive which makes moving around the site very easy. 

Can a site be developed with both experience design and usability in mind? I think so!  The two are not mutually exclusive and I can see that if you focus too much on one (i.e. usability) it could be detrimental to your user experience (aka experience design).  

For example, a designer could decide they want the user to sign up for their service as quickly as possible...so maybe they ask for a lot of personal information up front to make the sign-up process easier.  Well from a user standpoint that would be really off putting. So many people are leery today of providing personal information online that this would be a major deterrent. 

So as they say - all things in moderation. I think when designing you should take both these into account and find a good medium that will provide a fast website with a great UI. 

Blog 7 - Usability

What is Usability? 

Usability refers to the actual use of a website - not the design or visual aspects of a site but the user experience.  Meaning - can they access the site and complete their tasks easily? Key usability issues to consider when designing a site include:

• Can the user accomplish their goal
• Does it require a lot of effort or focus to complete the task
• Is the site intuitive or easily learnabe
• Is it simple 

One way to really look into usability is to look at usability testing, which provides you with how users actually experience your website or app.  Users self report on their ability to use the site by performing tasks they are instructed to do. 

I have been part of a such testing for website design in a survey.  I was instructed to navigate through different areas of a website and then provide my feedback.  In some cases they had me simply look at a section and then try to recall items from the page without any prompting.  It's a really great experience and I'm sure provides good feedback to the designers (so long as their test subjects stay focused and on task!)

Here are some sample sites with great user usability: 

• www.glossybox.com
• https://www.letote.com/
• www.birchbox.com

These sites are pretty straight forward, I can get to the topics/areas very easily. And if I want sign up for the service its also very simple and straight forward. 

Blog 6 - Fonts!

Since the early days of web, fonts have come a long way!  Previously designers were limited to just those fonts installed on their own computer.  As time progressed, designers could download fonts BUT if the user didn't have that font installed...well then that design aesthetic would be moot.

Now there is the CSS Rule @font-face which allows web designers the ability to specificy online fonts to display on their web pages.  This means you can provide your own fonts outside of those just installed on your computer. However, there is still a ways to go.  @Font-face since it can decrease performance time and may use fall-back fonts that have other consequences - such as rendering a text transparently.

But I still love this option. Why? Because there's no other way to render fonts to a user if its not installed on their computer.  Sometimes a client's default browser faults can really diminish the overall look and feel of your website.

Check out this example of a website using @font-face http://craigmod.com/journal/font-face/. It's a bit overboard but you get the idea of what you can do.

What is WOFF? 
Well that's a good question because, I have too, have never heard of it. According to Wikipedia WOFF is, "The Web Open Font Format (WOFF) is a font format for use in web pages. It was developed during 2009^[2] and is now a World Wide Web Consortium (W3C) Recommendation.^[3]

WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints."  

Not helpful I know...so what more can we learn about WOFF. So this Web Open Font Format was developed by Mozilla with Type Supply and a few other organizations, which compresses font data.  This means sites using WOFF use less bandwidth and will load faster.  There are also a number of fonts that vendors were not willing to license elsewhere, so font availability is better for designers.  This file format can be embedded into your web pages and is included in the HTML5 standard. 

I've always had problems with typography in my web design. I'm a true beginner and don't use HTML or CSS much for my job but need to be familiar enough with it to use some standard programs.  I get frustrated when I have this great layout and all these fonts that I'm using but they don't render on my webpages...which ultimately means it doesn't look exactly like I want it to AND I feel like I wasted tons of time looking for fonts which didn't work in the first place.  Maybe WOFF will help with that as I progress in my design. 

Blog Topic 5 - Customize This!

So I looked into the options to customize my blog via the Blogger settings and I think some things have changed since I started using it years ago for my personal use. 

First, there are a lot more templates available that allow you to customize the fonts (including web fonts), font sizes, backgrounds, colors, etc.  However, what I also noticed is that previously, I was able to access the HTML code itself and update it OR even use my own personal HTML.

Not sure if I overlooked the option or if its just not available anymore?!  

In any case, I did update the font for my text as well as the blog headers as well as the color scheme. It made the changes very easy and just about everyone could do it!!! 

I can definitely update the inline HTML when I create a blog post...but I didn't see a way to control it at a higher level any longer.  I'd like to customize my blog more....so stay tuned. More to come!!

Blog 4: What is RSS?

Previously when you wanted to follow a site or blog, you had to bookmark the page and check back to read new content (or find that no new content has been posted).  Now with RSS feeds, this technology provides everyone with the ability to "subscribe" to content and have it show up in a reader.

RSS stands for Really Simple Syndication and can be sent to you via a Reader (aggregator) or if you don't want to download, then they feed will go to your email for example.

Once you subscribe to an RSS feed, in your reader - the topics will appear  as soon as new posts are available.  Then, you can read them at your own convenience. The aggregator or "reader" takes all your content from different sites, blogs, etc. and places it into one location.

However, there are some limitations to the RSS in that you cannot easily remove items from your feed or edit the items currently there.  There are also some connections that block RSS feeds from their servers. If that's the case, you won't be able to get update about the particular content on our feed.  Have more than one feed and want to combine them? Well, thats not so simple either.  For all these reasons, that is why man people continue to send their RSS feeds via email rather than install a reader that will limit their options.

I personally have my RSS feeds going straight into my Outlook into an "RSS Feeds" folder.  Until I read the feed, the content stays bolded and in its own folder so that it doesn't fill up my inbox.

Blog 3: Gotta love it!

I've been perusing my fellow classmates blogs and found some really great ideas.  I love being able to see other people's resources, it makes your life easier than having to search through tons of sites, only to find that the services aren't free or it's just not what you were looking for.  Here are some of my favorites:

https://eedonaldsonblog.wordpress.com/  - Need HTML colors or want to create your own? Erin has recommended a great product in Adobe Color CC which allows you to create your own palettes that are available across all your CC applications.  Will need to check this out eventually.

https://blogbydonlambert.wordpress.com/ - This is another great site. In the past I have searched for sample sites that would provide me with inspiration for class and other work projects.  Don provided a link to a website that puts it all in one place. Love it!


It's still (kinda) early in the semester and unfortunately a number of the sites from my classmates went to broken links.  But if you've found a great site by other classmates really helpful or a visual treat, comment below and I'll go check it out!!

Blog Post 2 - Resources!!

I used to work as an Instructional Designer creating web-based courses and content so I have a number of good resources for graphics and stock photos.

Free Sounds - These sites provide you with an array of sounds for free that you can use, download and modify. They have all sorts of effects!!
http://www.soundjay.com/index.html 

Art Galleries - These sites provide you with free media assets and photos that you can use in your work.  A lot of them are royalty free!!!  

http://athenastock.deviantart.com/gallery/

http://www.shutterstock.com/?gclid=CIierMHvzLQCFUxxQgodpkcARw

http://www.clker.com/

http://www.articulate.com/rapid-elearning/heres-a-bucketful-of-free-office-themed-e-learning-templates-media-assets/

http://elearningtemplates.com/elearning-people-cutouts/

http://office.microsoft.com/en-us/images/

http://www.mrcutout.com/

Flash Animations - 

http://www.the-flying-animator.com/index.html

How To's - 

http://www.mediacollege.com/adobe/photoshop/transparent/background.html

http://blog.cathy-moore.com/resources/elearning-samples/

https://www.youtube.com/watch?v=YRb12vfcNmU

I also really like this resource though I'm not sure we'll be able to use it in class.  It provides you with an easy way to create videos and other animated content! 

https://www.moovly.com/ 

Happy Creating!!! 

Blog Post 1 - Cool Site

Refinery29 email newsletter 

I recently came across a website that follows a newsletter format that has the same feel in their email newsletters and social medias pages.  Refinery29 is a website dedicated to current topics, fashion and other trending news.  It's geared towards women that want to know a little bit about everything.

I was intrigued by the email they sent me that looked fresh and categorized their main stories into topics such as: tech, news, fashion, beauty, etc.




Once you're at their site the layout is really simple. Rather than have a lot of links or things to hunt through, there are story cards with a photo and caption.  I think most fashion blogs and news websites tend to use the same format. A couple main stories larger than the others with a short piece of the story, requiring you to click to read more.

Then there's the fashion blogs that just have a running archive on the side while the user scrolls down the page to see story after story. If you're lucky there are sometimes keyword searches so you can find your story faster.

Well with Refinery29 they made it much easier.  And when you hover over a photo the social media icons pop up so that you can share the story on a few different sites.  This is a really nice feature since most sites simply have stagnant icons listed somewhere on the page so that you can share the page.
I can't tell what software they used - definitely some sort of HTML editor.  Then there's probably some sort of photo editing involved, maybe PhotoShop and Illustrator? I also assume there's some fancy javascript involved as there are "up next" story banners that appear after you've been on a story for "x" seconds before it scrolls in. They also make use of a repeating header/footer section.  And I looked into the webpage code and it looks like they set up a lot of different CSS classes to make sure their story boxes are exactly the same and that each story page also has a similar feel.
I don't have a lot of time to visit their site but it is a nice to scroll through.