Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Personal website concept

mr.suff

mr.suff

macrumors regular
Original poster
Jun 18, 2006
181
1
Leeds
So I finally decided that it was about time for me to create a website.
I need more people to be able to quickly see my work, I am a graphic designer.

The concept
WebsiteworkingsPt2.jpg

Click for a bigger version

The general idea is that, if possible, each section would freely scroll leaving the other sections as they are. I know nothing about the limitations of web based stuff as I mainly design for print.

Please any form of criticism is welcome, I may not like the bad stuff but it's all relevant and will help in the long run.

Cheers
 
A couple of things...

It's kinda hard to read - the text and the background need some more contrast between them. And speaking of the text, it's very very small. And there's a lot of it. Are you really planning on using that much text? Shorter is always better.

Next...I think the emphasis needs to be on your portfolio and your work. Right now, the focal point is the content-less green stripes going down the side. Don't waste a focal point like that. Put some contact info or links there. Or, make the green stripes less prominent.

In terms of usability, if you're positioning this site to drive freelance work your way or to hunt for a job, don't bury the contact info behind a link.

I'm in the same boat. I'm a print designer trying to learn some CSS and javascript. And I hate it. I'm also in the process of redesigning my current website.
 
A few things...

I have not dabbled in web coding for a while, but I know that years ago, I would have floated transparent frames where you want your different content boxes to go, but I seriously suck at web stuff.

Your concept is surely do-able though, and I like the idea. I also agree about the green stripes. They look good, but TOO good, especially est near hard to read type.

I would also recommend against putting a photo of yourself on your site, especially on your home page. It only lends to a negative stereotype against designers, that we are all....Yeah... You get it. If you must put an image of yourself up, work it into a neat design, or do something awesome to it that further demonstrates your abilities, not just what you look like.

I also think you are going to have a hard time finding a color for your copy that will be easy to read on that shade of grey. Either make it darker or lighter maybe?

Good luck with the site! Its looking good
 
mr.suff said:
.....I need more people to be able to quickly see my work, I am a graphic designer....
Click to expand...

As was mentioned above...way TOO MUCH text...especially for a graphic designer.

Unfortunately, the green stripe stuff on the left side looks a lot like something from a template
 
Some great feedback. Thanks to all.

I've taken on board all the comments, I think.

So here is a revised version.

Site.jpg


Macky-Mac - As for the stripes looking template, they didn't, until you put the idea in my head. :D

But like most things I create, it looks awesome until the morning after and then I hate it.
 
I like

It looks much better!

One thing that I noticed immediately though is how big the column with your name/info is. There is a whole lot of empty space under it...

Other than that, It looks great
 
i like the revised design. one thing i'm not sure about is how all of that would fit on the screen. the one thing you'd have to deal with is a 1024x768 resolution which is probably one of the most used today. to have four columns like that across the screen, you might have some problems scaling it to a ~1000pixel width (leaving some space for scrollbars, browser padding, etc), and have it be legible. i'm still learning web design though, so i'm not sure if what i said it relevant or not. to have it scroll you might need to use iframes or some kind of a css/java slider. i've seen tons of wordpress themes that have slide-show features in them, so i'm sure it would be possible to implement that for a regular site where each column could be scrolled vertically without disturbing the rest.

one suggestion i'd like to make is for you to implement some kind of a contact form on the site. it could be located somewhere at the top as a drop down window or a popup where someone can enter information into, because copy/pasting email addresses takes more time, and it could also be picked up by spam bots. a properly coded contact form (php and maybe even with captcha) can help solve that issue.
 
Your type is still ridiculously small. The size you're used to in print doesn't translate to web very well. In print your type is rendered at 1200 dpi, where as on screen you're looking at ~100dpi. There just isn't enough resolution to cleanly render type that small. I'm young and have decent eyes and I'm struggling to read it on my fairly low-res ACD. On my MBP there's no way I'd be able to read it.

You might also be designing in a box that's a bit too big. Right now you're at 1200 x 849. That's going to be pretty tight on a macbook even if the browser is fullscreen. Four columns might be pushing it width wise.

If I were you I'd begin by getting all your content in order. Don't use filler text... the content of that type should help drive your design. Figure out how long typical project descriptions are, what kind of titling system you want, whether you want image captions etc. You mention that the individual sections are going to scroll. Where are the scroll bars? How is that going to be handled. I'd also focus on how you're going to handle links that take you off the homepage. What do internal pages look like, and how are they organized?
 
