I can’t believe it’s week 12 and I’m finally getting all my web pages together. This seems to have taken an eternity, but finally everything is clicking into place. I’m getting more proficient at altering images in Gimp and have decided on a particular “theme.” Using a particular font called Love Ya Sister that I downloaded off dafont.com I have created my own headers that I’m inserting as images into the body of my website on each page. I’m using a color theme of browns, tans, and dark greens.
My menu is the most pickiest thing ever. I tried to center and get the spacing correct and it never worked in the browser how it looked on Dw. So I settled with it looking decent and being functional, despite its placement to the left. I’m terrified to add submenus because every time they have altered the size/width of the menu bar and bumped everything down a row. I think I’ll stick with the simplicity of a single menu bar.
I do wish I could have used a template because updated the links on each page is a bit tedious. However, I’m so satisfied with how smoothly this process is going now that I don’t want to change anything. I plan to try and add video next week and smooth out the look of my homepage which simply consists on a graphic and some text right now. It needs something extra and I’m thinking of using the layout of this website as inspiration again: http://www.twirlsandtwigs.com/
I like the graphic on the left and larger text to the right, and the 3 boxes near the bottom.
This week’s website: http://www.smartwebby.com/web_site_design/
Contains a wealth of information about web design. I wish I had came across this before! The tutorials are so easy to follow. Although now, as I’m reading through some of the tutorials I am tempted to try and make changes to my website and that may be too time-consuming now. However, the section on image mapping was really interesting.
The remainder of my website progress will be documented in my Commentary section.
I’m beginning to fret about finishing this website in time. I am having the most difficult time just trying to figure out how to copy my basic design as a template so I can link more pages.
Otherwise, I have been hard at work creating the “copy” for my site. I’m using material from a project that I have been working on for another class. Therefore, I’ve had to wait until now to integrate this information into the site. I definitely have to reconfigure my layout of this information because nobody wants to read it if it looks copy and pasted from a document.
27 Smashingly Inspirational Websites
I came across something similar to this during the first few weeks of the semester when I was still clueless about layouts and design (not to say I have much of a clue now, but I know a bit more!:). I love the Smashing Magazine inspiration page: http://www.smashingmagazine.com/category/inspiration/
They also have a section of wallpaper/calendars created by designers every month. I found an incredible amount of inspiration in this! Just looking at their colors, typography, layout, and design elements of a simple wallpaper can put ideas into focus sometimes.
Here’s one in honor of the upcoming feasting holiday:
I find the websites listed on Smashing Apps not as much inspiring, but intriguing. There are so many aspects to web design. It is such an art … blending creativity, marketing, advertising, and technology.
One Page Love
I thought the concept of this was site was interesting. It features websites that are designed so all the information loads in unique ways on a single page. So you never have to navigate far to find the information you need. Love this design. Some are better than others.
This site was my favorite, especially how the menu pops up on the bottom. The whole desk design is nothing spectacular, but props for the menus! http://www.rzmota.com/
This site is WOW! Not only does it showcase some of the best CSS designs, it also offers useful resources. I like how the websites are organized by categories on the right side. Users can also rate the websites.
Scroll up and down for some surprises: http://www.pojeta.cz/
Clean look: http://www.animalsontheedge.org/
Looks like an old newspaper! Cool idea. I wonder if they design the whole website in photoshop: http://www.dollardreadful.com/
Best Web Gallery
It’s amazing that the layout and design of this website is totally unappealing, busy, and annoying. But that’s just my opinion. I do like the preview pane that comes up when you mouse-over a link. (Site is powered by WordPress … hmmm.)
Love the logo and typography: http://tweetcc.com/
Clean layout: http://secondandpark.com/
I have a friend who works for a company that promotes “green” businesses. Wonder if they know about this? There is a whole style that goes along with nature-based websites.
I have no idea what a drop bag is, but the layout on this site is superb: http://www.dropbags.com/
MadMonkey Clothing: http://mymadmonkey.com/
FWA: Favourite Website Awards
I had to see who won, in this websites opinion. I thought it was interesting to view their judging criteria: 40% design, 25% navigation, 15% graphics, 15% content, 5% personality. They also have an impressive panel of judges. Looks like they have a new winner everyday. However, the navigation and layout of this site is also quite confusing.
This UPS Store ad is pure fun! Part fun, part video game, part saga: http://cardboard.theupsstore.com/
I have no idea what they are saying on this website, but the concept and interactive elements are incredible: http://www.knutselwereld.nl/
I’m going to get my dutch cousin to translate. I think it involves something with crafts.
Another interactive, video game-like site: http://machinarium.net/demo/
Refining & Teamwork:
Refining the website this week. Especially some of the images I was using. I’m slowly beginning to learn how to use Gimp better. I haphazardly created all my pages so I had a semi-visual of where I was going. Now I’m adding images and trying to figure out how to link up everything. I’ve re-worked my Spry menu bar several times by now. I cannot get it centered for the life of me! But I did figure out how to get the gray background and borders off. Also fixed some serious sizing issues. It’s exciting to see my pages taking shape! Yet, it’s so time consuming trying to achieve the littlest things. Such as floating an image. I finally watched a tutorial and figured out how to float an image in Dw and have the text wrap around it like I wanted. This worked on one page, but not the others. Ah! I wish I could have learned how to use Dw template and editable regions! Thankfully, changes I make to the menu bar transfer to all pages.
Most importantly, I’m learning about the art of refining a website with a co-worker this week. For one of my jobs I work part-time as a research associate and secretary for a non-profit organization. The president of the organization, Mr. Shealy, is 85 years. He determines what needs to be added, deleted, and edited on the organization’s website. However, he has no idea how to do it and has difficulties grasping the technology concepts. So, part of my job is communicating these changes to his son in Texas who manages the website.
This process sometimes works, but most of the time it is extremely frustrating. Yet, this may be something that web designers and librarians have to deal with in their jobs. Communicating an idea to a web designer is an involved process, especially if you have a particular image in your mind about how it will look. Often, these ideas don’t transfer to web exactly as you had them in your mind.
This is the concept I’ve been trying to tell Mr. Shealy. We have both accepted that revamping his website will be a time-consuming process. I have tried to edit it myself, and have succeeded in certain areas, like updating recent news items. But the site is quite massive and I don’t have the skills to go any further without messing up something. Teachers use this website on a daily website and I can’t take the chance of rendering it inoperable. Therefore, Mr. Shealy communicates to me changes he would like to see. I print out the website for him and it’s easier for him to conceptualize from there. Then I have to translate his ideas to the web designer. Sometimes his ideas won’t work and we have to figure out options. One of the most difficult concepts to explain to him is that website may appear different on other people’s computer and that there are design limitations on his website. We may have text appearing a certain size, font, and design on a text document or publisher document; yet, it may not look like that when loaded on the website. Here’s a screenshot of our work in progress, revamping the homepage and adding material to the left and right boxes:
It was perfect timing to have some humor as part of this week’s lesson! Most of the comics on Kopozky (http://www.kopozky.net/) were my head. I did find this one amusing and can relate to it … most of my friends are attached to their iphone, blackberry, or computer … twittering away their every life update:
Ok/Cancel (http://www.ok-cancel.com/) was entertaining mainly for it office antics. I can tell that they are creating humor by stereotyping characters – the copywriter, the designers, developers, the boss, and focus groups. What I really enjoyed reading was the blog posts and commentary below each comic. This usually helped explain the idea, or joke, behind it.
The last site, BugBash, I was not interested in at all. I worked in a corporate office for four years and hated it. I just don’t find the setting that humorous anymore unless Steve Carell is involved. Also I cannot relate to many of the “inside jokes” in the tech/ corporate world. This is one of those instances when you have to be part of the club to get it. Just like a lot of niche communities and career fields have a lingo that they use. The lingo, experiences, and humor associated with it are only meaningful if you are part of that group. For example, I love the comic Unshelved because it takes place in a public library and features a young librarian. I can relate to this and find it hysterical. Yet, when I show it to some of my friends they have no clue what’s so funny about it!
This week’s advance topics were intriguing because they covered all these snazzy ways to jazz your website. I don’t have the skills to pull off flash or scripts, but I may be able to experiment with a few other upgrades.
Personally, I find websites that use a heavy amount of flash to be annoying and difficult to navigate. Often, they take a long to load and on my old computer resulted in my web browser crashing. However, on some websites this level of creativity perfectly fits the theme. Such as the Tampa Busch Gardens Howl-o-Scream site. The opening video and 3-D, animated room that viewers can explore all serve to heighten the creepy experience they are selling. You click around not knowing what to expect. This is how I like Flash … when it sets the mood!
Sound and Video
One of my most successful accomplishments in my last technology-related class was learning how to record, edit, and post a podcast to my website. I used my Mac’s Garageband software to record me reading a short fable. I was able to edit in an introduction and add some funky music. Thankfully, the professor gave us exact instructions on how to post it to our website. I was impressed with how easy it was.
Podcasting is a cool technology. I’m not sure exactly how useful it would be with libraries. I browsed through many library websites during a Web 2.0 training program and noticed that many libraries podcast just for the sake of being cool. But in reality, they are not podcasting anything useful. The most interesting podcasts were children and teens giving booktalks about their favorite reads, a poetry slam reading, and interviews. I am particularly fond of NPR’s Story Corps project and I think libraries could have a lot of fun recording and podcasting their community’s stories.
Even better than podcasting is vodcasting! .. or adding videos to a website. I wish I was still working with children at a library and could film them during my Games Around the World program. That would be cool addition to my website … embedding a video! Granted, I’m still trying to figure out CSS rules and padding, so that will take a backseat.
However, many libraries are using videos on their websites and on YouTube in unique ways. A librarian I know who works at Rollin’s College made this video showcasing the Olin Library, complete with student commentary and hip music: http://www.youtube.com/watch?v=NC7k3zWQYNo
Another trend is book trailer videos. Publishers, librarians, teachers, children, and teens are creating movie trailers for books. Publishers can use these videos to market new titles. Librarians can highlight new books or offer teenagers a creative way to express their favorite reads.
The librarian at La Lucha Libro Library makes some great trailers: http://centeno.edublogs.org/#at
TeacherTube also hosts a large selection of book trailers: http://www.teachertube.com/viewVideo.php?video_id=132304#at
While this blog has done a nice job of collecting a list of trailers:
Imagery is such a cohesive element of a website – the colors, typography, and images combines evoke a mood, convey a message, and determine whether the website is truly appealing. One must ask are the images: interesting, relevant, and appealing? I’ve been using this as a guideline as I search for more photos to enhance my site. This is tougher than it sounds because of copyright issues, restrictions, quality. I found some perfect images but they are part of a stock photography website which requires payment. The best free images I’ve come across so far have been found on flickr and deviant art. I checked out Stock.XCHNG (www.sxc.hu) as Beaird recommended and realized that it runs on a payment/credit system for premium photos. Yet offers heaps of quality stock to choose from that’s free. MorgueFile (www.morguefile.com) is an okay site for free images, however I think it is lacking in variety. It is so easy to spend too much time in design mode.
I am a bit worried though because before reading about images and royalties and restrictions, I fully participated in Google Ganking! I know this website is just for educational use; however, I’m fretting over some of the picture I modified. I guess it might be best to contact the owner of the photographs and ask for permission even though it is a school project. I already contacted the owner of one picture featuring two boys playing mancala and he was thrilled it was being used for this project. There is never harm in asking! However, the “piracy” of images online seems like a serious matter. It would be interesting for librarians, especially those that work with teenagers, to host a program about piracy, copyrighting, and intellectual freedom in general in the virtual world.
I chose to use Gimp as my photo editing program. First, it was free. Second, it seemed less intimidating than Photoshop. I have learned that Gimp, much like Dw, takes a considerable amount of time to comprehend if you have never used anything like it before. I decided to take the safe route and I’ve only done basic editing such as cropping, adding text, and a bit of photo distortion. I have also found some incredibly, user-friendly tutorial websites such as Gimp Pixtus: http://gimp.pixtuts.com/gimp-tutorials/photo-effects/real-photo-print
This one helped me, step-by-step, turn this photo:
Into something that looked like a realistic photo like below:
I plan to use 3 photos like this in my header. This may seem like a typical web banner, but I thought the photos expressed playfulness, diversity, and were relevant to the content of the site without making it seem juvenile.
Menus & Buttons
I’m thrilled about finally working out some useful navigation on my website. I have failed at designing a useful, appealing menu bar in Dw using Spry. I cannot get the look of it to be cohesive with my site and have not figured out how to control the mouse-over feature. I might try a side navigation feature with buttons like these authors’ websites:
Venting of the frustrations
I still feel extremely behind in my website development. I’ve had to scrap my design and projects several times and create several “test” sites just so I can learn the concepts. This is extremely time-consuming, something I was not aware of until I really got into the process of website development. Being a graduate student, I’m a bit too proud and stubborn to air these concerns on the discussion board and try to figure out things on my own. In the real world, that’s often what one has to do. You can’t go whining to your boss and co-workers that you cannot do something. You have to figure it out to the best of your abilities and hope it passes!
I had a minor set back this week as my computer nearly died on me from being overloaded. I had to transfer many files to an external hard drive. Important lesson in having back-up files! I also decided to scrap my whole web design template. By this point I have learned a lot from experimenting and my old design was not working. I know this is going to put me behind, but it was easier than trying to edit everything again. Especially because I still don’t have the hang of creating and implementing a CSS sheet. I’ve created rules as I go along and created a template from there. I’ve also discovered the wonder of correctly padding and managing the margins of the containers and images on my website. I cannot believe I never figured this out before. I had to have a friend sit down and instruct me and those few minutes were worth their weight in gold!
I did manage to finally find a few tutorials on the Spry menu bar in DrewamWeaver. Many of the ones I came across seemed like they were directed toward more experienced users. I am somewhat frustrated with the quantity of DW tutorials that are not user-friendly for beginners. Many of them speak in this web/tech/computer lingo that sounds foreign to neophytes. I think the makers of these tutorials need a class in instructional techniques that are more accessible to new users.
I’m still impressed with the Principles text and would like to see if Jason Beaird offers classes. J Since the topic of the week was Typography I dived into this subject. I found it fascinating. I taught myself calligraphy and different forms of script through the years and have used it greatly for designing signs, poster, cards, etc. Yet, I never went digital with typography or researched into it. I’ve discovered that my whole website will be published in a “we safe” font, either Arial or Verdana. I plan to view the site below that allows you to compare different fonts in several option modes: http://typetester.maratz.com/
The anatomy of type was intriguing. I finally learned that a serif is the finishing stroke at the bottoms and tops of certain typefaces that help increase legibility in large blocks of text. While sans serif fonts have a cleaner, more modern feel. Sans serif fonts are a good choice for the body text, but sometimes a more stylized font will be needed for headers to stand out. Beaird’s description of the application of typography on his tile website is a must read, page 125, with several useful tips on the design process in general.
I explored some of the sites featuring free downloads of fonts and found my favorite: www.dafont.com . This website had the cleanest interface, categorized the fonts, and provides an function that allows the user to type in something, like the title of your website, and then see how it looks like in the font. Downloading is seamless and easy to import into Gimp. Now I have started working on designing a better header for my website. I would like to create headers for the body of my site too that use the same font I’ll be using on the rest of the site.
Here’s a quick postcard I designed using a new font I downloaded. The font seems a bit pixilated, which is something I need to work out. (Note from Principles text: set body text to 10 pixels. Default font size in most browsers is 16 pix. If you want test to display at 12 px, then font size of paragraph must be 0.75 em. For 35 px headline, have to set them to 2.19em, p. 123).
Other useful typography links:
Just plain interesting! http://ilovetypography.com/
This week I have Comps and decided to spend one night messing around on Dreamweaver. I’m still battling with understanding CSS because it sounds like such a useful tool and I think it would allow me to customize my website more. However, this is a concept that I’m beginning to realize I cannot learn on my own. Maybe my mind does not work in the logical manner needed for website development. I’m going to seek help from a friend, because at this point I need a tutorial from a real person.
I did manage to find some semi-helpful tutorial videos on the Adobe website. They try to provide a basic understanding of how to use CSS. But it still sounds like they are speaking a different language sometimes! Through several viewing of these tutorials I did manage to figure out how to create new CSS rules while designing a Dreamweaver template. Also learned how to attach a CSS sheet, but that part has not worked out well. So, I’ve been experimenting on my “test” template, taking copious notes, and plan to finalize the template next week so I can add all the content I have compiled and written.
I love this section on texture. I poured over the sites, examples, and Chapter 3 from the Principles text. I’m beginning to notice all the layers involved in pushing a creative design.
See page 83: I like the idea of a decorative bar. I’m looking for a bar with a tribal look to it. After reading this chapter and the one on color I decided to totally change my color scheme … again. As a UF Gators fan, I’m going with colors that I know well: blue and orange. On p. 54 Beaird states this is a powerful complementary color scheme. He mentions the colors give off a business look. But I think they combine a bit of earthiness and playfulness that I’m looking for. I originally had a playful lime green, but that color was displayed differently depending on the computer and started to hurt my eyes after a while.
Now websites are going back to buzzword of 1990’s fashion: grunge! The Urban/ Grunge style is an artistic take on melding textures like plaster, metal, concrete, rust, wood, and other natural elements into modern looking, creative web design. I wish I could accomplish something like this because I love the realistic look of these designs. I had hoped to create something with a paper or corkboard background. That was an idea that seemed awesome in my head, but I was incapable of learning/designing in a limited time span with little knowledge on the subject. I’m also a fan of the clean, looking Web 2.0 style and this style seems more appropriate for me to carry out. I’ll post links to my favorite texture sites below.
The background of this site is actually what I wanted to create! http://www.grungetextures.com/
Realistic photo print image tutorial: http://www.pstut.com/tutorial-realistic-photo-print.html
Grunge Style: The ultimate guide: http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/
Chapter 11 was quite enlightening. Marketing is something that I understand. This chapter reminds readers that just building a cool looking website does not mean much unless you make it useful, relevant, and design it to attract visitors and serve their needs so they can build community. I highlighted the section on p. 302 about a site’s meta elements. I remember the HTML tag for adding this into a site and I think I can accomplish this. This is what librarians are good at: search terms! It’s also important to consider Google’s search criteria. My dad recently asked me how websites get to the top of Google’s search results. Thankfully I had read a book about Google in Dr. Simon’s class! I know that you can pay (i.e. AdWords), or as the book states, Google ranks websites based on how many sites link to yours.
I also thought the section on web rings was hysterical. I thought those were so Internet circa 1990’s! With all the Web 2.0 tools available I truly wonder who still uses web rings. Although I never knew about Google Webmaster Tools (p. 319) and find that as relevant and useful.
More on meta elements: p. 309 shows how to encode in your website the descriptive information that displays during a search. Another item to add to my website, along with keyword (p. 311). I imagine libraries may also be concerned with how to measure traffic and website visits. I think there are several companies that you can pay that will reveal this information. I worked as an Internet Marketing Assistant for a mid size corporation while getting my B.A. We worked with a company (WebTrends?) that measured traffic to the tee. They ran reports that were capable of telling us which sites visitors even came from! Now it seems that Google Analytics (p. 326) offers many similar services for free!
I browsed through Chapter 13. I know what’s there, but I’m not ready to digest all those concepts just yet. It is interesting to know how Pay Pal and online shopping carts are set up and work.
Update: Had to include this link from the Sunday Morning Show which featured a segment on a current web trend: free for all! The most popular websites are those giving away something for free. The show explores the psychology, marketing, future, and possible profit behind this trend.