Creative Brief – Kansas Princess

This week, I was asked to create a brief summary of the client project I have chosen for my Website Design class. You can find the creative brief in its entirety below!

---

 

CREATIVE BRIEF – Kansas Princess

Project Summary

Shayla Harris, distributor of Thirty-One brand bags under the business name “Kansas Princess”, desires a website of her own to promote sales and allow her customers to contact her, and browse her wares through methods other than Facebook. She wishes for a trendy site design that appeals to women of all ages and backgrounds. Mrs. Harris also desires a new logo design.

Project Goals

The site will be designed with the following goals in mind:

• 5% increase in new customers
• 10% increase in sales
• 10% increase in returning customers

To achieve these goals, the site will be designed with simplistic elegance and aesthetic importance in mind, but will remain user friendly and easy to navigate.

Target Audience

The target audience consists of mostly women, although there may be cases in which males purchase the bags. This however, will most likely occur with a female being the ultimate consumer. These women will most likely reside within Crawford County, Kansas and the immediate surrounding counties. The site must appeal to all ages of women, just as the product being represented does. Customers will likely reside in the higher tiers of income.

Competition

            Direct

                       Direct competition would consist of any store in the aforementioned geographic zone that distributes high end handbags, tote bags, etc. This could include department stores and sports stores located in the immediate vicinity.

            Indirect

                        Indirect competition would consist of the same types of stores (departments and sports) that require a longer drive to reach them. This could also include online stores and other distributors of Thirty-One brand bags in the Four-State area.

Branding Message

Mrs. Harris wishes for her website to consistently exude a feeling of friendliness, personalization, and fashion. She wants the site to convey the feeling that she is there to assist her customers on a one-on-one basis at any time. In terms of design, she wishes for a spunky color scheme that grabs the attention of site visitors without blinding or causing them to avoid the site. The overall feel of the site should be helpful and friendly yet stylish and trendy.

Project Message

Overall, the project should display Mrs. Harris’s professionalism without losing the feel of the business itself.

Creative Direction

Shayla wishes for her site to exude the same sense of style as her bags. This opens the door for use of simplistic yet stylish elements such as stripes, polka dots, minimalistic flowers, etc. The site should incorporate several colors without going overboard or too dark. Finally, the site should have an overall feminine feel.

Following a bit more research, Mrs. Harris did decide she favored a flat design rather than something more dynamic. She also realized that the images and patterns of her business may not allow for such flat design; however, it will be arranged so that the illustrated images, buttons, navigational links, and other divs will be recreated to stick to a flat design.

Required Elements

The site must incorporate a newly designed logo, images of the products being sold at any time, as well as a dynamic schedule describing new deals, sales, and parties being held by Mrs. Harris. Product images will be provided by Mrs. Harris.

 

Code Commenting: Just How Important is it?

This week I have decided to discuss one thing I have found to be extremely useful while coding: comments. In the past, I have been made fun of for what my peers call “excessive commenting.” While the amount of comments in my work may easily be considered “excessive”, I am never the coder scrambling to find a certain piece of code when something goes wrong. With this in mind, let’s take a look at the pros of commenting as well as some good practices when it comes to comments.

The obvious benefits of commenting are mostly organizational. Why spend hours sifting through code looking for a single piece of text when one can simply refer to their comments to find out where that very piece of code may lie? These comments not only help the author, but anyone who may need to edit the code at a later date. Finally, these comments can serve as short, simple reminders to coders who may have left the project in question unedited for long periods of time.

Just in case this post has changed the view on code comments, here are some tips for more efficient commenting. One should not go about commenting on every line or few lines of code. Comments are there to add information to pieces of code that may not be all that clear. To build upon that statement, the comments added should be clear, short and in a similar format each time. Block of text comments are more often than not simply ignored or brushed off. Finally, the tip that is possibly the most important: commenting should not be held off until the last second. The last thing anyone wants to do is read over several pages of code they just finished because they didn’t bother to add important information as they went along.

Hopefully this elaborates a little on why some programmers stress how important commenting within code can be. For more reading, you can check out these small articles on commenting tips here at DevTopics and at HongKiat.com.

Until next time, readers!

A Reflection on GIT-221 or What I Learned in Web Graphics Software

From August 21 to December 9, 2014, I spent my Tuesday and Thursday afternoons in the very class this blog was was created for, GIT-221, or in common form, Web Graphics Software. From within this class, my knowledge of HTML, CSS, and importance of various design features was expanded upon exponentially. I feel that overall this was a great course to take and definitely beneficial to both my academic and occupational future.