I agree - it's a huge improvement. The only thing that's really standing out is the negative space under your name and contact info. Perhaps that information would be treated better as a horizontal header?

Also, I do agree that the text needs to be bigger. And in my ever so humble opinion, there needs to be 90% less of it on your portfolio.

Big improvement so far. Very nice work.
 
Ok so, here once more is a revised version. I hope you guys don't mind too much that I'm bouncing my designs off of you.

So I've lost one column, and tweaked the Portfolio section.

Panoz7 there are no other pages, the content that is clicked on will load in that column. That's what I would like to achieve anyway.

I think that my main issue at the moment is that the type sizes I'm choosing, as pointed out, are somewhat small. I personally don't like large type.
But the main point of a website is to be universally understood and easily viewed.

Added a contact box, funnily enough I had added this last night but considered it a bit unnecessary. Having said that I don't want people to hit spam filters etc.

Arrows are now present so as to guide the user, would it also be possible to have the user be able to scroll freely? I guess that depends on the site coding.

Ideas.jpg


As for overall sizing I guess I'm in the minority of people with a display 1920x1200 so I have no issue with any website, aside from up/down scrolling. Now at 950 pixels wide.

Thanks as always
Matt
 
Columns

Something looks off with the columns in your newest rendition. It feels very fragmented, if you know what I mean?

Panoz is right, too. The type is still very small and fairly hard to read.

Definitive is also right, I completely forgot about looking at this from a web POV. Its probably too wide. I actually try to keep the content of everything I design within 800 px, sometimes up to 1000 pixels, only if I'm feeling gutsy.
Then again, I dont really know web stuff that well, so don't mark my word
 
MattSepeta said:
Something looks off with the columns in your newest rendition. It feels very fragmented, if you know what I mean?

Panoz is right, too. The type is still very small and fairly hard to read.

Definitive is also right, I completely forgot about looking at this from a web POV. Its probably too wide. I actually try to keep the content of everything I design within 800 px, sometimes up to 1000 pixels, only if I'm feeling gutsy.
Then again, I dont really know web stuff that well, so don't mark my word
Click to expand...

When creating my new portfolio website I created it 800x600. It looks good on my macbook and on my 20 inch cinema display.
 
In my experience 960px is pretty standard for a website design that will be fixed width.

I would suggest using a web-safe font for the body text (such as arial, helvetica, verdana, maybe some form of lucida) to see how your paragraph content will look. I would also increase the line-height to aid in readability.

Definitely making steps in the right direction.
 
mr.suff said:
.....Macky-Mac - As for the stripes looking template, they didn't, until you put the idea in my head. :D
...
Click to expand...

sorry bout that!

Content related question; Who is your site aimed at? At first I assumed it was business oriented and you're trying to get work through it. If that's the case, then what's the purpose of having a blog? You don't want to be blogging about personal stuff on a business site and it always looks bad when there's a blog that hasn't been updated for months and months after starting with just a few posts long ago. Is having a blog really a good idea for your site?
 
bntz313 said:
When creating my new portfolio website I created it 800x600. It looks good on my macbook and on my 20 inch cinema display.
Click to expand...

800x600 is an old standard. Most monitors have resolutions much greater than that nowadays. 800x600 actually looks bad unless you build in the ability to scale the content.

Macky-Mac said:
sorry bout that!

Content related question; Who is your site aimed at? At first I assumed it was business oriented and you're trying to get work through it. If that's the case, then what's the purpose of having a blog? You don't want to be blogging about personal stuff on a business site and it always looks bad when there's a blog that hasn't been updated for months and months after starting with just a few posts long ago. Is having a blog really a good idea for your site?
Click to expand...

I agree with this, unless you are trying to brand your ideas. As a designer you need to define your target audience first and then design for them. I think it's much better to showcase your work separately in a simple portfolio site (that can be easily updated) and then link out to a blog if you want people to know your opinions. I would think that having a portfolio is a lot like having a visual resume. The more to the point you are the better - with the option for the viewer to get more information if interested.
 
Is this website used for getting a job or freelance? If so I agree with others you should take out your blog.

How are you going to code it? Flash(highly not recommended) or css/ JavaScript to get the scrolling effect you wanted?
 
mr.suff said:
Ok so, here once more is a revised version. I hope you guys don't mind too much that I'm bouncing my designs off of you.

So I've lost one column, and tweaked the Portfolio section.

Panoz7 there are no other pages, the content that is clicked on will load in that column. That's what I would like to achieve anyway.

