Blog #4 – Advice

I took Introduction to Web twice. The first time, I allowed myself to fall behind on the assigned reading, which is where I believe the problems began. I also didn’t ask questions. I was also just plain lost with what I had read. It was such a new way of thinking and it was a bit overwhelming. The second attempt at the class was far better. First off, I religiously stayed on top of the reading. I also read other materials in addition to what had been assigned. I asked questions as soon as I didn’t understand something during a lecture. I took better notes too, which became very helpful on the exercises. I also made a point to study for the exercises so I didn’t waste my time during it looking through my notes unless I absolutely had to. I also cannot deny that hearing everything for a second time was extremely helpful. I’m not sure if it was simply because I was preparing myself better outside of class or if it was because I was having everything explained to me all over again from the very beginning. Either way however, things really clicked the second time. My final grade was four letter grades higher than what I left with the first time.

The Advanced Web class was where I wish I knew some things. In the intro class, we learned all about the technical side of making a website work. So much so in fact that I almost completely disregarded the design aspect. I was focused 95% on the technical, and then I found out that wasn’t the real concern at hand. I should have been primarily focused on the design and a little less on the technical. I should have thought about how the class is called web design. I was told to remember that my goal is to become a designer, not someone in an IT department or something. Had I thought of this my approach for the first project would have been entirely different and I would have gotten more out of it than just responsive web design. After the project was handed in I felt so behind, and I wasn’t seeing a difference between the first and second projects, other than that the second one was bigger. Technically speaking it worked relatively well but in terms of design it lacked so much and failed miserably. Thankfully I had my second project to do better on, which I feel was more successful even though it too had massive room for improvement. I also stayed on top of the reading again, and I did a lot more independent research. The one quiz we had all semester I failed. I realized that at least part of my problem was that I am so reliant on the color-changing mark-up in Dreamweaver. I got to the point of where I didn’t really know everything I should, I just proceeded based on whether the text was the right color or not. So I think in hindsight I may have at some point turned off that setting in Dreamweaver.

For the next group of students coming in to the web classes, I would tell them to be open-minded and to forget any and all preconceived ideas about web design and how the web works. I also recommend doing the reading, and I mean all of it by the due date. Putting it off in the slightest way is a guarantee that you won’t do it at all. The year of web classes is an intense one but it’s very rewarding. I liked learning different techniques that I admired for so long on professional websites out there. I would also tell them to remember that the design and usability is most important. The technical aspect comes faster to some than others, but ultimately it all comes together over time with practice and challenging yourself to try something new. In addition, I am not a very social person, so I don’t usually have any friends in my classes. Looking back through not only the web classes but my time in the program as a whole, I wish I had at least tried to make friends with at least one person. Getting another student’s feedback is priceless really. Not only is it just a good support system but it’s also another way of learning more. Sometimes I don’t realize how much I might know about something until I sit down with someone else and help them with their project. I also find that it’s a great source of inspiration and brain storming. However, in terms of inspiration, I just about always use the magazine Communication Arts.

Communication Arts

Communication Arts

My boss at my design job gets the subscription and has a library of years worth of these magazines, and gives me full access to all of it. It’s truly never failed me. Otherwise I consider everything as a possible source of inspiration. For the technical side of web design, I frequently bother my co-workers to look at my projects. They literally drop everything to help me. So, I encourage the new web students to get to know each other, work together, and know what works for them and what inspires them. Oh, and do the reading.

Advertisements
Posted in Uncategorized | Leave a comment

Blog #2 – Pros and Cons of jQuery

In 1995, Brendan Eich invented JavaScript. JavaScript is code that is used to enhance the style of websites and make them more interactive for the user. It also eliminates cross-browser issues as well, and allows sites to load faster. The main issue with it is that it can leave a person’s computer more vulnerable to hacking. Otherwise it is user-friendly and makes sites far more appealing.

Plugins are one of the real nice characteristics of JavaScript. They make life easier for everybody. They can make the difference between a great website or a poor one, and makes for little work on the developer’s part. Plugins also make the user experience a more positive one. Some great examples of plugins are below. Click on the images to try them out!

jFormer

We have all seen this one. This is simply the field that we enter our username and password to enter a site.

GMail user login

GMail user login

Galleriffic

