22 replies to this topic

[Little Asterisk]

I was thinking of starting a new interesting topic here on KnowledgeSutra. 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 )

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

• From Squared eye (http://squaredeye.com/), 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.
   numbering-background.jpg   194.92K   2 downloads
  
• Bada-bing (http://www.badabingdesign.nl/), 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.
   slider_vertical.png   630.28K   2 downloads
  
• 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.
   techi-com.png   16.82K   1 downloads
  
• 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).
   slider.png   21.98K   1 downloads
  
• 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:
   popular-fubis.jpg   38.25K   2 downloads

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://www.enila.fr/



- http://okaydave.com/




- http://www.nisgia.com/




- http://www.jessewillmon.com/



- http://www.jameslaicreative.com/



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://www.jameslaicreative.com/, 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/#/gotmilkbrand/) 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]

Little Asterisk, on 13 July 2010 - 01:05 PM, said:

Hi web_designer,

Yes, the effects on these are amazing. Most of them are made in Flash, but I particularly like http://www.jameslaicreative.com/, 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/#/gotmilkbrand/) 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]

web_designer, on 22 July 2010 - 07:55 PM, said:

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.duo...agazine_design/, http://veerle-v2.duo...croll_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.c...ay-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.c...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 by Little Asterisk, 23 July 2010 - 12:49 PM.

[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 ( http://thebolditalic.com/ - 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 http://thebolditalic...e-sipping-point ).

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

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

So, 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.