From previous classes at another institution, I had picked up the very basics of HTML. Little scraps of code and elements that I had been “taught”, I use the term lightly here, to assemble to create something that vaguely resembled a webpage of the lowest standards. In this class, what I knew of HTML was completely revamped. In my eyes, writing HTML and CSS became less of a boring chore consisting of sitting in one place for long periods of time monotonously punching in line after line of code and more of a tool vital to any designer wishing to deal with online graphics. Through GIT-221, I learned to soundly mesh good design and coding together to create solid web pages and even full websites. This leads me to my next point.

Web Graphics Software really stands out for me, because, as opposed to previous classes taken at another location, it didn’t focus solely on design or the technical aspects of web design. Instead, the class thoroughly covered the type of input given and the output received. The schedule was well paced and I didn’t feel overwhelmed by knowledge to the point that I didn’t absorb and learn what was being taught. My only complaint about the class involves the machines provided for use. Of course, this has nothing to do with the class itself, but the computers in the particular lab in which the class was held made achieving certain tasks difficult.

Overall, I found GIT-221 to be a very informative class. On a personal level, I definitely feel more prepared for the future, and am certainly looking into taking the classes that follow this one.

Until the next post, readers!  Have a great week!

Exploring Pinterest

This week, I was asked to create a Pinterest Mood Board for my Web Graphics Software class Client Project. As per the instructions, I pinned 20 different items that I can use to draw inspiration from when creating the final project. Read on to hear about my experience using Pinterest as a inspirational tool.

First of all, the process of using Pinterest is fairly simple. One simply has to create an account, create a board, search for what they wish, and start pinning. I had no trouble figuring out what I was doing as the process is pretty self-explanatory. I love that the site gives the user such a broad selection of items and categories to follow, as my interests and not limited to computers, web design and the like. I can also pull inspiration for drawings, paintings, home improvement and so on. The only issue I had with the site was the jumpy navigation, though in the site’s defense, this jumpiness very well could have come from the mouse I was using at the time.

I believe that Pinterest has the potential to be an extremely useful tool for designers, painters, artists, or even just the average person given how broad the interests provided are. This particular board I created could come in uncannily handy in the future as I am prone to using flat, minimalist designs for websites and apps alike. I think I’ll be flocking to Pinterest more often in the future when my muse starts to play hide and seek. Pinterest can even be used by business to even further the reach of the advertising, content sharing, and general appearance to the public as many, many people use the site daily.

Overall I see Pinterest as a very intriguing site full of creative users sharing information, inspiration, and great ideas.

Until next time!

Desktop vs Mobile: The Importance of Proper Page Layout

This week, I took a look at two different companies that provide their users with both a desktop site and a mobile version of the company site. These site versions varied in size, content available, layout, imagery, and in some cases, function. Read on to see what I found.

The first site I visited was Bungie.net. Being very familiar with this site, I know the company has a tendency to favor wide, boxed layouts with expanding navigation panels.   This was the case with the desktop site. The main focus of the page is the image reel that acts as the company news panel. Beneath the reel is a scrolling set of boxes each featuring other news via Bungie’s Twitter, Facebook, their customer support, store access, and so on. The more active user intensive navigation bar rests at the left side of the site, providing access to feature more likely to be used by an individual who is both registered on the site and who uses the social gaming features the site provides. Bungie’s mobile site, however, seems to be strongly focused on catering to those aforementioned registered members. The mobile site focuses on being logged in and the features that are most commonly used by logged in members, such as game stats, character status, clan information and the like.

The second site I explored was the Dell website. The desktop website has a simplistic layout but depends heavily on the navigation panel at the top of the page. The home page merely gives a way for customers to log in, however, it does provide nearly direct access to customer support. The mobile website seems more focused on the shopping side of the company, and gives expandable menus to categories such as laptops, desktops, deals, tablets, etc. Support links are located at the bottom of the mobile site rather than right in the center as in the desktop version.

Obviously, the different screens sizes provided to the public today require companies to shuffle and reorganize page layout and content to give the user a comfortable and clean experience. Some websites succeed in making their mobile sites just as comprehensive and navigable as their desktop version while others focus on providing heavy site users simply with content they need access to. Page layout is very much a vital portion of website design no matter what the screen size is. Users expect easy navigation and access to content without a struggle. Having a bad mobile site can cut site traffic down to an extreme. These are all things one should take into consideration when putting together a website for themselves or a client.

Until next time! Have a great week!

About CSS and Why it is Vital to Website Design

Today I am going to talk a little about one of my person favorite parts of web design: Cascading Style Sheets. Now, if you’ve spent a lot of time designing sites you probably know that CSS is the preferred way of giving a website a more aesthetically appealing look.

Essentially, a cascading style sheet contains the selectors and elements that choose the element to be modified and define the properties and values that will applied to the element respectively. The cascading style sheet is then linked to the HTML website page using the “link”element. This allows all of the element changing properties and values to be connected to the HTML elements on the website, giving them the designer’s desired color, style, and arrangement.

Fortunately, since CSS saves so much time and helps create cleaner HTML code by allowing the style of the webpage to be set outside of the main HTML pages, most browsers have a solid level of CSS support and may only seem a bit buggy at times. This allows web developers to keep their HTML coding mostly clean and free of pesky inline and embedded styling.

The W3C recommends using and external CSS page rather than inline or embedded styling to improve content accessibility and create overall cleaner HTML pages. They also recommend external CSS for simplicity’s sake when styling sites with many, many separate pages than needs to stay consistent in style and setup.

CSS3 is the newest set of standards for CSS overall. This new set of standards is completely and totally backwards compatible with the older versions of CSS. CSS3 introduces several new features that are still are being adapted and implemented by most leading browsers. For example, images can be used to create borders now using the new “border-image” property. CSS3 has also introduced box-shadow properties. CSS3 brings all kinds of new style options to the table of developers everywhere.

For more information on CSS and CSS3, as always I recommend taking a look at W3Schools tutorials and explanations right here, and you can also view the W3C CSS working group’s progress here.

Until next time, readers!

Scalable Vector Graphics: What are they?

This week in my Web Graphics Software class, we briefly covered the subject of Scalable Vector Graphics. My interest piqued, I found myself turning to the internet to dig up more information on these SVGs.

Scalable Vector Graphics as defined by Adobe are essentially a language rather than straight graphics. This language breaks down images and describes them with vector shapes, text, and embedded raster graphics. These SVGs are resolution independent, high resolution dots per inch graphics that can be used on several different platforms in a compact format. Thanks to the fact that SVGs are composed of a fixed set of shapes rather than a fixed set of pixels, they can be scaled up or down without losing detail or color. Each shape within these graphics can be animated, bringing new life to graphics without losing quality. Scalable Vector Graphics, when loaded in a browser with proper support, do not require plugins and they render more reliably.

Unfortunately, there are some downsides to using SVGs. Though many internet browsers used to have no Scalable Vector Graphic support, most browsers now have at least some form of SVG support. This support, however, is still limited, and sites that are making attempts to use SVGs still provide raster versions of their graphics.

Sure there are several other ways one could make scalable graphics, but SVGs are most likely the cleanest and easiest way to create these types of images without having to worry about pixel loss and distortion of the image. One could simply use CSS to create a scalable graphic but image distortion would still be a problem .

Personally, I like the idea of SVGs. They seem like a stable way to create scalable and responsive images without having to worry about extra code in the CSS and without worrying excessively about image distortion and loss. It’s a shame that more browsers don’t fully support scalable vector graphics.

Want a quick tutorial on SVGs? W3schools has a brief tutorial here!

Until the next post, readers! Have a great week!

 

140 Little Characters, or How Twitter Allows for Efficient Web Writing

Ah Twitter. As one of the most popular social media sites, many, many professional individuals as well as large companies use this site to promote themselves, their products, or provide additional customer support after purchase. It is a well know fact that Tweets are limited to a simple 140 characters, but several companies use those 140 characters to convey just as much as a blog post can in 200+ words. Customers use these 140 character messages to reach out for help and oftentimes receive a response almost instantly as opposed to the possible week long wait that comes with customer support via email.

Twitter can be an amazing help to the business community. As I stated before, customer support can be provided at a much faster rate than is provided by email. Celebrities can reach out to their fans, businesses can promote products, and up and coming designers (wink, wink) can promote themselves with no cost beyond what is paid for internet access. However, as with everything else in the realm of social media, Twitter can act as a double edged blade. Sure, a tweet can be funny to its poster and the poster’s inner-circle, but to an employer, potential employer, or even a loyal fan a tweet can come off as harsh, offensive, and even worth a termination of employment.

Several companies use Twitter effectively, but the one that comes to the front of my mind is the game developer, Bungie. The company’s account is used to instantly connect with fans whether it be for community event purposes or for receiving feedback on bugs or glitches. Bungie effectively summarizes news about the company and directs the reader back to their website for more reading. Adobe is another company that is great about using Twitter. There is an account for each Adobe program that individuals can contact for support and advice concerning the program of choice.

As for my view of Twitter? It’s a social networking site and I tend to avoid that kind of thing. I do very much appreciate that the limit is 140 characters as it forces the author to be short and to the point. I see how it could be an extremely valuable tool, and some day, if I go into business for myself, I’m sure I will be more open minded to social media like Twitter. Now, to summarize what I learned in class these past couple weeks in a simple 140 characters:

“Web writing should be short, sweet, and easy to scan for readers who don’t feel like wading through paragraphs of text.”

Interested in checking out Bungie or Adobe’s Twitter accounts? Find them here! Bungie & Adobe

Until next time, readers!

The Super Simple, Basic Facts of HTML

This week, I am going to share a little info on the beautiful monster that is HTML.  If the graphics of a website make up its physical body, then the HTML code is the DNA that determines what form these graphics take.  Basically, HTML is the code that determines every little thing about a website.  Image placement, style, color, and content of text, and even paragraphs are all set up by the HTML elements coded in by developers.

Need a simple explanation of how HTML actually works?  Well, here you go.  Each part of a webpage is determined by a different HTML element.  These elements vary in function but they all have the same basic structure.  Each element is contained in a set of angle brackets like these little folks here: < and >.   Each element has to be closed with a corresponding end or closing tag.  From there, these HTML elements start getting a little more specific.  They can be anything as little as a simple line break to something much more complex like a website link or an embedded image. The web browser reads these elements, and displays them as a complete web page

No system used as widely as HTML has come this far without moving through different versions or being upgraded.  The internet is moving into HTML 5…. So what about HTML 1-4?  In truth, HTML officially started at HTML 2.0, as this is where the standards were first set publicly.  From there, HTML moved into 3.2 at the recommendation of the World Wide Web Consortium (W3C). The W3C then went on to suggest stronger standards for what became HTML 4.0 by combining elements of HTML with XML, creating XHTML.  When XHTML2 rolled around, the W3C found itself divided over whether or not to build the standards from scratch. XHTML2 was received poorly and is now being replaced by HTML5.

I could spend days talking about HTML… but, uh, I think you all have a life and better things to do than read a 50 page blog entry, so…..

Until next time, readers!  Have a great week!

Web Design and Sites that Don’t Quite Make the Cut

When building a website, there are several factors that a designer should take into consideration if they want users to stay on their webpage for more than five seconds.  Too many links? Who wants to sort through 50 links to find the one page they want?  Bad contrast?  The user can’t tell what they’re looking at and they don’t want to spend five minutes squinting at the monitor trying to read one word.  Images scattered everywhere?  The user becomes distracted, gets frustrated, or eventually just wonders off.

I think you get what I mean by the design of a website is absolutely CRITICAL.  The design can make or break a website just as easily as the content within.  I took a look at a couple of local sites that aren’t necessarily horrible, but they are indeed violating a few rules of web design.  Let’s take a look.

The first website I looked at for the design was the Labette Health Hospital website.  Like I stated previously, not horrible but definitely could use some improving.  There are links EVERYWHERE, and some of them are the same link in two or three different places.  Now I don’t know about everyone, but most of the individuals I associate with would only go to that website for one reason: paying bills.  At least they made that link somewhat easy to find.  The next thing I found off about the site was the contrast used on some of the links.  The side bars and links at the top of the page all consist of white font on pale green boxes that… well, they make the words difficult to decipher.  If a person doesn’t want to be on the site in the first place and they can’t read the links, they’re probably going to navigate away from this site pretty fast.

The next website whose design I critiqued was the USD 505 Chetopa-Saint Paul Schools website.  This is a site I’ve had personal experience with and could tell was not great before I even started going to school for web design.  They have a cute little image slideshow at the top that would be neat for showing school events and student activities…. if they images were the proper size and resolution.  Unfortunately, all of the images in the show are blurry and/or out of focus, but let’s move on.  The site’s navigational features dominate the page and completely hide the news and contact information below.  In fact, I had no idea that the news and contact information existed until today.  Overall, the site has a really “unfinished design” feel that makes me want to turn tail and run.

As I stated before, web design is quite possibly the most important factor to consider when one is building a website.  It can mean the difference between 5 visitors or 500.  Some sites fail to follow the principles of good web design and it shows in their visitation stats.

Until next time!