While working on the design for my CSS Zen Garden, I found myself in the unusual situation of having to use many large PNG files. I needed to do this since my graphics consisted of layers with shadows, transparencies and glows. PNG files are relatively larger than JPEGs and GIFs and if you want to use all the fanfare that png 64-bit offers, it will make them even larger. This post is a combination of tutorials I found on how to reduce png files using a non-destructive technique in Photoshop and then optimize it in Fireworks.
Saturday, July 16, 2011
Sunday, June 5, 2011
HTML5 and New Tags
Last year, I was fortunate enough to attend the Web Directions USA conference in Atlanta, GA. I had the pleasure to meet leaders in web development and technology. I also learned about the implementation of HTML5. At the end of the day I was familiar with most of its new tags and had a better understanding of its semantic purpose. Basically the idea is to replace the generic div tags with more meaningful or descriptive mark up, if you will; as a result, now we have header, nav, section, article, aside and some more.
Tuesday, April 26, 2011
How to Make a Fool of Yourself
It’s been a while since the last time I blogged, the reasons have vary from being extremely busy to defining my own existence. It’s funny, it began as a school assignment, and then when I started working, the urgency of writing brought me back to this page again. I have to say it was encouraged by a friend of mine who also happened to be a colleague.
Tuesday, November 17, 2009
Principles of beautiful web design
Principles of beautiful web design
The book The Principles of Beautiful Web Design by Jason Beaird is a guide that refers to the application of design elements as well as the different thinking methods to develop strong concepts for the web.
Layout and composition
As your starting point designers need to understand the nature of the biz they are working for. By gathering all information and going through an analytical process, we can finally establish the foundations of our design. This chapter explains how balance, symmetry, grids, proportion, unity, repetition, and proximity need to be well thought on this early phase of your process. For more info visit http://www.coolhomepages.com/
Color
This chapter covers the significance of colors and people’s immediate reaction to them. It emphasized their relation with feelings, states of mind and nature. Here also explains the relation between complementary, cool, and warm colors and how they can best serve for a specific design purpose. For more info visit http://kuler.adobe.com/#themes/rating?time=30
Texture
It refers to an optional approach that has not often been taken into consideration offering a variety of solutions that may round your design. Texture gives you the ability to bring a feel to your layout even when is intangible in wed design it a can evoke memories or experiences. For more info visit http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/
Typography
Typography like in any other media is a key element in design. It is not only what we communicate, but also how we communicate and when we communicate. Although typography for web is limited for content it needs to be specified between serif and san serif; in addition Designers use other techniques to secure certain types faces that they want them to be display all browsers. For more info visit http://ilovetypography.com
Imagery
It covers the different formats when saving images for the web as well as the quality and legibility. It also covers the most effective way to handle imagery on a page base on its content and hierarchy. For more info visit www.shutterstock.com
The book The Principles of Beautiful Web Design by Jason Beaird is a guide that refers to the application of design elements as well as the different thinking methods to develop strong concepts for the web.
Layout and composition
As your starting point designers need to understand the nature of the biz they are working for. By gathering all information and going through an analytical process, we can finally establish the foundations of our design. This chapter explains how balance, symmetry, grids, proportion, unity, repetition, and proximity need to be well thought on this early phase of your process. For more info visit http://www.coolhomepages.com/
Color
This chapter covers the significance of colors and people’s immediate reaction to them. It emphasized their relation with feelings, states of mind and nature. Here also explains the relation between complementary, cool, and warm colors and how they can best serve for a specific design purpose. For more info visit http://kuler.adobe.com/#themes/rating?time=30
Texture
It refers to an optional approach that has not often been taken into consideration offering a variety of solutions that may round your design. Texture gives you the ability to bring a feel to your layout even when is intangible in wed design it a can evoke memories or experiences. For more info visit http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/
Typography
Typography like in any other media is a key element in design. It is not only what we communicate, but also how we communicate and when we communicate. Although typography for web is limited for content it needs to be specified between serif and san serif; in addition Designers use other techniques to secure certain types faces that they want them to be display all browsers. For more info visit http://ilovetypography.com
Imagery
It covers the different formats when saving images for the web as well as the quality and legibility. It also covers the most effective way to handle imagery on a page base on its content and hierarchy. For more info visit www.shutterstock.com
Monday, November 2, 2009
10 Points to Remember When Building a Website
1. Creating an organized directory and standardizing your markup will help you troubleshoot any problems more efficiently. This will also help others understand the nature of your coding process.
2. Make sure you title your page. It is important so browsers can track and categorize your side for a more effective search.
3. Use special characters’ attributes when marking up a page. Some characters or symbols will not be rendered in certain browsers otherwise.
4. Default margins. All elements include default margins; for instance it is critical to define those measurements on each declaration, even cero needs be specified.
5. Make sure you establish the width on every floated elements.
6. Make sure embedded styles sheets are under the head space on your HTML file.
7. Text elements are inherited. Once you established a font size just like any other text element you have to use that number as your reference for all others in your document.
8. Image replacement technique is your best choice when using obscure typefaces or branding for display purposes.
9. To add background color running to the screen bottom of your page you need to add some padding-bottom at the end of your document usually in px. tocreate a distance from your last text line.
10. Validate HTML and CSS separately. You can validate your HTML and CSS together when checking your HTML markup; however, that doesn’t mean that your CSS is correct you need to do it separately for an accurate validation.
2. Make sure you title your page. It is important so browsers can track and categorize your side for a more effective search.
3. Use special characters’ attributes when marking up a page. Some characters or symbols will not be rendered in certain browsers otherwise.
4. Default margins. All elements include default margins; for instance it is critical to define those measurements on each declaration, even cero needs be specified.
5. Make sure you establish the width on every floated elements.
6. Make sure embedded styles sheets are under the head space on your HTML file.
7. Text elements are inherited. Once you established a font size just like any other text element you have to use that number as your reference for all others in your document.
8. Image replacement technique is your best choice when using obscure typefaces or branding for display purposes.
9. To add background color running to the screen bottom of your page you need to add some padding-bottom at the end of your document usually in px. tocreate a distance from your last text line.
10. Validate HTML and CSS separately. You can validate your HTML and CSS together when checking your HTML markup; however, that doesn’t mean that your CSS is correct you need to do it separately for an accurate validation.
Tuesday, October 13, 2009
Photographic Web Nightmare
I know this sample may look extreme for most of you; however, I just wanted to show you not only a sample of a bad photographic website, but instead the worst representation in this category ever created. Since anyone who learns the ins and outs of html or CSS feels pretty much entitled to publish anything in the browser, It is not hard to find poor samples of web site designs. However, the chances to find a site that violates all the basic rules of design, orchestrating the most unspeakable visual solution ever seen in the history of Internet can only be found in http://yvettesbridalformal.com/ . As you can see, there is a lot to work to do. The first thing I will change on this site is the background-image; a pattern that has nothing to do with this theme or any other. What were they thinking? Next immediate step is to reduce the typographic elements to one or two typefaces, styles, sizes, weights, colors, etc, etc. Take out all the background for text, and God! Create a navigation bar, which has not been established. I don’t know if the designer was under the influence while working on this but the repetitive, colorful, non-sense, text has to go, and the new content needs to be arranged in paragraphs and edited closely. The excessive use of underlined links are a pain to watch along with the photography all over the place show. The imagery could have been organized in slide shows or in separate windows for demonstrations purposes. Taking away some of the silly comments and greetings would not hurt as well. The only reason I took the time to write about it is to show some samples of some disturbing design that can be found out there.
With …
Sunday, October 4, 2009
MINIMALISM design
As I was learning how to identify the different design solutions used for web, I found the Minimalist style, term that I have heard before in another art context. Minimalism is a form of art that reduces design elements to the basics, leaving only the most fundamental features. This art style became very popular in the 60’s and late 70’s mostly in the category of sculpture and painting. Although minimalism was primarily popular in the United States, it was also followed by European artists, who later continued the trend of the American school. Today, minimalism has been applied towards web design, an art form that depends entirely on the size of its audience; which makes the execution of this approach, a real challenge. For instance, there is a short list of successful samples. However, I noticed that most of them were created in Europe. Consequently, I found http://www.weyhoven.de/ a graphic artist website from Germany, which I believe, becomes a good sample of an effective design solution in a minimalism style.
On this site colors are limited to black and green for text. The content information is minimum and simplified by the use of san-serif typography. The geometric structure of the layout is emphasized by the arrangement of four text blocks framed by windows that display after clicking on the WER/WAS/WEISO/WO WHO/WHAT/WHY/WHERE navigation bar; which I bothered to translate to ease up the adventure. The artist extends its design in the WHAT window to show his portfolio in an interactive slide show. A simple layout that uses math elements (-, +, x.) or computer symbols, if you will, generating a language that he keeps consistently throughout the site. The Minimalism design of this site was not arbitrarily apply instead this representation contributes to the overall style that is also the trade mark of his own art.
With all …
Oskar
Subscribe to:
Posts (Atom)