Archinect
anchor

Undergraduate Website

Voltaire

How does this site layout look, from a purely visual standpoint? I'm using fireworks to export my templates into dreamweaver, then I do basic alignment/hyperlinkinging in it and publish the site as a bunch of png files.

www.gandhihabash.com

Can I make this work in any other way?

 
Dec 25, 10 11:56 am
St. George's Fields

Congrats, you made a postcard.

Dec 25, 10 1:03 pm  · 
 · 
rza

From a purely visual standpoint it looks minimal, light, but since you offer no page of image and text combined, i'm not sure how the two will be integrated. Nor do i know how you will organize projects. Or anything about content and alignment yada yada

All I want to tell you is that what I see as a bunch of .png's can be easily recreated using the most basic HTML. Ditch Dreamweaver CS5 and create something that is unexpected and as authentic as the fine artwork you are showing on the home page.

Dec 26, 10 12:02 am  · 
 · 
Voltaire

What programs do you suggest? I have no substantial architectural work so I have yet to construct any concise templates for future projoects (studio 1 starts this semester).

Dec 26, 10 11:55 am  · 
 · 
rza

No programs. Coding is by hand!

<html>
<head>
<title>VOLTAIRES DREAM WEBSITE</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.style1 {
font-size: 14px;
font-variant: normal;
font-family: Georgia, "Times New Roman", Times, serif;
}
body {
background-image: url(images/bg.gif);
}
</style>
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

put stuff here

</body>


</html>

Dec 26, 10 2:38 pm  · 
 · 
St. George's Fields
Coding is by hand!

LOL. What a blowhard.

Dec 26, 10 3:38 pm  · 
 · 
rza

Maybe I'm too old school.

Dec 27, 10 9:43 am  · 
 · 
alex08366

the links don't work man

Dec 27, 10 10:24 am  · 
 · 
Voltaire

Running a site purely on code isn't practical... and alex, only the profile link works, the others are just drone.

Dec 27, 10 11:29 am  · 
 · 

"Running a site purely on code isn't practical." I'm guessing you mean hand coding your entire site isn't practical? I disagree, but I'm not sure if that's what you mean.

And architectum, do you enjoy typing a lot? With all those style attributes, a stylesheet link, and an CSS in the head you're going to have a fun when it comes time to update. ;)

Anyway you asked from a purely visual standpoint, so here you go: it's not minimalist, just plain. Basic, boring, etc. That's fine. Fix up your type (if you're saving it all as images anyway you might as well have it render nicely– throw it into PS and play with the anti-alias), kern it if you know how, then call it a day.

Dec 27, 10 12:39 pm  · 
 · 
rza

Designing with your brain is enjoyable. That way I am conscious of everything that is going to happen. I have friends that swear by CSS design with fades and grid organization, but I always embraced the precise in a different manner. When I started designing websites around 2003 people were all over stitching .png files together and making them links and having a website that was purely designed in photoshop. The next step was to use code or dreamweaver to paste it into a .html page. There are visual benefits to this, especially if you want to photo-collage things with brushes and whatnot--but earlier this year I did the same technique by placing transparent .png's over each other with offset tags (left: top: pixel counts). I think my entire page had 5 lines of body coding.

Coding by hand! allows you to understand other designs as well. You can even take little things and use them in your own site. I have seen many portfolio websites for architects, artists, designers of all kinds and what really makes a great website is organization/presentation (how am I navigating projects/individual pictures) and simplicity (is the user choosing what content they see). Photoshop a nice banner or thin name plate or corner logo, but after that all you're asking for are a few links to other links which show images in some defined space. Simplest way to do this may be an iframe or small pop up window (both of these are a bit dated). Or spend your PS energy on making all your photos the same size so that you can create the same page over and over again with your well-organized photos.

If content management is your thing then some of the easiest, cheapest solutions I have seen work well are blogger, tumblr, indexhibit and wordpress. Each one has its own watermark so-to-speak, but with enough coding (by hand!) that can be erased and a unique site can be created.

Dec 27, 10 1:24 pm  · 
 · 
Voltaire

Thanks for the breakdowns... what I've been doing with the .pngs is really time consuming and doesn't allow for simple updating. I'm having a hard time figuring out how to add text over image in Dreamweaver, which is ultimately what I want to do- have a .png background with text overlaid, really simple task otherwise made difficult with my technique.

Dec 28, 10 7:14 pm  · 
 · 
St. George's Fields

Also, the post card comment was not negative or intending to be.

I think it's a very successful design overall. And the working is definitely not ordinary (I don't know if it is "art" but it is pretty and pleasing.)

However, if you're going to go "small size for accessibility" reasons, I'd try to make your site in a vertical format with similar dimensions.

The reasoning for this is more and more people are using mobile devices (phones, tablets et cetera) for viewing the web. And vertical for the most part seems to work 'better.' For devices that do the whole automatic rotating, it's a non-point.

However, if you're not that interested in mobile compatibility. I'd make it much, much bigger.

Jan 1, 11 5:01 am  · 
 · 
trace™

He's got Flash in there, which won't work for iphones or ipads (good ol'd Jobs telling Adobe to f themselves there), so mobile compatibility is irrelevant.


My comments on the design:

Hand coding - it doesn't matter how you do, just what it is in the end. I've seen and done both, from html to full Flash - doesn't matter, it is the end results/experience/functionality that matters.

Pet Peeves: Changing Heights on static sites - I can't stand sites that change vertically, unless it is filled with changing content (like Archinect, Yahoo, etc). Keep the bottom line constant, don't have it move around.

Preloader - since you are using Flash, you should have a preloader. It is running pretty slow here, blank page for 10 seconds doesn't look professional.

Slideshow - just personal preference, but I am not a fan of those that you need to move your mouse lft/right to get the thumbs to move. Depending on how many times you have, there is plenty of room to show them all. Just a thought, though.

Design - I think it is ok, nothing pushing any boundaries but ok. You might want to think about going bigger, sometime, as this is a pretty tiny site and you seem to have some very interesting work (all about content, right?).

Jan 1, 11 9:56 am  · 
 · 
Voltaire

Thanks again for the input, and I've been trying to address the scrolling issue as Trace pointed out, happens to be a pet peeve of mine as well.

Unfortunately I'm really new to flash and am still learning coding basics, preloaders aren't working for the gallery because it is written entirely in code, so all online tutorial methods aren't working out.

Uxbridge, I don't plan on showing anyone the site on a small screen, it defeats the whole point of having an online portfolio, so it is a non-issue.

I hope to have the entire portfolio page navigatable in flash by the time I have substantial work, it will flow much better, by which time I will enlarge all windows and have a wider page for the work to show itself better.

Jan 1, 11 6:12 pm  · 
 · 

Block this user


Are you sure you want to block this user and hide all related comments throughout the site?

Archinect


This is your first comment on Archinect. Your comment will be visible once approved.

  • ×Search in: