Archive | Uncategorized RSS feed for this section

Summary – History of Web Design!

10 Apr

The amazing resource http://sixrevisions.com/web_design/the-evolution-of-web-design/ provides an amazing overview of the amazing path that web design has taken over the years. I feel that going over the history of web design would provide insights into more than just technique: it provides a look into changing processing power, cultural values, and theories of color and flow. As a result, it would be a great way to summarize the research I have been doing and contextualize my work.

The first web page. 1992. Just seeing the web page gives me frission – it is the epitome of “my first web pages” from all over the world. Wow. We have come a long way.

The first Yahoo! – 1996. This is interesting. Because I doubt I would have been able to make a page like that back then, with the resources they must have had. I’d imagine that it would have taken a whole team or a really hard-working person just to create this part of the website at that time.

My favorite development of the 90’s is decisively the rise of table-based design. This is what would be considered the “intuitive” way to make flowing, modern websites without the resources provided by CSS. With table-based design, websites can be separated into readable and understandable regions that are appealing and relevant. That is why the Altavista and Yahoo! sites from 2002, although “primitive” looking, still look so “modern” when compared to the 1996 designs.

Interactivity was probably the beginning of a web design revolution, exploding around 2002 with DHTML (Dynamic HTML), Flash, Shockwave, and the like. Interactive websites were more likely to draw viewers, creating an incentive for the development of interactive web applications and sites.

CSS-based design made websites much more dynamic and adaptable to different screen sizes. The problem of having websites translate over to different computers with different screen resolutions and the like must have been a huge problem; CSS solved this problem by making the spacing and layout relative to a point, thus scaling web designs to different screen sizes. Additionally, the advent of Photoshop web design must have had a huge impact on the development of web pages, as can be seen with the transformation of the W3C site from 2002 to 2009.

The internet has always been an important source of information, but making that information natural and presentable is just as important. The growth and advancement of web design over the years has shown a significant trend towards readability and functionality that has helped make the web the important medium it is today.

Advertisements

Learning HTML – Subpost 4

17 Mar

Today I will be covering the basics of PHP, and what it does. My reference for this part of the study is http://www.killersites.com/PHP/, which is a credible source because, well, their stuff works.

PHP is a popular web language along HTML/CSS and Javascript because it allows for form processing, “easy to learn and use” and provides a way to do “server-side” actions. In order to run PHP scripts, however, the server must support the ability to “interpret” PHP – that is, “translate” the PHP to machine-understandable code.

PHP is convenient since it can be embedded in HTML. For example, on their website, they provide the sample code:

<body>

<?PHP

print ‘My first PHP script!’;

?>

</body>

This is interesting since the syntax of PHP uses the open/close tag system of HTML. And of course, the code snippet does exactly what it says when run: it prints “My first PHP script!” The important thing, however, is to save the site as a .php, not as a .html. This is important. Because how else would the server know to anticipate php code?

Part 3 of the tutorial is “coming soon” (I am not to sure how soon, though), but I did learn a lot about introductory php in this lesson. I learned how to run and implement it on my own machine, and I also learned about a couple of commands such as strlength(); overall, the language seems to be similar to the other languages I have been introduced to.

Colors and Artwork – Subpost 4

3 Mar

Today I will be using the website http://designinstruct.com/web-design/clean-classy-web-design-photoshop/

This website provides a tutorial on creating a “classy web design on photoshop.”

The first important thing I notice when making the website design is the use of noise, such as in Step 4. Noise is important since it adds an organic feel to a website – a texture, almost like the surface of a table or a rock. I had trouble with the menu links, since Photoshop Elements does not have the same capabilities as the full version of photoshop.

The texturing in step Step 7 was interesting since I haven’t done textures before. I had no idea that it was that easy!

In Step 8, drop shadows were used to enhance the title text. I thought that the use of drop shadows in this particular case was especially notable since white shadows were used for black text – a new and interesting way to embolden text. The outer glow in the next step added a subtle but effective touch to the text.

I thought the part about the slideshow area was interesting, too. I hope that one day I would be able to create slideshows to put on websites; creating slideshows takes programming power that I have not learned yet.

Looking at Examples – Subpost 3

17 Feb

Hello once again! Today I will be examining the websites listed in the amazing article at http://sixrevisions.com/design-showcase-inspiration/responsive-webdesign-examples/

Perhaps to stay within the bounds of school policy, I shouldn’t bother with the first website, which is about beer… o.O

Hm… although the Daniel Vane website is rather inspiring, I’m not sure how functional it is. It seems cluttered, yet responsive. So in this case, I am ambivalent about the design. But it does have many good qualities that make it stand out: for example, its rectilinear layout is very appealing to the eye.

