Stereoxide|Mark Peria

Its been great taking this class. Learned a lot, got introduced to a program that I thought was a total waste of HD space (Fireworks) and I was surprisingly challenged through all of it.

It also made me focus on something that I’ve been thinking of doing for a while now. Ive had the idea of an artist’s social networking site for quite a long time and it finally came to fruitition. This class helped with that.

Thanks to everyone who gave me feedback and helped improve my web design skills.

Again, here’s the final result of the project:

http://bcts-potomac.aacc.edu/CAT/CAT15/Final%20Project/index.html

This blog will be gone soon. By the end of June. By then my new website artpont.com will be up and my new personal portfolio, stereoxide.com will also be up.

May 13th, 2009 | Category: CAT 274, General | Leave a comment

After a grueling 3 weeks of work my Final Project protype is done! *Cue dancing* Well relatively done. Some pages are of course still under construction but in terms of class requirements I already did all of it.

Without further ado here it is:

http://bcts-potomac.aacc.edu/CAT/CAT15/Final%20Project/index.html

Next step is to export everything into php and then make it usable in Drupal. Yeah… that’ll be real easy… *shoots self*

May 6th, 2009 | Category: CAT 274 | Leave a comment

In-class assignment

Just edited the OLA Profile prototype. Finished it before class ended. If you want to see it its on the previous post (Week 11).

Final Design Build out

This took a while to make. I think I used too many divs but I found that it makes it a whole lot easier. Works perfectly in Firefox and Safari but there are some issues with IE. I’ll try and get it fixed.

And for the logo I tried using gif but I was using transparency. GIF transparency is very… ugly. So I opted to use PNG. I’ll still use GIF later in the animation (ads and other stuff).

http://bcts-potomac.aacc.edu/CAT/CAT15/week12/index.html

April 21st, 2009 | Category: CAT 274 | Leave a comment

In-class assignment

Making awebsite out of the prototype was pretty simple and quite enjoyable. Im warming up to fireworks more and more. I wish I had done the design for my website in FW. I still have no idea how to prototype in PS.

Here’s the DigitalJENN website assignment:

http://bcts-potomac.aacc.edu/CAT/CAT15/week11/digitaljenn-start.html

OLA Faculty Template prototype

This one was a bit tedious only cause Ive got too many elements. Finished it though. Well not really, there’s still some more stuff to do to it.

http://bcts-potomac.aacc.edu/CAT/CAT15/week11/ola/ola_aacc_prof.html

April 14th, 2009 | Category: CAT 274 | Leave a comment

Time passesby  so quickly we’re in week 10 already. Oh and I still can’t connect to the Angel dropbox. Anyone else having this problem?

In-class assignment