I think that my main issue at the moment is that the type sizes I'm choosing, as pointed out, are somewhat small. I personally don't like large type.
But the main point of a website is to be universally understood and easily viewed.

Added a contact box, funnily enough I had added this last night but considered it a bit unnecessary. Having said that I don't want people to hit spam filters etc.

Arrows are now present so as to guide the user, would it also be possible to have the user be able to scroll freely? I guess that depends on the site coding.

Ideas.jpg


As for overall sizing I guess I'm in the minority of people with a display 1920x1200 so I have no issue with any website, aside from up/down scrolling. Now at 950 pixels wide.

Thanks as always
Matt
Click to expand...

I general when I design a website I design it for a 15" or 17" laptop as most people use laptops. The size you design should not for a computer screen those size regardless of what you have. 950 pixels is good.

If your english or where you live, commissioned could or could not be misspelled.

If your a recent college or university student, then put in a few projects, but most professionals want to see how you think and execute your ideas, Actual real projects would be better then class work. I know this is hard especially if your just starting out in the profession.

Last design was the best so far mate. it is the hardest to design your own web site. I am working on my 5th or 6th site for me...always trying to make it better.
 
You shouldnt design website body text with fonts like that unless its flash. Stick to default fonts like Arial or whatever so you know what its actually going to look like. Youll have to make the whole site nothing but images if you want to use a unique font, which will look really amateurish.
 
nothing specific to your overall design, but here are some very useful suggestions in general !

tip #1 - grid
download the 960 grid system templates, http://960.gs/
it will be a lot easier to design when you have a grid to follow. 960 is for 960pixels... a very safe size for when designing to accomodate the average users computer monitor resolution.

check out the examples of sites they have further down the page, and you can overlay the grid to see how things are structured. it makes designing alot quicker with a proper grid because you have limits to work within.


tip #2 - fonts
dont bother using fancy fonts for body copy - its an eye sore, and unless the user has the same font, it wont show up. however, use custom fonts for things like nav's, titles, and headings.

here's a good read on how to use custom fonts
http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/

you can also use css3 for custom fonts, where you can actually specific a server location for the ttf file, but only the latest browsers support css3 - firefox 3, safari 4, ie 8, chrome... so older browsers wont see anything
(scroll down to tip 5)
http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/

read up on font stacks so you can have a priority of what fonts get displayed incase the user doesnt have it. http://www.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/


tip #3 - inspiration
see what other people are doing! check out sites like http://bestwebgallery.com/ and read blogs like http://www.smashingmagazine.com for latest tips and tricks.
 
heehee said:
Is this website used for getting a job or freelance? If so I agree with others you should take out your blog.

How are you going to code it? Flash(highly not recommended) or css/ JavaScript to get the scrolling effect you wanted?
Click to expand...

It will be the basis for me to be able to show off my work quickly and easily, with the prospect of getting more freelance work, so the blog is gone.

Ideas-1.jpg


As for coding I guess I will be doing it the CSS way, but I will have to learn all the coding etc.

Macky-Mac it's ok matey. It was one of those "Oh! yeah…Sh*t!" moments but it's fine.

bowzer Wow, thanks so much for all the links, very helpful.
In the New Year I will plow my way through all of these properly and gleen as much as I can get from them. Thanks again.

I've also taken on board about the text, once more, and have substituted it with Helvetica at the moment. Am I right in thinking that if I want it to be seen as is it needs to be the equivalent of a picture. I think this is definitely an area of computing/design that I don't know enough of.

I am not 100% sure about the two colours behind each column now.
Maybe just a flat colour. I'm gonna sleep on that.

Cheers
 
Windows doesnt come with Helvetica, you can use it for titles as images but not for body text. Besides, Helvetica looks jacked up when its small on monitors being rendered by the OS, Arial is a much better screen font for body text. Large Helvetica titles and small Arial text matches fine.
 
consider removing your home address from the site. wouldn't want some spam bot signing you up for stuff, or some unexpected visitor at your door.
 
mr.suff said:
I've also taken on board about the text, once more, and have substituted it with Helvetica at the moment. Am I right in thinking that if I want it to be seen as is it needs to be the equivalent of a picture.
Click to expand...

since its a portfolio site, the titles of things probably won't be changing a lot, i assume? then yes, saving the titles text as an image is fine. you whatever font for that you'd like.

its more when you have a blog site or updating news frequently that would require new titles is a pain to just have text as images. thats why i posted the link to other font replacement methods. some of which are a bit advanced though.

for now, stick with images for your titles, and arial as your body text, since its pretty close to helvetica.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back