Gallerific allows for a gallery of photos to be navigated easily without all the load time and visiting different pages, and is also done tastefully. It allows for thumbnail rollovers and has a crossfade effect that is similar to a lightbox plugin (see next). Below is a good example of it being used on the site Methane Studios and their archive of posters page for the Dave Matthews Band tours.

Methane Studios and their use of Gallerific JavaScript plugin.

Methane Studios and their use of Gallerific JavaScript plugin.

Lightbox

Lightbox has recently become one of the more popular plugins. It allows for a an image to be prominently displayed on the same page when the user clicks on it, and then is able to be closed so the user can view another image or move on.

Coda Slider

The coda slider plugin is simply a panel slider used for viewing numerous images.

Yahoo homepage using a coda slider plugin to view images and headlines.

Yahoo homepage using a coda slider plugin to view images and headlines.

DatePicker

DatePicker is a plugin that can be found in many different styles and is available through MooTools and many other JavaScript frameworks. This makes for an interactive calendar where the user can select any date they wish. A good example is on the site for Tennessee Vacation. The user can select a date and they will be able to see what events are going on that day and details about them.

Tennessee Vacation page and its example of the DatePicker plugin.

Tennessee Vacation page and its example of the DatePicker plugin.

So it’s obvious to say that JavaScript is incorporated in today’s web designs in all ways, large and small. It can make all the difference in the world as to if someone stays on your website or goes somewhere else.

Formfett - An Online Journal and Portfolio

Formfett – An Online Journal and Portfolio

A good example site is formfett.net (above). The site utilizes the lightbox plugin, as well as JavaScript styling with the dark transparency appearing over some of the portfolio links. The color contrast with the dark background works well and the content is broken up nicely with a short navigation bar that is to the point.

Posted in Uncategorized | Leave a comment

Blog #3 – Project 2

P2MoodBoard

For my second project I am designing and building a website for a mens shoe brand called Nickel & Nichol. I created the logo and brand booklet three years ago, and at the time web design wasn’t even on my radar. Until now of course. I’m eager to begin this project because I enjoyed working on it the first time, and I know this will challenge my skills at web design. My inspiration was the show Mad Men, and mixing that with modern touches. The retro styles are something that I naturally gravitate towards, but I also think it was a time of iconic new styles, whether we are talking about fashion, home decor, cars, and so on. Bold patterns and colors were being used immensely, and and shape was a huge focus with furniture and decor. Today, the boldness is still there, paired up with a simple color or form. The element of minimalism is being used the way shape was used in the sixties. Love it or hate it, it is all still very interesting. The mood board I have created successfully reflects what my vision is. It features brands that have been in business for decades, and then there’s a few more recent ones that will take the classics and give them an edge. The Chanel No. 5 bottle is featured because it reminds me of the classy glass liquor bottles men used to have in their offices (I couldn’t find proper images, I guess because I don’t know correct terminology for it). The watch inspired me because of the old style with the modern element of having the inner workings visible.

In terms of the site design, one idea I had was to mimic the image of the tie organizer, where each square had a different item and that would be the corresponding link. A challenge I always face is being able to have a properly functioning website and still have good design too. I want this project to be where I can make that happen, so hopefully the design ideas I have in mind will not be too out of my league.

Posted in Uncategorized | Leave a comment

Responsive Web Design

The future of web design changed forever when smartphones, tablets and netbooks hit the market. How would web designers be able to help websites make a seamless transition from desktop computer to mobile device? More and more companies are demanding that their websites be able to do so.

What Is It?

Responsive web design is when a website is able to collapse down to a smaller size so that it can be viewed and still remain functional on a device with a smaller screen. The key is that the site still maintains its quality and content while still catering to all of the user’s needs. It also allows the user to view the site no matter how then turn their smart phone or tablet, either portrait or landscape. Below is a chart that not only illustrates a screen at portrait or landscape but also shows the most popular screen sizes today.

These are the most common screen sizes, but remember this is constantly changing.

These are the most common screen sizes, but remember this is constantly changing.

Some History

The term “responsive web design” was created by Ethan Marcotte, a web site designer and developer. He was inspired by and wrote about what architects call “responsive architecture”, the idea that a room could change size based on how many people are in a room at any one time. Marcotte realized that the same characteristics could be applied to web design. Below is an image of Marcotte’s book Responsive Web Design  which also shows an example of responsive web design, which I will discuss next.

