Beautiful Styling In Web Design

[Little Asterisk 1]

I was thinking of starting a new interesting topic here on Xisto. And, since my beloved area of interest is web development and design - that's what first came to mind.

 

We (well, web designers and designers in general) might have trouble going to "that special place" and getting inspiration sometimes. Let's face it - even the best have these periods of unproductivity, it's nothing to be ashamed of.

 

So, I wanted to present this topic as a sort of help in these times. You can post beautiful sites, screenshots of some particular elements in their design and tutorials how to achieve that effect. If you don't know how to achieve a particular effect, you can also post a questions and ask someone who might know that.

 

I hope the moderators will put this topic in the sticky part of the forum, so we don't have to search for this topic in order to revive it from the dead.

 

Without further ado, here's a list of some things I found inspirational while designing:

 

Jason Santa Maria

What I like about the site: magazine style, each post has its own styling, special attention to detail, beautiful images, good writing

Pay special attention to: Well, each individual article! He's using ExpressionEngine as his CMS of choice (ExpressionEngine - Publish Your Universe!). E

Elliot Jay Stocks

What I like about the site: Interesting background and logo, nice effect on pictures, blog has an interesting layout

Pay special attention to: The blog, and the interesting About page. He's also using a new CMS called Harmony (http://get.harmonyapp.com/). You can read more about this CMS on his blog (Perfect Harmony » Blog » Elliot Jay Stocks)Elliott is also the developer of the popular free "naked" theme for Wordpress called Starkers (Starkers: The completely naked theme for WordPress).

Veerle Pieters

What I like about the site: Like on Jason's site, articles very much remind me of a magazine. You can also turn the "contrast filter" to change the background to white and text to black for better readability. Very nice imagery and illustration on the top.

Pay special attention to: Her nicely styled articles, great (almost invisible, but still "clickable") integration of ads.

DustinCurtis

What I like about the site: As you already noticed, I'm a sucker for the "magazine-style" movement. That's what impresses me on this one, too. But also, the footer is a rather interesting piece of art - he actually counts the estimate percentage until his death! Maybe a dark thing, but I practically guarantee you it's individual.

Pay special attention to: Use of imagery in his articles, the footer.

Gregory Wood

What I like about the site: Well, try to guess it That's it alright, beautiful articles. From the technical stuff, I'm ninety percent certain he uses Expression engine (like Jason Santa Maria, expressionengine.com) as a CMS.

Pay special attention to: Top 5 Spielberg films article. Great background and almost magazine-like (what do you know) layout. Also, you might just find a new film to watch.

Alrighty then, these were my five sites - no pictures today - for inspirational resources. As they're magazine-like, I can often visit them and see various different ideas for a website. Great stuff!

[Little Asterisk 1]

Whoa, guys! Don't come at me so strong, I don't know if I can handle responding to all the posts you've put here! This topic is really heating up, so I'm going to post some more inspirational sites and screenshots.

 