Re-edited the DigitalJENN design again and made a prototype of it. Never used Fireworks for p[rototyping before so I ran into some troubles. Specifically when I was making the State 2s. It worked the first time but on the next ones I couldn’t get it to work upon preview. I don’t know what I’m doing wrong. I followed all instructions to the dot.

Here’s a pdf of the file:

http://bcts-potomac.aacc.edu/CAT/CAT15/week10/design-grid.pdf

OLA Faculty Template rev3

I stuck with the layout I did last time and then made a prototype of it. Again the problem with states are there. I just can’t seem to figure this one out. I was able to finish it though.

http://bcts-potomac.aacc.edu/CAT/CAT15/week10/ola_profile_mperia_rev3.pdf

Here are the pngs for both the OLA and DigitalJENN:

http://bcts-potomac.aacc.edu/CAT/CAT15/week10/design-pages-markperia.png

http://bcts-potomac.aacc.edu/CAT/CAT15/week10/ola_profile_mperia_rev3.png

From table based to table-less web design with CSS

This is a pretty thorough article. I like it very much. Made it much easier to change values in the CSS (instead of looking for them in the code). I was thinking though, I’d probably still need to memorize or at least jot down class names and ids if I start doing some pretty big designs (same with doing it in notepad). But overall this made everything simpler.

http://bcts-potomac.aacc.edu/CAT/CAT15/week10/yachts/float_columns_mark.html

April 7th, 2009 | Category: CAT 274 | Comments (3)

OLA Faculty Template rev2

I really don’t know what else to change except for some of the margins and padding on the columns. If there’s anything else I should do please comment on it. Thanks.

http://bcts-potomac.aacc.edu/CAT/CAT15/week9/ola_profile_mperia_rev2.png

Design Project Layout

I’ve already started on the design document layout on PS. Here’s what’s done:

http://bcts-potomac.aacc.edu/CAT/CAT15/week9/layout.jpg

Lesson 6 and 7

No problems, just followed the book and got through em.

http://bcts-potomac.aacc.edu/CAT/CAT15/week9/lesson06/ourclients.html

http://bcts-potomac.aacc.edu/CAT/CAT15/week9/lesson07/layout_start.html

CSS Typography

Garrett Dimon explains in the article the flexibility of CSS when doing typography. CSS is very easy to understand and is flexible enough for use with typography. You can size and resize fonts through it. You can also change font typefaces and you can even change the leadin ang kerning by just changing a couple of propertices (like line-spacing and word-spacing). I myself have played around with these properties before and sometimes trial and error is the best way to make a typographical design look good.

Grid and Column Designs

I have been to WebDesignerWall before for its articles. This one is one of their best articles. Most of the websites they featured are pretty famous and I have seen them over and over. The layouts for each websites are absolutely fantastic. My favorites would probably be the textured design of the Sundance site, the simplicity of Derek Punsalan’s 5Thirtyone site and Jesse Bennett-Chamberlain’s 31Three.

Combined Font Survey

It’s nice to know the most commonly used fonts. Very helpful if I want to pick a font that most people will commonly have installed in their computers. This helps in making website designs more accessible.

Apparently the top 5 most commonly used fonts are:

1 Microsoft Sans Serif

2 Verdana

3 Arial Black

4 Arial

5 Palatino Linotype

Looks like not a lot of people like serif fonts.

March 31st, 2009 | Category: CAT 274 | Leave a comment

In-class assignment

For the in-class assignment we had to redesign DigitalJENN.com according to what was drwn up in the outline. Pretty simple and straightforward. Didn’t come across any problems aside from the missing font which was easily replacable with any Serif font

OLA Faculty Template

On this one I did a pretty simple 2 div layout with a header, footer and a left sidebar. The additional info on the page will be floated but fixed.

Here’s how it turned out:

http://bcts-potomac.aacc.edu/CAT/CAT15/week8/ola_profile_mperia.png

Dao of Web Design

John Allsop’s article on web design takes the principles and philosophies of Daoism and applies it in the “art” of designing a website using style sheets. The article emphasizes harmony and adaptability. Each element on the design should be both pleasing to the eyes and accessible to the user (user-friendly). Flexibility plays a very important role in web design.

PoBWD

One of the most important element in a website is the images that is incorporated in the design. It has to be relevant to the theme of the website and has to be eye catching. The first thing that a user looks at is how easy on the eyes the website design is. If it is pleasing then the chances of them staying on your site is higher. Chapter 5 tackles all these important aspects of the selecting image for the design as well as the proper way to use them. There are a lot of different types of images on the web like stock images. One of the most important things to remember when selecting stock images for a design is that there’s a difference between free and royalty-free images. Then there are rights managed ones that you have to pay to use. For convenience sake I suggest that we as designers learn photography ourselves and use the photos we took ourselves on our designs.

March 18th, 2009 | Category: CAT 274 | Comments (1)

In-class assignment

This week the class practiced creating animation using Photoshop. We crated an animated banner for the AACC Dance Company Audition.

Now this one is actually pretty new to me. I have never made any animation with another program other than AE, Flash and that really old Jasc animation program. So I was pleasantly surprised to know that Photoshop can make animations (when did this start and why was I not informed?). Of course after playing around with it a bit the Photoshop animation controls and capabilities are a bit primitive but it does the job really well for web graphics, specially for gif animations.

So here’s what I came up with: http://bcts-potomac.aacc.edu/CAT/CAT15/week7/anim.gif

MyAACC Spring Banner

For the banner I didn’t revise much. A lot of the revisions I tried didn’t end up looking better than the first few ones. Most people seem to like the one with the cute cartoon characters so I’ll probably stick with that. I made a whole new image for the 331×30 one but too bad I can’t fit the whole thing in so I had to crop it.

800×80

331×30

I just linked it so that people can see the full image.

And for those who were wondering what the characters looked like uncropped:

Characters 1

Characters 2

On the “Dandelion” I did some tweaking of the background colors.

800×80

331×30

March 10th, 2009 | Category: CAT 274 | Comments (1)

In-class assignment

The assignment was to do a navigation bar/menu bar in Fireworks and put in a hover over animation with it then export it to html. I thought its pretty cool that you can do all that in fireworks without even doing any code at all.

Here’s the result: http://bcts-potomac.aacc.edu/CAT/CAT15/week6/navbar.htm

Blasting the Mytho of the Fold

In Milissa Tarquini’s article, she talks about the myth that all information on the site should be readily available in the top of the page (above the “fold”) as if users have never heard of scrolling before. Cramming all the information just on the top of the page just doesn’t look appealing. It would look cluttered and too heavy. Although clients would want the users to know about their website immediately there are better ways to do that. I agree with one of the comments on the article from Chris Ratlaff. To convince users to scroll down on the page, make the content of the whole page interesting. If you keep the user glued to the content they would want to know more about it and would check if there is more to it than what they initially saw.

Search Engine Placement Tips

The tips given by Claudia Bruemmer is very good and indispensable if you want your website included in the top ten lists of search engines. I think you can sum it up to three things.

1. Keyword on the title tag.
2. Be relevant content-wise.
3. Don’t ever use ‘effin frames. Seriously back in ‘95 frames were ok, but were in the 21st century now people (Gotta talk to people who developed ANGEL).

Five Principles to Design by

Joshua Porter makes a good point in talking about design as a user experience. User accessibility is the most important thing to consider in designing a website. Your website might be very pretty but in the end if the user cannot get to the content then what’s the point?

March 2nd, 2009 | Category: CAT 274 | Leave a comment