![]() |
Web Design/Development
I've always wanted to throw the topic of web design out there and get to know some other hardcore web designers. I'm pretty sure this is a good place for the topic.
How many of you are active web designers? For me, its one of my favorite passtimes next to drawing. I'd love to see some other people's concept sites and share ideas. Some sites I've worked on: http://www.designdraft.net/ <-- personal blog http://www.ani-6.com/ <-- old old idea for a site http://www.ani-6.com/blueos <-- my CDS site http://www.ani-6.com/lagdemo <-- my club's site (Working) http://www.ani-6.com/concept <-- a revision of ani-6.com I'm working on |
Curious about the movable window in your "Studio lag" website. I'm wondering how you managed to keep the cursor locked onto the same place on the window while dragging. I mean very rapid dragging back and forth, not normal movements. I programmed something similar from scratch many years ago but didn't get around to fixing the problem where if you dragged the window off the visible part of the screen, the cursor would get confused.
This is my VERY old website >_<: http://www.nightfall-design.com This the the window experiment thing that never got past a rough prototype, also old (IE only): http://www.nightfall-design.com/Expe...I-Skin7-nw.htm |
hi ultima
i personally like what you have done with designdraft, but the "more or less" is still blurry i also like webdesign, haven't done much lately, but you can check out this blog: http://podezing.free.fr/kaolla/ < each section has a different design http://www.ps3camp.info/ < another blog i want to redesign soon http://forum.ps3camp.info/ < a invision board i spent quite some time redesignin all this stuff in in french of course |
It's been a while since I last designed anything so these are kinda old.
InGo'S RaNcH My Zelda fan-site. Don't get me wrong, it's not like I really love the series (although I do like them) and it's all I can think of. The topic is the least I care about. This website is like my little frankenstein. It's the place where I experiment with new stuff like Ajax and some nice scripts, that's why it will take a while to load. I have currently 3 different designs which change dynamically thanks to a javascript code that switches the CSS stylesheets. On the left menu there's a section entitled "IR a la carte". Click on those 3 buttons and the design will change. Anime Omega A friend's website which he asked me to design. It's been more than a year since I designed this, but I still like it. I got a job a while ago where I had to design websites, so I designed quite a few... http://www.qbureau.com <-- that's the place I worked at http://www.qbureau.com/proyectos/esi...dule=planteles http://ingosranch.gameshunters.com/t...ac/almacen.php <-- This was a CMS Admin page. Most ideas came from the Jaws project. http://ingosranch.gameshunters.com/temp/tcm/ <-- A very, very fast design that was like an emergency thing. That's why it's so damn simple. http://ingosranch.gameshunters.com/t...alize/test.php <-- And this one was supposed to be my portfolio... or something. That's all I can think of right now... Some good stuff above, by the way. I liked the design at http://www.ps3camp.info . The menu is awesome. Oh, and Ultima, could you share the font you used at this logo? |
Quote:
Quote:
Quote:
I love everyone's sites by the way. The four of us that have posted here have pretty much different styles in approaches, and thats pretty refreshing. Although I think metalorgy and I have pretty similar tastes with the whole Web 2.0 thing going on. |
My only paid projects so far are for this start-up company (as part of my internship):
http://www.decisionware-sg.com/competition/rules.htm One of the banner designs for the index page http://www.decisionwaresim.com/img/banners/banner1.jpg Prototype design for this year, which was never finished (created the logo too): http://www.decisionware-sg.com/competition/2006/ An obnoxious design which I threw together in a few hours: http://ams.bigblah.net/ |
Heh.
I've made a couple of layouts from scratch but they are all lost to time. And beleive me, I don't miss them. Nowadays, I usually just take a layout and then modify it's images / css / maybe a little basic positions enough so that it looks different. I'll link two things: http://crankeye.org/forums/ SMF. Though this is now unused. http://rmrk.net/ Made to match the main site (http://crankeye.com). I submitted this theme to the SMF site, though the version you see running here has been tweaked quite a bit over the weeks. |
Ah, SMF themes, cool stuff.
I actually find it harder to tweak a layout, especially if I want to really change it up, I find a fresh start from scratch is the cleanest and fastest solution. I have Ultima to thank for my complete switch to 100% CSS layouts in my designs. CSS is easy, making sure it works in all major browsers, that's the bitch lol. www.renaissanceconsulting.ca That would be my company's website that I recently finished up. There's still small ongoing changes, and a few bits of content yet to add, but it's basically complete. I'm working on another, bit bigger project, which will be online once I'm done with the massive overhaul it's undergoing. Currently it resides on my laptop. Once it's stable and secure, I'll post a link to it online. I've really only been into web design stuff for the past couple years or so. I never figured I'd be one to get into this line of work, but I got a chance to work on a php ecommerce site, when I didn't even know any php at all, and it just kind of went from there. I really hadn't put a lot of time or effort into learning the design aspect of things until the past 4 to 6 months. I've finally kicked the tables habit, and can develop clean efficient layouts pretty damn fast. |
http://www.zucchiniblossom.com
This was a site I did for my cousin's kickass and popular Mediterranean-style restaurant. Ashamed of myself for creating such an abomination, I learned CSS in three months to redesign their site. http://www.sky-render.com/test/zb2 This is their redesigned page. The project hasn't gone anywhere because my dumbass cousin refuses to give me any data to put on their site. :/ Most people would be glad to have a web designer do pro work for FREE! :mad: http://www.sky-render.com/test/fc2 A slight modification to the incomplete website for my hosting company. Lack of motivation has put our company on ice for a while until I'm done school at least. It could use a couple small tweaks and some actual content :/ Quote:
|
Quote:
How does one pick up aesthetics in 3 months, I wonder. |
I've built several pages in the past few years, the stuff I made in the beginning is pretty awful, so I won't mention those. The stuff I made since I started learning PHP/MySQL is still pretty recent, so I'll list a few. I still have copies of those sites lying around, I should set up an archive or something :'D
www.bigwhoop.nl - That's my own site thingy, mostly used as a blog or whatever. I'm not dedicated enough to update this stuff unless I've made a big improvement to the scripting. It's just nice to have something to fondle around with and test new scripts I cooked up. sotp.bigwhoop.nl - the current website of a WoW guild I was asked to built for a friend of mine. Since I have the space to spare, I host it as well. It was a pain getting this to work in combination with vBulletin, but it all worked out okay. The layout's a bit confusing, apparently. So I'm currently working on a new one. http://84.26.94.197/phoenix-new/ - The new website of the WoW guild mentioned above. This gave me an opportunity to expand the CMS script further and experiment with some new features. I'm kind of proud of the Guides section, but I should thanks Ax for helping me out to set this up. Since they wanted it to be more WoW-ish than the current site, I There are a few more, but I don't think they're running any more. After this page I have a few more assignments ready. |
Quote:
|
Accedo Dominatus
My old WoW guild site. Was an experiment, of sorts, and didn't turn out too bad. Bay City Central My former high school (designed the site years ago), and was really my only true paying job. There are some other older ones that have come and gone. I have another in development but nothing that I wish to really post at the moment. I've been focusing on the system behind the site rather than the design, so far. |
I'm only three and a half months away from graduating with my Web Design diploma. The more I think about it though, the more I just don't want to do this as my main long-term career. It's something I'd rather do as a side freelance job.
Right now, I'm trying to figure out how to work fluidly with Macromedia Director in order to make a portfolio of my web sites. I'm having a hard time though, since I'm practically new to the program. |
Quote:
Leaning more towards Illustration or Graphic Design though. |
The frist one isn't 800x600 friendly and the second one is optimized only for 1024. Kinda sucks ain't it. Yes I use tables, I wish I had more knowledge in CSS but I know I've tried so hard.
I just don't find the box model that good. Everytime I see text out of their boxes, even in important sites like A List Apart and so on. |
Quote:
|
Quote:
What exactly are you learning in your web design classes? I've always been curious since a girl from my class dropped out of Networking to enroll for a web class. If it's HTML and CSS, then no thanks. I wouldn't mind some PHP and Photoshop classes since I'm average at best. PHP, I don't even know. SQL and Javascript I'm learning in my Programming classes this semester and next. I like doing the HTML, CSS, design and Photoshop portions the best. I would like to start a web design business sometime, but I need a back-end coding partner to make my sites dynamic. I can't do it. :P |
Render, html and css are just as much a part of webdesign as php is. php outputs html files, so you still need to know how to make it work even if it's going to be powered by php.
Or....are you saying that you wouldn't want those classes because you already have skills in that area. It's great to reread things lol. PHP is best learned on one's own, starting projects from scratch. I've always found it's the only way to truly learn it, because it has so many functions and variations on how to do things, that if you only use the methods they teach in a school, you won't be as skilled as if you learned all the ins and outs, and when it's best to use the different techniques. Maybe I'm just biased because I got nothing out of any programming classes I have ever been in. On another note, I've also been contemplating starting a web design business sometime, however I tend to prefer working on the guts of a site, not the design part. As much as I can do alright in that department, I just prefer to be playing with the database and internal code stuffs. We should talk. :) |
Quote:
also, if you ever get a web-design business up and running and need some help, count me in. I'm pretty good at CSS, XHTML and the graphics, and can be of some help at javascript and PHP. |
Quote:
Quote:
I'm pretty serious on starting my own company. That FissionCore site design is for the "company" I co-run/own whatever for web hosting. I've just been bogged down with life shit (college and work) to get around to building on what we have. I had planned on including web design as a side thing to get money, because I'm the site designer and the other 2 are programmers. Our company runs itself because we break even on our server costs and we don't get new clients. Nothing ever happens lol. I'm itching to make some money through web design. My email is MSN is needforspeed_89@hotmail.com if you wanna chat sometime :) |
Deific Arts
I write stories, draw characters for them, then present them on my site. Except for The Real Bible site, that's just me being a jackass. My older sites used a lot of php/html/css/dhtml, but I've been loving the fuck out of Flash and Actionscript so I keep redoing things. Anybody here ever hear of lynda.com? They got a shit load of online video tutorials. I find the video tutorials more helpful than my classes most of the time because I can focus on concepts that I actually want to learn and not what's being force down my throat. (like all the ridiculous queries msSQL can do) |
Quote:
I'm currently learning Macromedia Director MX 2004 and CGI. We'll be getting into ASP, Cold Fusion and access soon. I don't know SQL. I do know JavaScript and I'm trying to learn PHP on my own. I don't know why not a lot of people seem to like JavaScript. I happen to find it very useful. I guess it might be due to CSS having many alternatives. |
Quote:
|
Chances are almost everyone here will pwn me at web design, but my only excuses are I'm a student and I'm learning the graphics side more rather then things like coding entire databases,(not to mention spending over half the time writing how I build things as evidence rather then actually building them... :annoyed:) I appreciate handcoding sites is important, but coding every last bit by hand these days is just madness imo.
clickage If the intro pisses you off there's a skip button in the bottom right corner. The design's getting another rehash for obvious reasons hence the lack of updates, but it would be nice to know how clueless I am compared to the GFFers I guess ^^; *waits for various people to say Flash = fail* |
Quote:
First of all, intros are way stupid. (most of the time) You enter a website to SEARCH INFORMATION, not to see a damn 20 second movie made with flash. Then, perhaps I'm way too much into this web2.0 and semantic content, but flash movies really shouldn't be used to build entire websites. Actually, flash shouldn't be used at websites at all. The only reason I find for using flash to create your site is to make it more "dynamic", but then again, it depends on your definition of dynamic. If by dynamic you mean stupid sounds (that distort the music I'm listening to), shinny effects when switching pages and lots of stuff moving from time to time all around (that most of the times are quite disturbing), then go ahead. If you are not doing all what stated before, then you don't need to use flash at all, it can be done with (X)HTML. Heck, even some stuff that you would think only possible with flash can be done with (X)HTML/Javascript/CSS. Flash sites also can rank low at googlerank and stuff like that, because the spider can't read the movie, it only reads HTML tags and content; they usually take longer to load than normal HTML pages; they are NOT accessible; you can't select text at flash sites, nor you can link directly to a specific section of a website, etc. etc. I just found Flash way lame at creating websites. Use it for presentations or funny movies/games like the ones found at Newgrounds; not for your website. Again, it's only my opinion. Flash is just not for websites. Oh, and please, if you'regoing to add a "skip" button, do so in the HTML. Making people load something they do not want to see only to skip it is just plain mean.:( |
Was that flash video HUGE or was it a crappy connection? It took about two minutes to load :/ And even after the fact, once it was loaded, all of the site's content wasn't preloaded. Flash isn't for websites, anymore. Any no, Metal, you're not taking Web 2.0 too seriously. The logic behind it was created for a good reason: accessibility, truer dynamic content, and just less annoying web browsing. I'm not gonna lie here: A Flash video for a website is really annoying.
My suggestion: Stick with HTML, CSS, and JS. |
I understand your train of thought, unless you get a lot of meta tags in there google isn't going to know what the hell it is, not to mention most the flash websites can be like learning a whole new interface just looking through them.
I'm planning in the long run to keep a flash based portfolio for kind of 'bling' purposes drawing buissness types in, but also have something else in html probably more for entertaining more mainstream visitors, I also have a html CvS2 tribute website but I haven't tried hosting it since it uses pretty much the entire OST on a flash jukebox. Is there any particular web broswer you guys recommend for testing design problems? I'm finding websites that work fine on PCs are pains in the ass on macs and vice versa even if I use the same broswer in both. Lastly I have a more technical question with websites like newgrounds which have update logs on the frontpage, do they just update the html or is it referring to some kind of log entry database? edit: Render I'm hoping it was a crappy connection because the main swf was just over a meg ^^; |
For debugging purposes, I ensure that the page renders correctly in firefox, and IE 6, at the absolute very least. Anything else, like safari, etc etc, I'll test when I get the opportunity, and fix as best I can, but there's only so much you can do to have compatibility everywhere.
I dunno about saying flash has no place on websites. Yeah I hate entirely flash driven websites, but for the occasional effect here and there, it works great. I have to say I think the flash intro that we put together for our site www.renaissanceconsulting.ca was done quite well, not much to it, loads damn fast, and yes I have a link to skip the intro inside the html. Maybe I just happened to actually use flash as it was intended, dunno. LOL There's also the issue of dialup friendly issues. If your site takes too long to load, that still is a large audience you're either inconveniencing, or cutting out completely. A 1MB flash might not seem like a lot to you, but that can take 10 minutes or more on dialup, so keep that in mind. Also something like newgrounds would have a database backend, so anything is possible at that point. |
Quote:
As for more advanced html like that update log or data arranging are those features covered by xhtml :confused: |
I think Flash is great for Flash-driven sites that feature Flash games or Flash multimedia in general. Now, I'm not saying it should be over the top, but depending on where you utilize Flash, it can benefit.
A site with simple Flash effects works nicely and we're not talking about those annoying button rollovers that go DOOT DOOT DOOT every time you roll over them (MegaUpload for example has those). Flash does have its place on websites (if you're showcasing videos, Flash files tend to be smaller and easier to view online, because of the preloader), but they are not a requirement to bring out really nice looking websites. I made a very simple Flash project for my class. It's supposed to be a comic book shop, but I just made the layout and usability function. It does look pretty good in my eyes (without the bias ^_^). I'm personally an XHTML, CSS and JavaScript user. It's what I like using best. I love using Dreamweaver to do all of that in. If there's one thing I can't stand, it's Framesets. I've used IFrames before, which are probably the only "frames" I'll ever use if at all. But, those complete framesets just seem to get in the way. I want easy and smooth browsing on sites, not cluttered junk or cluttered looks with cluttered junk. It was fun at first when I was experimenting with HTML, but not so much anymore. That's just me though. Anyway, screenshots of all my "practice" websites are here. |
Well, I have to say, yeah I could've made that in powerpoint, but you can't really put a powerpoint on the web that easily. <_<
Also yeah, I think frames are utterly useless, I have yet to find a home for them. More likely to break the site then anything else. |
K, I got a problem, and I am just curious if anyone could help me.
I am redoing a website (www.rrdfl.ca) and I have a problem between IE and Firefox. If you look to the right, there is a dark blue banner, in IE, the space between the banner and the images underneath is bigger than the one in Firefox. Firefox is displaying the code correctly, IE is not... Any idea? |
Have you tried trimming down both the "schedule" blue bar and the dark blue bar so that they match on both browsers? I would feel that it would be a trial and error thing where you have to tweak the heights of the images, not the height attribute.
Maybe another alternative would be to resize the original dark blue image (if you have it saved) so that it's a bit lengthier than the one that you're using on the site and then to cut an inch of the bottom and putting that in the background, so that it shows up underneath where the image cuts off in IE and just make sure they look properly connected? That way when you're looking at it from Firefox, you can't see the background image, because the main dark blue image is covering it due to its correct rendering of the code, while in IE, you can see the background image and it gives off the illusion that there's nothing wrong with the dark blue image. I don't know. Something like that I guess. I'm sure someone else has a far easier way of doing it though. |
Flash works on websites, but only in extremely rare cases where the person has a very clear idea of what they want and how to accomplish it. Mainly, only professional websites and portfolios really have decent web designs using Flash. And I'm not talking intros, the whole site has to be made with it. I'll post examples later.
|
Erisu, the CSS works in firefox, what you're suggesting is way more work than is required to make that work. The CSS hacks that are on the web for this type of issue are far cleaner and easier to implement, and are a lot more kosher I would think. I know some of the issues I came across like that involved vertical align issues, or just a matter of floating elements, and actually I had issues where formatting the code nicely didn't work, I had to butt the elements together in the html for IE to get it to be seen right
aka: <span>this</span><span>that</span> instead of <span>this</span> <span>that</span> Believe me I was pissed off when that fixed things for me, but grateful that it did fix things. So basically, no image editing should be needed, it's all in the css. By the way, if you ever need IE to see a css code bit that you don't want firefox to see, put an underscore in front of it. background-color: #000000; _background-color: #FFFFFF; If you put that bit of code into the body element, it would render as black in firefox, and white in IE. Kinda freaky how that works, but it's saved my ass a few times. |
Well, I played around with width and height and it just made things worse....
|
Quote:
|
IE is a pain in general though. That's why I hate it. If this were inside of a table, it would've been trial and error. Since it's straight CSS, I don't know. See if you can find some CSS hacks like Qube said. I've only created a blog with pure CSS and graphic-wise, I've put the top header image together instead of slicing it into two or more pieces.
|
That intro Qube posted could've been done entirely using DHTML; when people don't exploit Flash to it's maximum potential it's no wonder it has a bad reputation.
I've been considering learning Flash, unless someone can tell me how I could convert my website (posted earlier) from using tables and javascript to pure CSS. The frames are just a hack I used recently to save me having to learn the Firefox DOM (I was in a hurry >_<). I get pissed off when Dreamweaver tells me all my image rollovers and such are no longer allowed, or that I MUST have alt-text on EVERY image ;_;. |
Alt text on images is required for standards compliance ;)
|
Just go alt="" for images that are supposed to be in the header or footer sections. Dreamweaver won't bother you then. I have a question for people here though. Do a lot of you use JavaScript for rollovers or CSS? I find CSS much easier and better.
|
Are you talking about the background offset trick? I did it in this page, and it was a huge pain in the ass. Note that the <span> wrapping is a deprecated workaround. I've had it with browser-specific css hacking though, so it's Javascript from now on.
|
Are you saying <span> is deprecated or just "out of style"? I find the <span> tag quite useful, despite what others say. I mean if it works, the design looks cool and it validates, right on. I used to use JavaScript for inline image rollovers, but I don't know. It's preference and whichever you find easier I guess. I just find that doing it through CSS avoids the hassle of using preloaders at the top.
|
I use CSS for the hover effects on my buttons. Take metal.ize for example. The hover effects on the top blue menu and on the category buttons is all CSS. No span needed, just a simple list (which helps for accessibility and complies with the semantic code rule).
I tend to stay away from Javascript as much as I can. Using javascript for the design itself is a no. It's a nice plus, though; with all this AJAX scripts and effects, but that's it: a plus. I may be crazy, but a website that NEEDS javascript to WORK is just wrong. Websites should be able to work with just HTML. No need of Javascript, Flash... not even CSS. That's what I aim for when creating a website (of course, when I make a website for another person, even if I hate what they ask for, I have to do it... give the customer what they want [no, customer's are not always right ¬¬]). |
Quote:
And Javascript is fine if you follow good coding principles. Always specify the href for an alternative page, for instance, if the browser does not follow an onlick event. |
The problem with CSS-only websites is that (as far as I have seen these last few years) they all follow the same page format. Columns. Just a bunch of bloody columns; it seems really boring to me. Can anyone point me to a site built with CSS and no javascript that has an unusual layout? Can CSS do everything that javascript can? That's a genuine question, since I haven't done anything web-related for a long time and would love to know if I can show/hide/reposition layers or do linked rollovers with CSS, and what mouse events are supported by it.
|
|
I kind of do think that pure CSS-based sites are limited in everything else besides visual. CSS is after all for style and design of the layout. I think the whole purpose of using pure CSS is to get away from table layouts. Why? I have no clue. I think with tables it's way easier to structure things in proportion. With CSS, it just feels like one big pain in the ass, because you have to pretend to think that there are tables, but really you're using divs and margins. In the end, I would say that it's obviously geared towards the graphic designers. CSS has its place like all the other web elements, but they're only effective if used for the right things.
|
Lets split this...
Quote:
Quote:
Quote:
Quote:
|
Quote:
I've already explained twice that the workaround method was deprecated, not the element. Apparently the term "deprecated" sets off warning bells in everyone. |
I know you can do regular rollovers in CSS; that wasn't what I asked. I meant hovering over one image (note, an IMAGE, not a little coloured region with an ugly little bit of arial in it) and causing several other images to change at once. I'll just look around a bit more and see if I can find something in CSS that isn't bland.
EDIT: OK, this looks pretty decent, although still good old reliable columns: http://deepblue.indika.net.id/ |
CSS is only as bland as the designer.
(tee hee) Man, I haven't read Malay/Indonesian for a while. |
|
Quote:
And if you are trying to pretend that DIVs are tables when coding a CSS layout, you're doing it wrong. You don't need to pretend DIVs are tables, but blocks of elements. As you said, all the web elements have it's place; you just need to use them for the right things. And the whole reason for using CSS as much as you can instead of tables/javascript or anything else you can think of is mere accessibility. It loads faster, it's semantic and withouth CSS, chances are that it will still work. |
Quote:
Quote:
Quote:
|
Quote:
|
removed dead link
|
All times are GMT -5. The time now is 09:07 AM. |
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2025, vBulletin Solutions, Inc.