Marcotte's Responsive Web Design, also displayed on various devices.

Marcotte’s Responsive Web Design, also displayed on various devices.

An Example

A good example of responsive web design is the site for Forefathers Group. Below shows the difference between how the site appears on a normal desktop computer and on an iPhone. Yes, some of the imagery disappears when the site is on the smaller screen, but the information and functionality remain the same, as well as the brand’s identity.

A good example of responsive web design is the site for Forefathers Group.

A good example of responsive web design is the site for Forefathers Group.

The Good…

The benefit of utilizing responsive web design is that the website is now truly available to anyone on any kind of device, no matter the screen size. It is also more efficient since one website is now capable of serving those who use mobile devices, be it their smart phone or tablet. This saves time and money, and also has the potential of increasing a company’s clientele.

…and the Bad

Issues with responsive web designs are out there but should not necessarily cause businesses to shy away from the challenges presented. Responsive websites take more time to be created, which means more money. Another concern is that older browsers are not always able to support them.  This means that ultimately companies have to decide what is most important them. Do they want to invest the time and money in having a website that is equally accessible to everyone? As stated earlier, more and more companies are asking for designers to create websites that can be supported on all devices, so really the pros far outweigh the cons.

Posted in Uncategorized | Leave a comment

Search Engine Optimization

Search engine optimization, or SEO, is absolutely imperative to the success of a website. It is defined as the process of improving a site’s visibility and rate of traffic it receives from search engines. Business Insider has compiled ten basic tips that everyone should know about SEO.

Business Insider

Tip #1: To begin, make sure you are aware of where your site stands among all the other sites out there that make up your competition. Pay attention to how users are finding and entering your site. This helps you have a better understanding of what you need to focus on.

Tip #2: One of the biggest aspects of SEO that any professional will tell you is that keywords are essential. Often times the client will supply you with a list of words, but if they don’t, think of words users might enter in a search engine to find a site like yours. After you have established your keywords, where they are placed throughout your site is just as important. Having keywords in the title tag and in the page header is crucial. Of course use the words in your titles, content, URLs, and image names, but be careful not to go overboard. Too many will cause your site to come up as spam and be criticized for “keyword stuffing”.

Tip #3: A basic strategy of SEO is the use of internal links on your site. It is an easy way of increasing traffic on your site, which is one of your primary goals anyway! These tags should also contain keywords so they will also be found by the search engine.

Tip #4: Spiders, or webcrawlers, search content of websites and create the entries you see on a search engine index. A good way to help these spiders search your site is by creating a sitemap. A sitemap is a page with a list of links to all the other pages on your site. Depending on the size of your site it may be better that it lists only the main pages. But either way, this allows the user to arrive at the page they need a lot faster. Fewer clicks is also good for your SEO.

Tip #5: Another great tip to remember is to make your URLs “search-friendly” by using keywords when naming them. Business Insider gives a good example. It is easy to understand what http://www.puppyfun.co.uk/puppyhealth/vitamins is about, instead of http://www.puppyfyn.co.uk/11789/s201.html. Users won’t even bother with a page with such a URL. They’re searching for specific words when they are scanning the search engine results and will skip right over it.

Tip#6: According to Business Insider, avoid incorporating Flash on your website. In terms of SEO, Flash does nothing for it. Making your site look cool is the only real purpose for it. Personally I think that as long as it is understood that your SEO won’t change because of it, then go for it!

Tip #7: ALT tags are easily forgotten at times but are very important for SEO. These need to be as descriptive as possible (keywords). It is also good practice to caption all of your images, and being descriptive there as well. This puts words to images since images cannot be found by a search engine by themselves.

Tip #8: One thing you don’t want is for your site to appear as though it has been forgotten. The longer a site stays the same, without anything new being integrated, the more it starts to fall in SEO rankings. It is important to frequently update the content. A good way suggested by Business Insider is to have an “executive blog”. This is a way of allowing the owner of the website to be visible to clients, as well as creating a more personal touch to it. These also tend to create more internal and external linking, which in turn increases traffic.

Tip #9: Social networking platforms are another good opportunity for improving your SEO. This allows for new content as well as good distribution of links. It greatly multiplies the number of places users can view your links.

