Looking at Examples: Subpost 2

19 Dec

Hai!

Today I will be performing a color analysis of http://www.andypatrickdesign.com/

This website was mentioned as one of the “top website designs of 2012” by http://designshack.net/articles/inspiration/the-30-best-web-design-gallery-picks-of-2012/

Image

First of all, let me just say that this sends megashivers down my spine. From the noisy background that was designed to be pleasant to look at, to the small details like the landing plane as you scroll down, the website is just splendid.

The website uses “contrasting” orange and black colors that nevertheless seem to complement each other. The website would probably be considered “split complementary” because of this interaction of color. The black and orange stand out significantly from the background, which fulfills the need for contrast. Although the website admittedly lacks focus on the text, it has tremendous focus on the images and treats the text like art. It does this, again, through color; for example, an entire page of images are set to a black background to emphasize the portfolio items.

All in all, the webiste is wonderful, and I look forward to analyzing even more websites in the future.

Advertisements

Colors and Artwork – Subpost 1

28 Nov

Hello! How’s it going?

Photoshop seems to be an important resource for constructing excellent websites. Although many effects can be achieved with hard code, there are many that are more effective when done in an advanced image editing program. Although I have Photoshop Elements (it was free!), articles about Photoshop effects are still worth reading since both programs are virtually the same for people who are not deep into graphic design.

As my resource for investigating Photoshop effects, http://blog.echoenduring.com/2010/01/20/10-photoshop-filters-you-should-definitely-know/ does a great job of summarizing the different modern web design effects that could be achieved in Photoshop. Just scrolling through the website makes me dizzy… SO MUCH COLOR!

I followed the tutorial with great results.

Gaussian Blur (amazing effect, loved working on it!)

Noise
The noise filter is absolutely no problem. It is useful for making vintage-looking areas and drawing attention.

Clouds
This effect requires a multiply blending mode. This creates darker colors since the color values are multiplied.
From this exercise I learned how to create a gradient layer, which was exciting.

Looking at Examples – Subpost 1

27 Nov

Hello once again!

This time, on my brief hiatus from the abstract world of hard coding and html and CSS, I am going to talk about COLOR and AESTHETICS!

Today I have looked at some amazing designs on http://designm.ag/inspiration/examples-of-solid-colors-in-web-design/. On this website, I was able to draw my own conclusions about web design based on patterns I saw.

I found Project 1000’s page (http://proiect1000.org/) to be very appealing. I think it looks so good because of the excellent color balance, its use of shape and opacity, and the font choices used to build the site. I opened the source code (Ctrl+U in Firefox) to find out what font it used; it turns out that it uses the humble, sans-serif Arial font.

The Barista iPhone app page (http://www.glasshouseapps.com/barista/) now has an updated, even better look. The background is a solid gray color; in my interest to find out what color it was, I downloaded an application called Instant Eyedropper, which finds the color value of any pixel on the screen and converts it to an html hex code. How convenient! The site uses a primary background color of #212121, and the main field on top has a color value of #222222. I think the purpose of the color layering was to create a sense of balance, keeping the eyes focused mainly on the main field. Their logo is also amazing, and the website uses a font called “Vegur” that just blows me away. Vegur font download: http://www.fontspace.com/arro/vegur

Another website that stood out to me was David Fook’s design portfolio, http://davidfooks.com/. The interactive front page is amazing, but the animations are not the only things that caught my eye. The symbols at the top, although not carrying intuitive meaning, are symbols nevertheless rather than words. This has a powerful potential for branding and advertising. A gradient shade lights up the center of the page, where David Fook wants viewers to focus. Additionally, the background uses a humble default black, #000000. This surprises me; it seems that with just the simplest of colors a magnificent website can still be made beautiful.

The Yaron Schoen webpage mentioned on the website does not look the same anymore; I have attached a picture of the site for those who are interested. The rectilinear, sans-serif font is intriguing, and Yaron made it the center of the page rather than a picture. Simple yet relevant graphics are important to the website since they direct the viewer to different articles in a practical way. The background color is solid, yet what makes it appealing is that it is used in an interesting way, tied in with the chemical-magic motif.

Example

This is a screenshot of Yaron Schoen’s webpage.

Learning HTML: Subpost 2

16 Nov

Hey everyone! Progress update:

I’ve been learning html for a while and have even started on CSS. CSS is interesting, since it is like a “layer” applied to a html file. For example, you could use a text modifier (for instance, body{font-family:”Times New Roman”; font-size:20px; }) to change ALL text related to the category specified. You can also use “stylesheets” to layer in some cool or often-used layouts. On the math circle website, for example, I used a prefabricated stylesheet (rather conveniently named “stylesheet.css”) to automate the creation of menu items. I would definitely like to make my own stylesheet in the future, however. That would be a great project; it integrates everything I will be learning for the ISP.

CSS operations must be specified within a “style type = “text/css”” tag. Stylesheets are can also be referenced in the head with a line like “link href=”styles.css” rel=”stylesheet” type=”text/css”.

As for HTML, I learned what “meta tags” are. Those are the things that EasyBib uses to autocite. For the math circle page, I included meta tags just for fun. This way, I can have the website display a tab name other than “Google AppSpot” or “Localhost:9000.” I also added a favicon that is not particularly impressive, but a favicon nevertheless.

I am planning on creating a better logo for the site, but I’m probably not getting to that any time soon. I would probably design it to match the background color of the website and take up the entire top of the page.

Learning HTML: Subpost 1

4 Nov

Hello world, once again!

It has been a while since I have posted on here… wow. Sometimes I feel that I don’t get things done because I cannot build up that “activation energy” to do what I need to do. But that “activation energy” is just my imagination, since nearly everything is possible if one tries hard enough.

Like learning html.

Which I have been doing over the past month.

Right now, I’m at the point that I can read any html file that does not include ANY references to CSS or Javascript or any other third party, non-html things. That is, websites that existed when the internet first came out.

W3schools is a great resource for learning html, and it’s what I used to learn new things. For example, I learned about useful things like text formatting and useless functions that have been outshined by CSS and HTML5 and Javascript and whatnot.

I have a website going right now (http://wwmathcircle.appspot.com/) that is a part of my webmaster duties for the Math Circle club. Here is a picture of revision 1:Image

Isn’t that logo amazing?

I used basic principles of html and even some CSS to construct the website.

The hard part of making sites in html is remembering all of those tags. I’m not sure whether to memorize them or not; after all, they are all on the internet, and who will ever know? But I am pretty sure that knowledge in this area comes with practice, and that memorization is not completely necessary.

First Post!

2 Oct

Disp “Hello world!”

I am a total pro at TI-BASIC. I love making programs on my calculator. I can also draw pictures on the calculator screen. Yay. Calculators!

cout << “HELLO WORLD!”;

In order of most knowledge to least, here are the other programming languages I claim to know:

  • Python
  • HTML
  • Javascript
  • Java
  • C++
  • Z80 Assembly

Languages I can read:

  • LOLCODE for the win!
  • English and Spanish
  • pretty much anything with C-like or BASIC-ish syntax

<h1>Hello World!”</h1>

Yeah, I know HTML, or at least enough of it to pretend I do. But I want to learn how to make my pages all pretty and stuff! How will I accomplish this? Plan:

  • Fill in the gaps I have with HTML
  • Learn more abstract aspects of web design (color theory, perception, modernism) and explore how they relate to real web pages
  • Learn CSS
  • Learn how to use Photoshop Elements (which I got for free, btw) to make cool stuff
  • Integrate everything I know into a real, live website