Much more appealing, in my opinion, is the website http://2012.inspireconf.com/, which uses color very effectively. In this case, it capitalizes on “cool colors” that emphasize a possibly environmental message. It is undeniable that artwork is just as important as layout, and this website is a perfect example of the importance of creating artwork that is appealing and meaningful.

The website http://forefathersgroup.com/ is one of those internet gems that crosses the line between “this is in my browser” and “this is a standalone application.” The reason why it seems to transcend this boundary is that it is so well made, with what seems to be nearly a GUI. Even more amazingly, this GUI is beautifully crafted with excellent use of color.

Just seeing the website http://www.humaan.com.au/ sent shivers down my spine. Whatever amount of money the company spent for the creation of this website was definitely worth it. One cannot help but notice how… dynamic it is. The background changes organically with each slide of the presentation.

Although I am far from achieving the interactivity and amazing design of these websites, I definitely look forward to the day when I am able to create such gems!

Colors and Artwork – Subpost 3

4 Feb

Seeing nice color combinations always sends shivers down my spine.

I want to be able to work with these color combinations and make beautiful webpages.

So of course, I have to devote some time to learning color theory and how it affects our perception of websites. When you search up “color theory for web designers” or something like that on Google, one of the results obtained is http://webdesign.tutsplus.com/articles/design-theory/an-introduction-to-color-theory-for-web-designers/. The reason why I chose this page is that I actually found the web page’s design appealing, and thus I knew that the author knew what he or she was talking about. After all, the majority of the websites out there claiming to help web designers do not, ironically, seem to be the best-looking out there. Ironic, isn’t it?

Color theory consists of three areas: Complementation, Contrast, and Vibrancy. Complementation refers to the relationship between colors. Contrast helps to direct the viewer’s attention and can reduce eyestrain. (The examples used in the website really drive it home). Vibrancy directs the emotion and feel of the page.

Now, on to the meat of the crash course. The triadic color scheme seems interesting, and I think it would be good for pages that want to really capture the viewer’s attention at specific areas. The compound color scheme may suggest a dichotomy or split between sections of a page, or can indicate differences such as those between headers and content. The analogous color scheme would probably be good for general-purpose aesthetics.

The article points to a tool called “Color Scheme Designer 3,” at http://colorschemedesigner.com/. I can’t wait to play around with it, and possibly learn from the results it produces.

Colors and Artwork – Subpost 2

24 Jan

I’m such a total pro at this now. Well, at least I’m getting the hang of it.

I found a tutorial for making a nice-looking header for a website at http://psd.tutsplus.com/tutorials/designing-tutorials/creating-a-cool-3d-web-design-effect/. This would be useful for creating a really nice, spiffy MATH CIRCLE website!

First, I had to overcome the problem in step 1 of creating a “color overlay” in photoshop elements. It turns out that by using the background as a clipping mask (a layer that uses the opaque pixels as “masks” for another layer) one can create an identical effect: a filled background with a uniform solid color.

After that, the tutorial was no problem to follow. I found it easy to follow the well-written instructions, and before I knew it, I had a full-fledged header to show. WOW!

Well, except for the off-center pi. But that’s no biggie.

Image

Learning HTML: Subpost 3

9 Jan

Javascript!

I am trying to learn how javascript works; it seems to be a rather confusing language. However, as the language of most of the interactive Internet as we know it, it is important to know.

To begin my research, I started at the well-written article at http://betterexplained.com/articles/the-single-page-javascript-overview/. This article explains, through examples, how Javascript works.

First of all, the language appears to be close to C, and its relationship with Java lies more in its name than in its structure. However, it is similar to Java in that it is an OOP, or “object-oriented programming,” language. This means that certain groups of objects can be made that inherit the properties of a class.

Apparently, all it takes to enable Javascript in HTML is a <script> tag. Who knew it was that easy? What surprises me the most is that you do not have to define a type for any variable; for example, in Java, you have to define a number as “double” or “int” according to the type you wish the variable to have. According to the examples provided in the website, all it takes is a “var = (whatever)” statement, and the machine will take care of variable type for you. Even with strings. As for classes, objects, and other good stuff, there is a protocol called JSON, or “Javascript Object Notation.” This notation is probably important for making code more readable. Arrays seem to be no-pain; they “grow dynamically,” to quote the website. It has nifty string manipulation tools, and can compare types as well as values. The conditionals and loops seem intuitive, and seem to parallel those in other programming languages. Functions and classes seem just as much easy to comprehend. You can even probe for errors using “catch” and “try.”

All in all, Javascript seems like a great language to program in, with much less syntactical and procedural burden as Java or C++, etc.