Honesty Rocks! truth rules.

Beautiful Styling In Web Design

HOME      >>       Websites and Web Designing

Little Asterisk

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

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 :D)

 

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.

post-101495-017200300 1279007274_thumb.jpg

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.

post-101495-038547800 1279007316_thumb.png

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.

post-101495-058616600 1279007362_thumb.png

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).

post-101495-089379700 1279007845_thumb.png

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:

post-101495-054336700 1279007990_thumb.jpg


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

web_designer

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/

 

Posted Image

 

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

 

Posted Image

 

 

- http://www.nisgia.com/

 

Posted Image

 

 

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

 

Posted Image

 

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

 

Posted Image

 

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

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! :D

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

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! :D

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 :D . 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

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 :D . 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 :D



Little Asterisk

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 :D) 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! :D


rpgsearcherz

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

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

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

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

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? :D:lol:

Shahrukh

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

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! :D


Shahrukh

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.


Little Asterisk

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


 

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.

 

 

 

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.

 

 

 

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.

 


As for creativity while not abusing current trends (that's right, Web 2.0, I am in deed looking in your direction!), Elliot Jay Stocks makes valid points in one of his presentations ( http://www.elliotjaystocks.com/speaking/ ) about finding your inspiration in the offline world - like Jason Santa Maria ( jasonsantamaria.com ) did with his blog taking inspiration from the print design world and styling articles individually.

 

That way, you don't get stuck in a loop of same-design-all-the-time and get to make interesting designs. For instance, Brian Hoff got his inspiration for The Design Cubicle's site ( thedesigncubicle.com ) from his neighbour's fence! - More about that on http://abduzeedo.com/brian-hoff-talks-about-redesign-tdc

 

As for Flash, it's not perfect in any way - but it's designer-friendly more than any other language (again, one of the valid points Elliot Jay Stocks makes in his presentations). That's what makes it very popular with designers and other creatives. Well, that and the fact you can make really cool effects with it (like shift the screen totally upside-down).

 

I'll try TiddlyWiki for sure. At least to see how much Javascript can my HP take at once. :D


Shahrukh

As for Flash, it's not perfect in any way - but it's designer-friendly more than any other language (again, one of the valid points Elliot Jay Stocks makes in his presentations). That's what makes it very popular with designers and other creatives. Well, that and the fact you can make really cool effects with it (like shift the screen totally upside-down).


That is true. I used to play with it a lot.
But I don't think a website should be made on Flash only. I even think the splash page of KS should not be a Flash page.

Another side note, you can't go 'back' and 'forward' in a Flash-based site.

I'll try TiddlyWiki for sure. At least to see how much Javascript can my HP take at once. :D


You do that. This is the biggest TiddlyWiki I have found: http://www.tiddlytools.com/

Little Asterisk

That is true. I used to play with it a lot.But I don't think a website should be made on Flash only. I even think the splash page of KS should not be a Flash page.


This is interesting in deed... http://forums.xisto.com/topic/71810-the-flash-Xisto-site-and-a-couple-of-other-advices/ :D

I STILL play with Flash a lot, but it's mostly fun and games - I've left Flash out a bit in favour of Javascript (X)HTML, PHP and CSS (and similar languages). I've never made a website in Flash to this date, but if a client were to ask me to I would have no problem with it.

Shahrukh

This is interesting in deed... http://forums.xisto.com/topic/71810-the-flash-Xisto-site-and-a-couple-of-other-advices/ :D
I STILL play with Flash a lot, but it's mostly fun and games - I've left Flash out a bit in favour of Javascript (X)HTML, PHP and CSS (and similar languages). I've never made a website in Flash to this date, but if a client were to ask me to I would have no problem with it.


Hey, you noticed that too! :D

I have totally abandoned Flash. It isn't fascinating anymore. Especially since the invention of AS3. It made the designer and programmer areas separate, which is good for serious production but not for playing around.
I think Fireworks and Flash were better with Macromedia.
Dreamweaver has certainly improved since moving over to Adobe.

Little Asterisk

Just a quick post today; goes into the web design area. ( Sorry Shahrukh, no more dialogs between us currently :D Maybe a bit later, huh? :D )Happy Cog ( happycog.com ) is one of the best web design companies out there currently, run by one of the legends and biggest authorities in web design, Jeffrey Zeldman ( zeldman.com ). They've got a nice and unconventional design layout (notice there's no ACTUAL menu, but only a nice little intro) and regularly publish case studies of sites they (re)designed which are a great insight for starting (and even the ones not starting) web designers and developers into how it all works. :)My favourites are the Wordpress case study ( only because it is Wordpress we're dealing with :D - http://forums.xisto.com/no_longer_exists/) and Zappos ( http://forums.xisto.com/no_longer_exists/ ) - because not only is Zappos famous, but also because it's more extensive than the average. However, I suggest you browse through all of them - it is really a great reading, not too long, but just exactly as it's needed to be.


Now, since I've already talked about Veerle's blog (veerle.duoh.com) I think it's just OK to talk about Duoh's actual website and blog ( http://www.duoh.com/ and http://www.duoh.com/news/ ). It's a great piece of artwork, I think it goes very well with Veerle's stuff and it also gives powerful insights into development and design of some of their client's works.Again, as with Happy Cog - be sure to check it out! :D


Pages :-

Page 1Page 2