Fruity CSS! with… Potatoes?

When I started this webpage, I knew exactly how I wanted to set things up. First, I sketched something pretty quickly in my notebook of how I imaged the site to be, and I recreated it from there.It is important to note that the page is not trying to be very formal, it’s more of a kids-and-parents style browser. Simplistic style is an easy way for visitors to know exactly where to go and how to read the site. It is almost set up as a road map and it would be difficult to get off of track or get lost. The point was to make everything as uniform as possible, and not have any surprises for any visitors. Therefore, all the images are on the right side, and they are all pretty similar. The main pages have very bland-white background images that got the point across as to what the area of the site may be about. The colors used to make the page look more exciting and alive are pastel colors.

It is important to limit the amount of different fonts per page because it can sometimes get confusing to look at, and make the page look messy overall. This site include only three different fonts. The first text style that is seen is the banner’s. The text style for that is called “Chewy”. Sticking with the theme of cuteness and color, “Chewy” fit well with the overall look for the site. For the <h1> and <h2> tags a more readable and not cutesy text was used: “Ubuntu Condensed”. For this font, it was important to make sure it was readable enough but also not too strong lined to ruin the ‘kid-feel’ of the site. The links are as noticeable as possible and as friendly as they can be. They are directly under the title and that allows people to navigate the site and jump from one place to another a lot easier than some other sites.

The front page to my site.

The front page to my site.

Screen Shot 2015-02-26 at 6.47.05 PM

One of the sub pages

CSS has the ability to change the feel of any website. It is important for a developer to remember his target audience and what would be most appealing to their eye. For people who are not as aware of the wonders of the internet, the page may need to be more simpler. Though, if it is directed more towards an audience who is constantly on the computer, the developer could get a little more creative with the style.

Web browsers are constantly changing, and along with that, old web pages and CSS styles will get recycled and reused. It seems like people are reverting back to the simplistic stylings of CSS just because all the creative juices seem to have run out. The internet is important to be able to reach every audience, and a person will not leave a page due to lack of creativity, unless it looks like a young child did it. The world is used to quick browsing and the more difficult the web pages are, the slower it is going to be to navigate quickly.

There are many sites that are helpful, but some stand out and are at the top of the Google web search for a reason. When initially picking colors, it is important that the developer understands what colors work well with the color of their choosing.

Color-Hex : provides the chance to find a starting color then helps the developer find colors that will work well with the base color chosen.

W3Schools : Helps whenever someone has a question. Chances are if the developer is having difficulties figuring out something, they are not the only one.

Working on this site has helped me understand a lot more about what you can do with CSS and HTML and it was a good learning experience. There are still a lot of things that I need to work on to better my designs, but there is always room for improvement in this field.

Miranda

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s