(This is a joke, you know? I'm not (that much) crazy )

 

So, next up... A couple of elements from various websites and Wordpress themes I've seen.

 

From Squared eye (http://forums.xisto.com/no_longer_exists/), a design-studio... I like the numbered "step-by-step process", giving a transparent look and feel to it. Also notice the gridded background, with little squares all over the place. The nice big logo is also a good design element.

Bada-bing (http://forums.xisto.com/no_longer_exists/), which features a nice and nifty vertical slider. A bit unusual, but very cool. Also notice the beautiful tooltips that appear upon hovering an image.

Techi (techi.com) does this thing where the categories are nicely positioned within a grid. I also like the big icons, which clearly indicate what the particular category is about.

This is a nifty little slider from a great Wordpress theme out there, called Urban 1.0. It's by Paul Bennet (from paulicio.us, another great and unique site).

I have this particular element saved on my computer as "popular-fubis.jpg", but I don't know where it's from. A search for "Fubis" on Google returns some neutral results, not important or related to this "Popular posts" side-widget. Notice the use of big images:

Okay, this was it. I hope this time the topic continues on with a bit more sparkle to it.

[web_designer 7]

i am suffering from this weird status just right now , i am out of ideas and i should make my own portfolio as soon as possible, therefore i am trying to feed my imagination with some good designs to get inspired again, these are some good sites that i liked their portfolio. they have a lot of unique designs i liked them a lot.

 

- http://forums.xisto.com/no_longer_exists/

 

 

- http://forums.xisto.com/no_longer_exists/

 

 

 

- http://www.nisgia.com/

 

 

 

- http://www.jessewillmon.com/new_portfolio

 

 

- http://forums.xisto.com/no_longer_exists/

 

 

they are very inspiring and the designers really did a great job. i like the colors, and choosing backgrounds and how they mixed the all pieces together to look like this, i even like the effects even they are making the site loading so slow.

[Little Asterisk 1]

Hi web_designer,

 

Yes, the effects on these are amazing. Most of them are made in Flash, but I particularly like http://forums.xisto.com/no_longer_exists/, which is non-Flash, because of the JavaScript effect that happens upon page load. From the others, http://www.nisgia.com/ has got a great effect with their projects all mixed up, allowing you to rearrange them. I believe that has a big effect on their possible employers/clients.

 

Since I can see you like these Flash portfolios, here are a couple more that I find attractive, too:

NickAD (http://www.nickad.com/), try to click anywhere on the page and hold your left mouse button. A nifty trick happens, where the menu appears for a few seconds and then you can position your mouse to go to another page.

Narrow design (http://www.narrowdesign.com/) has this nice scrolling menu, that's got a neat effect to it upon clicking. Suggest looking at the John Travolta site there!

Got Milk? (or Gotmilk, not sure - http://www.gotmilk.com/errors/browser) Notice that the icons turn to text when you roll over them. Another cool and subtle effect.

Hope this helps a bit in your quest for an inspirational portfolio. If not, you know where to find me. I've got plenty of more where that came from.

 

(No, really - my bookmarks are full of various sites I found to have beautiful typography or some other elements in them. Don't be afraid to ask )

[web_designer 7]

Hi web_designer,

 

Yes, the effects on these are amazing. Most of them are made in Flash, but I particularly like http://forums.xisto.com/no_longer_exists/, which is non-Flash, because of the JavaScript effect that happens upon page load. From the others, http://www.nisgia.com/ has got a great effect with their projects all mixed up, allowing you to rearrange them. I believe that has a big effect on their possible employers/clients.

 

Since I can see you like these Flash portfolios, here are a couple more that I find attractive, too:

NickAD (http://www.nickad.com/), try to click anywhere on the page and hold your left mouse button. A nifty trick happens, where the menu appears for a few seconds and then you can position your mouse to go to another page.

Narrow design (http://www.narrowdesign.com/) has this nice scrolling menu, that's got a neat effect to it upon clicking. Suggest looking at the John Travolta site there!

Got Milk? (or Gotmilk, not sure - http://www.gotmilk.com/errors/browser) Notice that the icons turn to text when you roll over them. Another cool and subtle effect.

Hope this helps a bit in your quest for an inspirational portfolio. If not, you know where to find me. I've got plenty of more where that came from.

 

(No, really - my bookmarks are full of various sites I found to have beautiful typography or some other elements in them. Don't be afraid to ask )

 

thank you for your help little asterisk, but unfortunately the first two links are broken links, so please if you could fix them. the third one is interesting, i like it, but in my opinion it is not a site, but it is a cartoon movie . how they could do that?

it is a lot of work but make the site loosing its meaning. anyway, i liked the effect but i think it is not suitable for a site but more for a show contest.

 

now since you mentioned that you have a lot of good sites that you bookmarked them, so, could you please upload some that using ajax or Jquery??

i will appreciated.

[Little Asterisk 1]

thank you for your help little asterisk, but unfortunately the first two links are broken links, so please if you could fix them. the third one is interesting, i like it, but in my opinion it is not a site, but it is a cartoon movie . how they could do that?

it is a lot of work but make the site loosing its meaning. anyway, i liked the effect but i think it is not suitable for a site but more for a show contest.

 

now since you mentioned that you have a lot of good sites that you bookmarked them, so, could you please upload some that using ajax or Jquery??

i will appreciated.

 

I didn't notice that the links were broken... I copied them straight from the address bar... Anyhow, here they are (I hope they work this time ):

 

http://www.narrowdesign.com/

http://www.nickad.com/

 

Now looking at the before/after links, I think they are the same. Perhaps the fact this forum adds external links to its own domain (I think), maybe that's the problem. You could try copy/pasting these in your address bar if it doesn't work now.

 

So, one nice magazine (and it's actually a website of a magazine) is Scroll magazine. You can read about the process of designing the actual magazine on Veerle Pieter's former blog (http://veerle-v2.duoh.com/blog/comments/scroll_magazine_design/, http://veerle-v2.duoh.com/blog/comments/logo_design_process_of_scroll_magazine/).

 

Jax Vineyards' site, I think has what you're looking for. A lot of nice jQuery/JavaScript effects are going on there, and the site itself looks very elegant.

 

"Heart directed" is a listing of "Art-directed" sites, but it also has some nice jQuery effects you can use if you find them attractive.

 

I think "The Design Cubicle" (http://www.thedesigncubicle.com/) does also some neat effects with JavaScript with link color changes, and the overall layout is pretty good, too. Brian Hoff also made a nice effect with jQuery, Flash and HTML 5 on the site over Design Swap (http://design-swap.danielmall.com/, http://design-swap.com/2010/07/06/a-day-in-the-life/). The Search bar also appears quite nice upon clicking.

 

Yaron Schoen (http://yaronschoen.com/) also did a "Design swap" recently with Trent Walton (http://design-swap.com/2010/06/28/inaugural-swap/), and his site does some nice and sweet jQuery effects.

 

 

Okay, so that's it for now web_designer. Sorry if any of my writing was hard to understand, and I hope you make use off of some of these sites. There's much more to find in my bookmarks, but I'll post them later if you'd like to.

 

EDIT: I adore Georgia as a font, you might have noticed from this post

Edited July 23, 2010 by Little Asterisk (see edit history)

[Little Asterisk 1]

Hey, the forum currently won't allow me to edit my post (strange), so I wanted to warn you about a thing I noticed:

 

Every link which ends with a bracket (this: ) adds the bracket to its address. So if a link doesn't work, just look at the address bar and remove the bracket (again, this part: ).

 

And, so this post doesn't look like it's out of place, here's another cool link I have to share with you:

 

The Bold Italic ( https://thebolditalic.com/?gi=e45016b2b1ed - I hope it won't add anything after the link now) has some very interesting effects implemented; like, for instance, the huge picture which indicates the featured post of the week/month, and the links (look under the "Events" section), which can be added to the sidebar (called the "Clipbook"), so you can remember what events you wanted to visit in New York.

 

The site itself, as you might have figured out, writes about (I love ) New York and has some stories of the "bold locals", as they call them. Just look at some of the backstories, and how nicely they were styled ( I like the story of "Capuccino Perfetto" on https://thebolditalic.com/?gi=24c8e901378b ).

 

Okay, so I hope you find this useful, web_designer. No Georgia this time!

[rpgsearcherz 5]

Wow, those are some very detailed designs, but I don't see any of them as really being reusable -- I always like to use unique things rather than have the same designs as others. While I do agree that they are cool and everything, I just couldn't see myself using one of them.Though I would love to learn how to do graphical editing like that. I really do like them, lol.

[Little Asterisk 1]

Sure, the designs themselves shouldn't be copied pixel-per-pixel, but some of the ideas and/or elements from them can give you the needed "push" while designing.Anyhow, I wanted to do two things now. One of them is a question: Why won't the system let me edit my posts after a certain period? Is it because of the myCENT money system? That's my best guess, but it's always possible I'm wrong.The second is, that I remembered the name of the site from my second post. The "popular-fubis.jpg" should actually be called "popular-fubiz.jpg", since the site is http://www.fubiz.net/ .

[Little Asterisk 1]

Oh, come on - this is just silly!I've just remembered I wanted to add another link to the list I've just discovered, and now I can't edit even my last post... I hope I don't make anyone mad by this reply. :DSo, the site is Tea Round Application( http://www.tearoundapp.com/ ) for the iPhone, and it has a couple of nice effects to it - for instance, the slider and the great Lightbox plugin which, unlike all the others of type, really noticeably makes the transition between small to large images.Again, sorry for double (or was it triple?) posting, but this non-edit stuff really drives me nuts.

[rpgsearcherz 5]

Sure, the designs themselves shouldn't be copied pixel-per-pixel, but some of the ideas and/or elements from them can give you the needed "push" while designing.
Anyhow, I wanted to do two things now.

One of them is a question: Why won't the system let me edit my posts after a certain period? Is it because of the myCENT money system? That's my best guess, but it's always possible I'm wrong.

The second is, that I remembered the name of the site from my second post. The "popular-fubis.jpg" should actually be called "popular-fubiz.jpg", since the site is http://www.fubiz.net/ .

I never noticed the lack of being able to edit posts. It could possibly be that another post was created after, and so editing yours would make the next one look weird.

For example, someone could post "This is the problem with my computer -- I can't open Explorer" and someone else could post the steps to try. If you edited your post showing that it worked or edited it to show what steps you tried to no avail, the next post would make no sense anymore.

[Little Asterisk 1]

I never noticed the lack of being able to edit posts. It could possibly be that another post was created after, and so editing yours would make the next one look weird.
For example, someone could post "This is the problem with my computer -- I can't open Explorer" and someone else could post the steps to try. If you edited your post showing that it worked or edited it to show what steps you tried to no avail, the next post would make no sense anymore.

I think I've noticed that the edit button disappears as soon as I leave the forum. I'm not sure, though, but that seems to be the reason.

Oh, OpaQue... Where are you?

[Shahrukh 0]

I have studied a lot of web sites for their designs. The best place to get inspiration if FWA: https://thefwa.com/

Here are my conclusions:

 

1. Don't use Flash unless you really have to

Although Flash allows great design and functionality, not everyone can access your site that way. I remember that when I had my website in Flash, half my friends weren't able to open it. That was because they used a computer from school or work, both of which have many reasons to block Flash Player from the system.

Another reason is that you cannot update your content on the fly easily. Of course, you could add data fields and XML, but that isn't a very easy thing to do.

 

2. Don't make JavaScript based sites unless you really have to

Although JavaScript is very useful everywhere, huge scripts can be very slow to execute and make the browser unstable. Smaller scripts are fine, but whole site relying on JavaScript is not.

In addition, some people don't have JavaScript turned on, more so because of all the script blocking add-ons.

 

3. Make it content based

Although design is very important, unless you have good content on the site, the only thing your site will be visited for is its design. Which means one visit per person = not good.

 

4. Don't base design on your mood

If you make a design based on your current mood, you won't like it when your mood changes. So, you'll have to make another one. And the cycle will continue.

Instead, base the design on a general theme that will represent you throughout your life or a major part of it. (Applicable for personal sites only)

 

5. Do it for fun

If you design your site fun, you'll enjoy it more and put more effort into it.

[Little Asterisk 1]

I have studied a lot of web sites for their designs. The best place to get inspiration if FWA: https://thefwa.com/

Here are my conclusions:

 

1. Don't use Flash unless you really have to

Although Flash allows great design and functionality, not everyone can access your site that way. I remember that when I had my website in Flash, half my friends weren't able to open it. That was because they used a computer from school or work, both of which have many reasons to block Flash Player from the system.

Another reason is that you cannot update your content on the fly easily. Of course, you could add data fields and XML, but that isn't a very easy thing to do.

 

2. Don't make JavaScript based sites unless you really have to

Although JavaScript is very useful everywhere, huge scripts can be very slow to execute and make the browser unstable. Smaller scripts are fine, but whole site relying on JavaScript is not.

In addition, some people don't have JavaScript turned on, more so because of all the script blocking add-ons.

 

3. Make it content based

Although design is very important, unless you have good content on the site, the only thing your site will be visited for is its design. Which means one visit per person = not good.

 

4. Don't base design on your mood

If you make a design based on your current mood, you won't like it when your mood changes. So, you'll have to make another one. And the cycle will continue.

Instead, base the design on a general theme that will represent you throughout your life or a major part of it. (Applicable for personal sites only)

 

5. Do it for fun

If you design your site fun, you'll enjoy it more and put more effort into it.

 

Hey Shahrukh, you made some great points about design - but there are also some I don't agree with totally (I must mention, however, that all of them have at least one point I agree with). So, let's just see...

 

1. About Flash; although it shouldn't be used on blogs which need to be updated frequently by people who don't know Actionscript, it's just fine for a personal portfolio. You can even easily provide a fallback, as stated on http://www.warmforestflash.com/blog/2010/07/make-your-flash-site-iphone-friendly/ - just use SWFObject and its capabilities!

 

(P.S. I don't know how Flash CMS's work, so if anyone does, please make some light on it; could they (in theory) be used for blogging?)

 

- one point I want to add to the article I linked up there is, you should utilize @media CSS3 Queries ( http://www.w3.org/TR/css3-mediaqueries/ and https://www.google.hr/search?sourceid=chrome&ie=UTF-8&q=%40media+queries to find out more ) for mobile sites rather than special domains. It's a great way to resize the page in modern browsers, and doesn't require an additional domain.

 

2. Javascript in sites is perfectly fine but, as you said, it shouldn't be abused (remember that - NEVER abuse it!). Think twice; do you really need that window resize? If it's some subtle effects (like, for instance, animate color change on link hover), I say go for it.

 

3. Totally right. Just look at Jakob Nielsen's site (useit.com).

 

4. Also don't base design on trends. It's going to wear out pretty soon, and you're going to stay with a redesign in your hands.

 

5. Yaay for fun!

[Shahrukh 0]

1. About Flash; although it shouldn't be used on blogs which need to be updated frequently by people who don't know Actionscript, it's just fine for a personal portfolio. You can even easily provide a fallback, as stated on http://www.warmforestflash.com/blog/2010/07/make-your-flash-site-iphone-friendly/ - just use SWFObject and its capabilities!

 

Rightly said. Portfolio site can easily be based on Flash without problems.

 

As a side note, two other Flash problems are:

saving pages off-line, you have to save the whole .swf

SEO, although many solutions are available

(P.S. I don't know how Flash CMS's work, so if anyone does, please make some light on it; could they (in theory) be used for blogging?)

 

I remember seeing a blog made in Flash once. It looked great. But lacked search, tags and categories, etc.

I tried to make one like it too. But it got very hard so I gave it up.

 

2. Javascript in sites is perfectly fine but, as you said, it shouldn't be abused (remember that - NEVER abuse it!). Think twice; do you really need that window resize? If it's some subtle effects (like, for instance, animate color change on link hover), I say go for it.

 

Right again. And that is kind of how I meant it.

For example, try using TiddlyWiki: http://tiddlywiki.com/

Its a great piece of software. But it has made my browser unstable even while using offline.

 

The good thing about JavaScript is that it doesn't require a server-side software. It even runs perfectly well on mobile phones.

 

4. Also don't base design on trends. It's going to wear out pretty soon, and you're going to stay with a redesign in your hands.

 

Again, very true. Web sites should be based on standards. They never get old. Although, coming up with a creative design could be more work then.