Personal Design Workflow

I am tempted to state that the structure of my workflow has grown greatly throughout the process of taking this class, but we have been instructed to explain how our workflow currently works, and not how we wish it worked, or how it may work in the future. Although I have learned a lot from Web Design I, and my workflow continues to evolve, in many ways, it retains traits of all projects that I endeavor to create. For example, I use a similar workflow when I write music.

I begin intuitively, after a bit of inner consideration about what I want to create. I try to let the project evolve as I work on it, adding, subtracting, and just generally fiddling with things as I go. Then, I either refine what I have created, or redesign the project from scratch using what I have learned from my errors in the first attempt. Sometimes I recreate the site from scratch two or three times. This runs highly contrary to the structured approach that I have been learning in classes, and I have begun to see the need to incorporate such planning in my own workflow.

For example, I now usually sketch out a design before I begin to try to create a wireframe of it. In addition, although I have yet to do it, my difficulty with color schemes has led me to see the extreme usefulness of creating an Illustrator wireframe so that colors can be experimented with more easily. This approach would also help me solidify my layout before beginning to design, and probably shorten the time it takes to get from inception to completion.

A new part of my workflow that I have only just begun to get experience with is the idea of working with a client, and the social and project management skills that go along with this. My first experience with this not yet completed, I am unsure how to comment further about how to handle this aspect of the workflow. Simply, you give the client what they want, while attempting to steer them away from ideas that will not work with their goals. You maintain contact with them, and get them to sign off on design decisions so that you can be sure that you are on the same page.

In conclusion, I’m not sure that I have a conclusion. My workflow is nascent and in a state of flux and development right now. I expect and hope that in the coming months of my education (by the time I take Web Design II) it will mature rapidly.

Reflection Upon Web Design I

Web Design I has been a whirlwind experience, and in the last three months I have learned a lot about HTML and CSS. The class began with discussions of wireframes, and this was a very helpful approach to understanding web page layout. Although I dreaded the Sketch-A-Web exercise, I do believe it was helpful. Where things really started to click for me was with the HTML and CSS wireframes. This is by far my favored way to create wireframe layouts, as designing with Illustrator is not something that I enjoy.

Moving into responsive design was a perfect second step to the class, and, while it was very helpful, I wish that we could have spent more time learning it, as I feel that I, and others in the class have not fully learned the techniques used to create a responsive webpage. The media queries were difficult to understand, and the strategy of designing for mobile-first seems to be a controversial one. I am still unsure of the best way to design responsively. One issue that contributed to this problem was that the book “Responsive Design Workflow” was so highly tailored to one individual’s (the author’s) preferences that there was little room for discussion of other ways to accomplish things. Further investigation on responsive design shows me that some people do not use separate style sheets, and that some people design from large screen widths down to small. I suppose that it depends on the type of site that is being designed, and how important mobile is. I have noticed that some sites seem to maintain an entirely different mobile version, rather than re-styling their full screen version. I would have enjoyed learning more about this.

In spite of small complaints, I feel that the class was completely focused and on-track until the final project. Being asked to use content management systems, wade through perplexing PHP code, and upload our sites to a server is something that I feel that we were completely unprepared for. There was a brief lessons from Chris about how to design a custom theme for WordPress, but considering the complexity of the subject matter, I feel that more time should have been devoted to it. Furthermore, working on a Drupal site rather than WordPress left me without much guidance at all other than relying on a team member. I strongly feel that, given the focus on development from scratch prior to the final assignment, all final projects should have been developed that way. Alternatively, WordPress and PHP could be prerequisites for the class.

I get the impression that the Web Design and Development programs at Clark College are experiencing great transition now (this may always be true). The prerequisites seem to be the major problem. Before enrolling in this class, my only experience with creating web pages in any capacity came from HTML Fundamentals, which I took 6 months before this class. That being said, I find myself shocked by the quantity of HTML and CSS that I have learned in this class. My opinion of this class is one of appreciation, frustration, and ultimately, ambivalence.

The Principles of Beautiful Web Design, Chapter 5

Finally at the end of the book, we get a chapter on imagery. The author starts off by telling you what to look for, in three key ways: relevance, interest, and appeal. These aspects all counterbalance each other, and it is often necessary to sacrifice one of the elements for the sake of originality. For example, he shows an image of a flamboyant website for a Mexican restaurant which forgoes relevance for interest. What does an image of a giant alien monster have to do with the restaurant? I don’t know, but it’s definitely an original and eye-catching site. Appeal often comes into play in restaurant or cooking websites as well. You want to make the visitor’s mouth water at the sight of the food. Images are clearly very important here.

So, where do you get the images for your site? There are a lot of sites out there offering stock images for free or for sale, but there are a few caveats to watch out for. One aspect that can be prohibitive is cost. There are sites that are charging into the hundreds of dollars for the use of a single image, and just because an image is expensive does not guarantee that it is a quality image or that it is not used on countless other websites (your competitors). There are also a whole lot of image usage restrictions and complicated licenses that govern how the images from these sites can be used. This is especially true for the free image sites. Sometimes the best option, depending on your budget, is to hire a local photographer or illustrator to create unique images for your site. The book provides good guidelines for finding an appropriate artist with which to contract. One final note about image usage: you should never pull images from a Google search, or hotlink to them, this may not seem obvious to a beginning web designer in this day of highly accessible media, but it is of the utmost importance. A few notes about image enhancement software (Photoshop), and image file types follow, but they are mostly unspecific and only cover the basics.

Ultimately we get a few notes about styling images using CSS. I continually find it odd that the book does not seem to teach the reader specifically how to practically do anything. A perfect example of this is the fact that the chapter contains exactly one snippet of CSS code: how to design a border that looks intentionally bad. The book does provide some quite useful insight into web design, but the lack of focus on application of the techniques described is certainly a hindrance.

Website Review: Something Awful

For my the blog entry, I am reviewing the website somethingawful.com. This is a off-the-wall humor site featuring bizarre humor articles, and articles regarding things like pen and paper role-playing games, movie reviews, and photoshop contests.

My first thought is that I like the way that the main content area is framed, and is raised up into the header area. It also features a nice shadow that makes it look as though it sits above the rest of the content. The sidebar is consistent: it features a search box on the front page, and a category description on all other pages, followed by “what’s hot”, “popular threads”, and “random articles”. This allows the user to know what to expect on each page. I particularly like the “random articles” section, since it affords one the opportunity to link to things that are unrelated, and every pageview will be somewhat different. I also really like the way that the text for the name of the site turns yellow when it is hovered over.

One thing that I dislike about this site is that the first menu link is to the forums, which are subscription based, and therefore not useful to every user of the site. Another thing I dislike is that when you go to one of the content sections, the page scrolls much to far to be convenient. The articles should be separated into smaller pages, when you sort by year, it produces too much content to easily scroll through. One further problem is that many authors frequently write under a pseudonym, making it difficult to easily find all articles by one author.

The browse by year section should probably be resized by percentages so that every year selection appears within one line. It looks bad to have the year 2002 sitting on it’s own line. Also, I feel that on the individual article view, there should be social media sharing links at the bottom of the article, in addition to or rather than on the top. One probably would not want to share the article until after reading it, and then the user is forced to scroll back to the top of the page. Text links to navigate through the site at the bottom of each page would also be useful. One final complaint is that there does not seem to be an about, contact or policies page on the site: only a single email link, a privacy policy, and no about page whatsoever that I can find.

The Principles of Beautiful Web Design, Chapter 4

Chapter four was one of my favorites in the book, and the author was not kidding when he stated that the subject of typography is one that can become addictive; I have found myself studying the type of logos, signs, and internet websites since having read this chapter.