Tip #10: Even with SEO, it’s about who you know. Developing great relationships with other websites can lead to having a link to your site on their website. However, don’t forget to reciprocate. Also, make sure they have a good reputation, in terms of business and SEO. If their site uses bad SEO practices, it can effect your own SEO ranking. It is a great idea, but make sure you do your homework.

Additional Information: One of the best websites that discusses the different aspects of SEO is SEOmoz (below).

Screen shot 2012-12-01 at 6.53.47 PM

This site thoroughly explains all things SEO. Think of it as an online users manual. I recommend that if you’re going to read it at all, just read the whole thing. You will be better for it in the end. One thing that I found very interesting is the idea that big companies pay tens of thousands of dollars to be at the top of a search engine list. According to SEOmoz, this is pure myth. See the image below for more details.

Paid Search Helps Bolster Orgnaic Results

I always thought this was true, but apparently after reading, this wouldn’t be worth it even if it were true. Some aspects of SEO come down to pure ethics as well.

SEOmoz also discusses keyword stuffing, as I made reference to earlier, as well as manipulative linking and cloaking. Manipulative linking is the use of popular links to increase your own popularity, regardless of how relevant these links are to your site’s content. This takes so many different forms and changes so frequently that it is becoming more and more difficult for search engines to stop. Cloaking is a number of different tactics but the most popular form is where content that would normally only be found in the HTML that the viewer wouldn’t be able to see is also incorporated in the regular content.  The flow chart pictured below will help you determine if your site breaks any of the rules and if you will be faced with a penalty or just poor SEO.

Flow Chart for Determining the Consequences of Poor SEO Practices

Flow Chart for Determining the Consequences of Poor SEO Practices

This guide is an absolute must-read. You will undoubtedly leave it more educated about SEO, far beyond any list of tips.

Posted in Uncategorized | Leave a comment

Dan Mall at AIGA

Thursday, November 15, web designer Dan Mall stopped by to speak to the Jacksonville chapter of AIGA. The theme of his presentation was called Hulkmania, a look at how pro-wrestler legend Hulk Hogan’s work ethics influenced Mall and his career. Mall developed what he calls Demandments, six rules of thumb to help us all in the design industry keep a clear perspective of what is important and how to handle a career.

One At a Time – The first Demandment. Mall explained this as a way of not thinking of all the projects we have in progress, or one single project, as a whole. I am guilty of doing this and inevitably numerous panic attacks later ensue. However it is important to only think of one project at a time, one step at a time. Everything is far more manageable this way.

Giants Are Made – Greats are not made overnight. I’m insanely guilty of comparing myself to others, in every way possible in addition to design. I see amazing designs all the time, and it usually ends up making me feel like crap about myself at some point. I don’t feel like I have accomplished much. However, I interviewed for a job two years ago, and my boss still remembers various projects I had included in it. He still brings them up from time to time when we discuss current projects. I think that if the designs were really poor, he would not continuously use them as a model for what we want to achieve now. With more solid designs in the future, someday when I’m old and retired I will have one hell of a portfolio to display for people and look back on, reflecting on where it all began. None of this is overnight.

Experiment – Mall explained how important it is to try new things. Taking two things that are entirely unrelated and putting them together can yield a whole new design possibility that would never have been conceived of otherwise. As I’ve become more aware of what design characteristics I tend to gravitate towards, it has become easier to figure out what to try and has been quite exciting at times. Unfortunately a deadline or two has also taught me what projects this kind of experimentation is appropriate for and which it is not.  This demandment also stresses how important it is to be open-minded.  I have always thought of myself as one of the most open-minded people around, but after leaving Mall’s presentation, I realized that it isn’t quite the case. I felt bad about it for a day or so afterwards, thinking about what opportunities or good designs I might have passed up or given up on because of this, but now I am using it as motivation to try new things and right when I think something is different enough, to keep going more beyond that. This aspect really motivated me.

The Adjacent Possible – Mall discussed something he calls the “adjacent possible”. He gave an example of how a doctor studied how the coral reef is able to repair itself, and then he took this concept and applied it to how bone surgery can be done. It takes the idea of taking two things that have been done before or function a certain way in one world and applying them to another form and creating something new from it. It’s new because of what we have applied it to but the bottom line itself remains the same.

Empathy – Mall explained this as being the bad guy for a change. I don’t know that I fully understood this concept, but the way I took it was, you can understand a point someone is trying to make or the thinking behind a design, but it’s okay to go against it and do your own thing even if it’s not the popular thing. Another way I thought of this is where we can understand something enough so that we can produce a good design but we don’t have to let that experience or thinking go any further than that. If we pretend we understand it and try to produce a design for it, everyone will see through it.

Enjoy Yourself  – As with any profession, it is of utmost importance to do something that we find enjoyable. I feel fortunate enough to be able to make a living doing what I have always loved. I almost didn’t and I feel a sense of relief when I think back to a couple years ago, doing what someone else wanted me to do because they thought this was stupid and being the most unhappy I have ever been. I also spend a lot of time with people that never got the chance to do what they truly would love to do, be it because of life events that were entirely out of their control or poor choices early in life. I’m always thankful that that isn’t me.

Ultimately, I was very much impressed with how Dan Mall was able to deliver a new way of thinking for the rest of us in the industry. It brings a new way of thinking so our careers do not get to be overwhelming and make for poor design choices. I was also very proud of myself because this was my first AIGA event. And if definitely will not be my last!

Posted in Uncategorized | Leave a comment

Dissect A Website

A website I enjoy visiting a lot is 55 Hi’s. It is a one-man design firm created by Ross Moody. He specializes in creating mostly greeting cards, but sometimes there are some cool posters. The designs primarily feature sayings that we have all heard at one time or another about life in general. Only sometimes the way Moody designs them they seem humorous. Also, on the Blog page, Moody even gives some details about how this site was created (see image below).

Layout

Feature area on the homepage.

Feature area on the homepage.

The site looks to have about a 12-column grid layout. The feature area is a nice large changing image. In the HTML, there is a division for the main content, which then goes on to have an id for a slideshow. A slideshow is an excellent way of including more content without taking up more space. Below the feature image there are two more rows of much smaller images that are each their own slideshow as well. All the other pages featuring available items keep with the same layout. This can be seen in the image below.

Greeting Card page (left) and Wallpaper page (right)

Greeting Card page (left) and Wallpaper page (right)

Other pages, such as the About page, follow a different layout. These are more type-heavy with a few images. Each of these pages features a three-column structure, with the center column being the main feature with usually an image of a block of text at the top and followed by more text or supporting images. The Blog page also includes a video of the process of a project. These pages are pictured below.

About page (left) and the Blog page (right)

About page (left) and the Blog page (right)

The FAQ page is the most type heavy page of the entire site. The headers stay consistent with the rest of the page in using the light blue color found in the logo at the top, and making them a sans-serif font keeps them web-friendly as well as allowing the logo stand out and be memorable as the one bit of text that was completely stylized. The secondary headers are the same sans-serif font but bold and the same gray as the body text. The body text is very thin and I think that if the gray was to be any lighter there could be some readability issues. The CSS has the font set as Proxima Nova for all text on the site, the only variations are regular, semibold, and bold.

Headers, sub-heads, and body copy.

Headers, sub-heads, and body copy.

Navigation

I think one reason I enjoy the site so much is the white background with the minimal headers and a light gray type for the body text. Nothing heavy. (This seems to reflect the personality of the creator, all these sayings about life that can teach us something about the tough times but taking a light-hearted approach with Moody’s designs). The markup for the navigation and sub-navigation is simply two separate unordered lists inside two different ids, followed with basic styling in CSS.  They both are floated to the right with a clear for both on the sub-navigation, so that the main navigation will float right but above the sub-navigation. This navigation is pictured below.

Nav and sub-nav for 55 Hi's.

Nav and sub-nav for 55 Hi’s.

On the interior pages, there is more side-bar navigation. There are links to the left of the text that allow the user to skip to other sections of text further down the page (pictured below), as well as on other pages there are links to the websites of the artists Moody has collaborated with. This column is in its own class but is broken up into various components, such as the header, navigation categories, and an unordered list, for the CSS. This is also pictured below.

Navigation floated left of the content.

Navigation floated left of the content.

CSS for the side-bar navigation.

CSS for the side-bar navigation.

Footer

The footer features a section where the user can sign up to receive a newsletter, and the rest is just a repeat of the navigation and sub-navigation from the top of the page. There are also links to Facebook and Twitter as well. It is divided into five columns, each its own id in the HTML, pictured below.

HTML for the footer.

HTML for the footer.

 

Posted in Uncategorized | Leave a comment