He then moves on to discuss how typography is used on the web, which is what is really at issue for us in this class. The “safe list” of fonts is disturbingly small and limited: you must somehow work around this problem as a web designer. The idea of text image replacement is one that I am particularly not fond of. I can see how it would have its application, but loading times and accessibility can become a serious issue when using this method (perhaps, my lack of graphical orientation in my approach influences my opinion). At least he describes the “Phark Method”, in which the plain text is still present to be read by screen readers. Moving on, he then talks about using @font-face to include any fonts that you have a copy of (there are, of course, legal issues with this approach). This, to me, seems like the perfect solution, as the font will always be available locally, and never dependent on an outside service. However, there are logistical issues with this approach, as different browsers only support particular font formats. After many attempts, I have still completely failed to make this work: the font simply does not show up. I sincerely hope that I will solve this problem, and the issue of browser compatibility will be resolved soon (damn you IE and Microsoft for making my web design experience more difficult than it needs to be.) One solution is to use a service such as Font Squirrel which will convert the font to all of the required formats for you. I have honestly yet to try this. Currently, in my opinion, the easiestsolution is to use a web font service such as Google fonts. You simply find the font that you like, and copy two lines of code; one into your HTML, and one into your CSS. It works instantly and effortlessly, but you are still dependent on an outside service to continue to provide the fonts. I won’t even get into sIFR and Cufon: while they may have once been a viable solution, they seem terribly heavy-handed when there are so many other solutions.

There is no need to get into the technicalities of font design and reiterate what has already been said in the book. Suffice to say that there is a lot of useful history and explanation of how fonts work crammed into a fairly small space. I learned a lot from this.

Finally, he gets into the mood of fonts, and which fonts are appropriate for certain conditions. This issue is one that I struggle with greatly, and is so highly subjective that is feels near impossible to discuss with words.

I feel that I can’t conclude this post without mentioning that there is a highly valuable piece of information buried in the text toward the end of the chapter. Something that I have yet to learn in any of my web design related classes that seems like it should be one of the basics: 16px = 12pt = 100% = 1em!

The Principles of Beautiful Web Design, Chapter 3

Chapter Three of the book is all about the use of texture within your design. The discussion of point, line, and shape are the basics of any design, so I will skip over that, although I appreciate the cursory introduction to it. The book gives many beautiful examples of design that serve well to illustrate the concepts presented. It speaks about how things like shadow, light, volume, depth, and proportion are all at interplay with each other, something I understand, but do not see how to implement without a bent toward art and design.

The book then explains how background images work within CSS. I am confused about why this is the only section of the chapter that even touches on CSS. The rest of the chapter presents design paradigms, such as aged, nostalgic, clean, grainy, handcrafted, whimsical, and minimal, without beginning to touch on how many of the effects seen in the screenshots are achieved. I am a bit perplexed by the disconnect between the level of simplicity in the CSS in the text, and the extremely complex design that is presented in the screenshots. I find myself mostly frustrated to see designs that I can not understand how to achieve within CSS. Perhaps there is a lot of absolute positioning at work here. I simply wish I could learn how some of these advanced techniques with the placement of graphics that overlap div boundaries are done.

My complaining done for now, I really do enjoy a lot of the website screenshots that are presented in this book, and am really inspired (although confounded) by them. One of the things that I got the most from was the discussion about placing translucent noise behind the entire web page to give it a subtle texture. I am, however, once again confused about why the book does not describe how this effect is actually achieved. It is really an impressive book, but too much centered on design, and too little centered on code for my taste.

The Principles of Beautiful Web Design, Chapter 2

This chapter was really something that I had been waiting for and learned a lot from. Like the chapters in “Responsive Web Design” regarding breakpoints, it had something very useful to teach me: the principles and psychology of color. I see no point in reiterating here what I have learned about the psychological components of each color (some of which I already knew logically or intuitively), but only to state that I appreciated this aspect being laid out in front of me in such an easy manner to relate to. Important in this discussion is the concept that cultural difference can lead to major discrepancies in the interpretation of color, but, until I am designing a website that will have overseas visitors, I feel I can safely put this idea on the back-burner.

Concepts such as temperature, tint, and shade were equally useful to me in learning about the presentation of colors. I found the authors analysis of the different color theories (RGB, CMYK, (red, yellow, blue)) to be interesting, as I’ve always wondering about how these different color theories relate to one another. The different types of color schemes presented gave me greater insight as to the different options of combining colors. Of particular use(although it had already been presented in class) is the Color Scheme Designer 3. This makes it simple to see colors combinations in juxtaposition. Less useful is the mention of Adobe Kuler, as, although it is beside the point of this blog entry, I find the concept of Adobe migrating all of its software to the Creative Cloud to be one of the most offensive ideas in software history (although Adobe’s shareholders may disagree with me).

Finally, a real life example of presenting color schemes to clients for a real website, was useful, although quite brief. In short, this is one of my favorite chapters in a textbook from this class so far.