You are viewing an archive of the old fxhome.com forums. The community has since moved to hitfilm.com.

I started my website.

Posted: Wed, 9th Jun 2010, 7:26pm

Post 1 of 35

RodyPolis

Force: 805 | Joined: 28th Apr 2007 | Posts: 1839

CompositeLab Lite User FXhome Movie Maker Windows User

Gold Member

Some of you might know that I've been wanting a website for my music video business I'm doing. Had some time this morning with Photoshop and I started designing the layout. This is what I got so far, what do you guys think?



Is that the best approach to making a quick, working website? I plan on designing all the pages in Photoshop and then make stuff clickable later on. When I would need to update, I'd just go back in Photoshop and edit the pages. Will that work for what I want?
Posted: Wed, 9th Jun 2010, 11:53pm

Post 2 of 35

ben3308

Force: 5210 | Joined: 24th May 2004 | Posts: 6433

VideoWrap User FXhome Movie Maker Windows User

Gold Member

I suggest keeping a solid color for the background, unless you're able to CSS a repeating 1px gradient in code.
Posted: Thu, 10th Jun 2010, 8:05am

Post 3 of 35

B3N

Force: 3081 | Joined: 26th Feb 2006 | Posts: 1534

VisionLab User VideoWrap User FXpreset Maker Windows User MacOS User

Gold Member

I'd also remove the "music videos and more" text. It really makes you come across like that's all you can really do, and in this day and age you need to really sell yourself and be able to create more than one style. So I'd suggest making a different tagline. Looks nice though, and I agree with Ben3308 on the background.
Posted: Thu, 10th Jun 2010, 11:37am

Post 4 of 35

RodyPolis

Force: 805 | Joined: 28th Apr 2007 | Posts: 1839

CompositeLab Lite User FXhome Movie Maker Windows User

Gold Member

The reason I put this particular tagline was because I wanted to do the website specifically for that, and not as a way to show my other filmmaking work. But I'll keep that in mind and might actually change it to make it more 'everything I've done'.

I knew about the gradient so that's why I kinda put a gray border around it (though you can't it here.)

So as I understand and can add buttons and create most of the website in photoshop? I'll look up some tutorials.
Posted: Thu, 10th Jun 2010, 6:57pm

Post 5 of 35

Serpent

Force: 5426 | Joined: 26th Dec 2003 | Posts: 6515

CompositeLab Pro User EffectsLab Pro User FXhome Movie Maker FXpreset Maker MacOS User

Gold Member

I always look to other sites for inspiration, sometimes taking ideas from 10 different websites for just one site. I highly recommend that. It's a great start, but right now it's looking like it could be pulled off in MS Paint. I'm not a big fan of the logo with the glow in the top left especially. Your site has a similar layout and scheme to the site er-no is associated with, which is designed very well, so I'd look to that for inspiration:

http://www.thehouseofjam.co.uk/

In general, I've found that the best Photoshop tutorials are at http://psd.tutsplus.com It's like the Videocopilot of the still graphics world. Central source for free very high quality and useful tutorials.
Posted: Thu, 10th Jun 2010, 7:21pm

Post 6 of 35

RodyPolis

Force: 805 | Joined: 28th Apr 2007 | Posts: 1839

CompositeLab Lite User FXhome Movie Maker Windows User

Gold Member

What is the issue with the logo? The site you pointed out does look like what I'm trying to do, I will borrow some stuff from that.

The design I made look a lot less MS Paintish in high quality. The way it kinda looks pixelated on here might make it look less polished. I'll try to render out a hq version.

EDIT: Mevermind it is still look the same. Does Photobucket compress the images?
Posted: Thu, 10th Jun 2010, 7:43pm

Post 7 of 35

Serpent

Force: 5426 | Joined: 26th Dec 2003 | Posts: 6515

CompositeLab Pro User EffectsLab Pro User FXhome Movie Maker FXpreset Maker MacOS User

Gold Member

I think it's mostly from the font, color scheme, and gradient style. The gleaming "I" would probably work better if the logo was slicker. I'll have to see it incompressed to get my full opinion. Try http://imageshack.us but I'm not sure if they are any better. Open the jpeg on your computer then open it in Photobucket/online and see if there's a difference. If so, they ran it through something.

Anyways, again, good start and you are definitely going in the right direction. Study designs and design trends as much as you can and it will reflect in your work.
Posted: Thu, 10th Jun 2010, 8:30pm

Post 8 of 35

ben3308

Force: 5210 | Joined: 24th May 2004 | Posts: 6433

VideoWrap User FXhome Movie Maker Windows User

Gold Member

I like the 'cool' direction you're headed in with your new logo, but think the cleaner, more succinct Dynamite logo my brother designed last year is more professional in terms of following appropriate design trends, et al.

If you want any help making your website, let me know and I can post my PSD online...
Posted: Thu, 10th Jun 2010, 8:55pm

Post 9 of 35

RodyPolis

Force: 805 | Joined: 28th Apr 2007 | Posts: 1839

CompositeLab Lite User FXhome Movie Maker Windows User

Gold Member

well sure Ben, if you can do something I'd be glad to see it. I was gonna use the one your brother made, but I was having some trouble with the Magic wand (i believe it has a new name now?) tool, so I just did something myself.

But ya if you have time for a layout that'd be appreciated.
Posted: Thu, 10th Jun 2010, 10:26pm

Post 10 of 35

ben3308

Force: 5210 | Joined: 24th May 2004 | Posts: 6433

VideoWrap User FXhome Movie Maker Windows User

Gold Member

Well if Magic Wanding was an issue, I'm sure we have a vector of that logo lying somewhere.
Posted: Fri, 11th Jun 2010, 12:31am

Post 11 of 35

Hybrid-Halo

Force: 9315 | Joined: 7th Feb 2003 | Posts: 3367

VisionLab User VideoWrap User PhotoKey 3 Pro User MuzzlePlug User PowerPlug User FXpreset Maker Windows User MacOS User

SuperUser

ben3308 wrote:

I suggest keeping a solid color for the background, unless you're able to CSS a repeating 1px gradient in code.
You can use a 1px wide background image repeated horizontally, with the background colour being the end of the gradient. I'm assuming that's what you meant.
Posted: Thu, 17th Jun 2010, 5:54pm

Post 12 of 35

RodyPolis

Force: 805 | Joined: 28th Apr 2007 | Posts: 1839

CompositeLab Lite User FXhome Movie Maker Windows User

Gold Member

very rough rough draft. My brother has been working on it. I told him to remove the 'expensive' camera picture with something else since my camera (550d) looks nothing like that. Here's how it looks right now:

http://daltonrenaldo.site40.net/

The box that says 'Slide' is supposed to have a slide show of different pictures/posters.

What are some things to change (though we are already planning for major updates, any suggestions is appreciated.?
Posted: Fri, 9th Jul 2010, 4:14am

Post 13 of 35

Spike 2006

Force: 26 | Joined: 30th May 2006 | Posts: 59

Windows User

Member

ben3308 wrote:

I suggest keeping a solid color for the background, unless you're able to CSS a repeating 1px gradient in code.
Just a point, not creating argument with ben3308, but what you can actually do (As Hybrid-Halo says) is create an image of your gradient, and just make it 1px wide, and however high you want your gradient - save it as a jpg, just so that the final quality is good.
The code you want to add is the following:
body {
background: url(your-1px-wide-image.jpg) repeat-x #xxxxxx (those x's mean insert the hexadecimal code for gradient's colour at it's lowest point);
}
Hopefully that makes sense!
Posted: Fri, 9th Jul 2010, 8:34pm

Post 14 of 35

rogolo

Force: 5436 | Joined: 29th May 2005 | Posts: 1513

VisionLab User VideoWrap User PhotoKey 4 User MacOS User

Gold Member

RodyPolis wrote:

http://daltonrenaldo.site40.net/
Hmm...doesn't seem to be working for me. I get taken to the directory, which is missing the proper 'index.html' file. When I try 'Default.aspx', I simply get all of the code. I'd recommend you try re-upping with a proper 'index.html'.

Oh, and definitely use the logo Atom designed. Sorry to say that this new one is...lacking. smile In fact, I always thought the Dynamite Studios logo and the Acetone logo were two of the best ones to come out of that thread.
Posted: Fri, 9th Jul 2010, 9:06pm

Post 15 of 35

Atom

Force: 4300 | Joined: 9th May 2004 | Posts: 7014

EffectsLab Lite User FXhome Movie Maker Windows User

Gold Member

Rating: +1

Just in case, here's that logo again.

Also, I think you're selling yourself short with the look of that website. Something like this makes much more sense to me. wink


Posted: Sat, 10th Jul 2010, 1:22am

Post 16 of 35

Spike 2006

Force: 26 | Joined: 30th May 2006 | Posts: 59

Windows User

Member

I reckon you should change the colour scheme to a better suiting pallette for your business - if you're making creative music videos, it's probably best to have a creative site to match your talents in music video production.
I think it's brilliant that Atom has put in time to create a mock-up idea for you, but I really think that the right way to go is to look for some inspiration somewhere like here: http://sixrevisions.com/design-showcase-inspiration/30-beautiful-music-websites-for-design-inspiration/.
I really recommend either:spending time creating an awesome site, getting a designer to do it, or if all else fails, use a template: http://www.freewebsitetemplates.com/
This isn't an attempt to flame you or others' work (as I know some can get tetchy on FXhome forums), but It's just some ideas to save you time and energy, and to get the best result possible (which is, I'm sure what you want!)
Cheers,
Joe
Posted: Sat, 10th Jul 2010, 3:16am

Post 17 of 35

RodyPolis

Force: 805 | Joined: 28th Apr 2007 | Posts: 1839

CompositeLab Lite User FXhome Movie Maker Windows User

Gold Member

Hey looks cool Atom! But here's what my brother has been working on:

http://www.dynamitestudios.cz.cc/

Domain name and font to be changed of course. But that's the road we were going with it. Designing is not done yet so any input is really appreciated!
Posted: Sat, 10th Jul 2010, 2:23pm

Post 18 of 35

DigiSm89

Force: 815 | Joined: 2nd Jun 2002 | Posts: 1898

Windows User

Member

Okay...

When I load the homepage, what exactly do you want me to see first?

You have too much content on that one page.

Take out a piece of paper and list items that you think the visitor should see. Circle (or star) the items that are most important.

For example:

*Latest Project
News
Gallery Preview

Now draw a wireframe, a quick sketch of your page layout on a piece of paper consisting of only lines and shapes. The starred items should be represented with larger shapes (well, not necessarily) than those of the nonstarred items. Make a couple of different wireframes until you tire yourself out. Then, pick out the best looking layout, open up photoshop, and start designing around it.

If you follow a process similar to the one I outlined, you can be sure that you're maintaining a simple design and not one riddled with unnecessary items, such as a section dedicated to guest messages ("Message Us").
Posted: Tue, 13th Jul 2010, 12:18am

Post 19 of 35

RodyPolis

Force: 805 | Joined: 28th Apr 2007 | Posts: 1839

CompositeLab Lite User FXhome Movie Maker Windows User

Gold Member

I see your point. Like I said, we're still designing so any input is helpful. When you say the 'Message Us' section isn't necessary, you mean not necessary needed on the homepage right? Because I would still think it'd be a nice thing to have on the contact page and such.
Posted: Tue, 13th Jul 2010, 1:37am

Post 20 of 35

rogolo

Force: 5436 | Joined: 29th May 2005 | Posts: 1513

VisionLab User VideoWrap User PhotoKey 4 User MacOS User

Gold Member

Hmm...site is pretty jumbled, as MasterPie (when did that happen!? smile) pointed out. Most everything is uneven, disorganized, and rough - at least for 2010 standards. From the disjointed logo at the top, to the oddly chosen fonts, to the confusing design, there's definitely a lot to improve on here. I'd recommend taking some cues from Atom's mockup.

Oh, and don't put ads on your site. It won't generate any meaningful revenue, and it severely cheapens the look of your website. Your website should advertise you and your services.
Posted: Tue, 13th Jul 2010, 2:55am

Post 21 of 35

DigiSm89

Force: 815 | Joined: 2nd Jun 2002 | Posts: 1898

Windows User

Member

RodyPolis wrote:

When you say the 'Message Us' section isn't necessary, you mean not necessary needed on the homepage right? and such.
I mean that you should seriously consider what's important in every section of your site. What do you want visitors to really see when they land on your homepage? What'll make them stay to check out the other sections? If you have so many different (and nonessential) sections on one page, the page becomes unfocused. An unfocused page is a huge turnoff (a kitten can die) and can result in fewer visitors.

Yes, maybe put that 'Message Us' on a contact page.
Posted: Tue, 13th Jul 2010, 12:55pm

Post 22 of 35

DigiSm89

Force: 815 | Joined: 2nd Jun 2002 | Posts: 1898

Windows User

Member

rogolo wrote:

...MasterPie (when did that happen!? smile)...
Hmm, quite a long time ago. I remember it being rather dark...I was a little out of it, neeeded some fresh air.
Then, there was a light, and THAT'S when it happened.

I wish I could have told you earlier...but, you know how things are. You can't rush 'em. Have to go with the flow.
Posted: Wed, 14th Jul 2010, 3:02am

Post 23 of 35

RodyPolis

Force: 805 | Joined: 28th Apr 2007 | Posts: 1839

CompositeLab Lite User FXhome Movie Maker Windows User

Gold Member

Ok, so we started everything from scratch! What do you guys think now?

Posted: Wed, 14th Jul 2010, 4:08am

Post 24 of 35

Serpent

Force: 5426 | Joined: 26th Dec 2003 | Posts: 6515

CompositeLab Pro User EffectsLab Pro User FXhome Movie Maker FXpreset Maker MacOS User

Gold Member

Much better, but weird font sizes, indentation, spacing, and font choice. Recent Projects separate box looks weird, it should be connected, smaller, and just better looking. Maybe indent Follow Us a bit as well.
Posted: Wed, 14th Jul 2010, 4:20am

Post 25 of 35

RodyPolis

Force: 805 | Joined: 28th Apr 2007 | Posts: 1839

CompositeLab Lite User FXhome Movie Maker Windows User

Gold Member

Serpent I sent you a facebook friend request
Posted: Wed, 14th Jul 2010, 4:31am

Post 26 of 35

Atom

Force: 4300 | Joined: 9th May 2004 | Posts: 7014

EffectsLab Lite User FXhome Movie Maker Windows User

Gold Member

I love it, but I still don't think there's any need at all to do a 'Recent Project' or 'Feature Project' sort of faux-ad/spotlight on your site.

Your work is your work, and you're likely only going to show a portion of it, right? Like one or two things? If it's not a mass library, then there's no need to 'feature' any of them. People will look at your stuff in an overview on your examples/work/movies page. No need to oversell them- and it just looks like 'I-tried-to-add-content-y'.

Other than that, it's looking really great!
Posted: Wed, 14th Jul 2010, 1:22pm

Post 27 of 35

DigiSm89

Force: 815 | Joined: 2nd Jun 2002 | Posts: 1898

Windows User

Member

Much better. More focused and simpler. Now you have something to build on.

Consider moving the recent project to the left (if you decide to keep it) since we read from left to right (that is if you want to give it some emphasis).

Get rid of the lorem ipsum text...use actual content when playing around with layout. Because you haven't actually tried reading the filler text (no one reads filler text), you don't know that the font you chose is a bad reading font.

EDIT: I should have mentioned that you should use sample content for the most exciting and significant page of your site. Definitely use filler text if you want to for any other page that uses the same template.

Last edited Wed, 14th Jul 2010, 9:12pm; edited 1 times in total.

Posted: Wed, 14th Jul 2010, 3:19pm

Post 28 of 35

Atom

Force: 4300 | Joined: 9th May 2004 | Posts: 7014

EffectsLab Lite User FXhome Movie Maker Windows User

Gold Member

Pfft. There's no reason to get rid of lorem ipsum (or expressly not use it, for that matter) while you're still in the designing stages. You can read through dummy text and decide on a font for a paragraph just as easily and effectively as the actual paragraph. If you don't have the content yet or don't have it fully conceived, but you want to streamline your design- of course you're gonna want some 'filler' content/text.

That's why lorem ipsum exists. There's no reason he can't or shouldn't use it- it's a great tool for configuring layouts and designs that will later have content.
Posted: Wed, 14th Jul 2010, 5:13pm

Post 29 of 35

DigiSm89

Force: 815 | Joined: 2nd Jun 2002 | Posts: 1898

Windows User

Member

How can you design a site without having an idea of what the content will be?

It's too easy to design a description box with a few lines of lorem ipsum and set it fixed size because it looks great, and then realize later that, oops, descriptions are generally more involved and require more space.

I'm not asking that he come up with all of his content now or even just a draft of the content. I'm saying he just needs "something" meaningful that will get him thinking more deeply of what he needs to include in the design. Coming up with some sample text will get him thinking of whether he needs extra sections or heading styles, whether he should style bullets, whether he should enhance the box with a column layout, etc.

Lorem ipsum fillers are, well, fillers. They don't inspire you at all in the design process. It usually becomes the case that web site designers leave those in there during design and replace them with actual content later. This process seems backwards - website design is content/message centered. When designing a poster, you have the content first and you design around that content. Similarly, you don't design a book before actually writing it. You certainly couldn't design that Dynamite logo without having seen the word "Dynamite"

That said, lorem ipsum fillers (and its siblings) can be helpful in the final stage of a design for a client - strip out all the text and correctly replace it with filler/placeholder text. It is perfectly acceptable to leave a finished design and nonimplemented design with lorem ipsum in the end (if you're selling a design to a general audience, you don't want text pertaining to tree huggers).

Furthermore, experienced designers CAN get away with placing lorem ipsum text because they've done this process over and over again to the point that they have a feeling of what the content might require.

But, no offense to the OP, the guy is not that experienced.
Posted: Wed, 14th Jul 2010, 5:26pm

Post 30 of 35

Atom

Force: 4300 | Joined: 9th May 2004 | Posts: 7014

EffectsLab Lite User FXhome Movie Maker Windows User

Gold Member

MasterPie wrote:

How can you design a site without having an idea of what the content will be?
Are you serious? If you're designing a site, of course you have at least a general idea of what the content will be. Take Rody's page for instance: He likely knows he's going to write something about what he does and his pricing. But if he tailors his design and thinks it'll fit- why not use dummy text? Why trouble yourself for no reason not to, more than that?

It's too easy to design a description box with a few lines of lorem ipsum and set it fixed size because it looks great, and then realize later that, oops, descriptions are generally more involved and require more space.
Then it seems to me you're arguing ease-of-design over planning. Well, lemme tell you- design doesn't have to be hard or planned in that manner. I'd bet you most people figure out what and how in-depth their content is because of the way they've started designing their pages.

And sometimes some of the best designs come from figuring out spacing without the content first. I know I most often take a long paragraph I might've written for a page- and because I've allotted less room in my design than is needed for my paragraph, I will (for the better) cut it down and figure out a different (and more often-than-not better) hiearchy of information and way to put everything I want to say into different bits of the site.

That's the way great design is born, to me. Maybe not you- but I find that quite useful. There's no reason to section yourself off from using something for some vague sense of discplining yourself while designing. That's just silly.
Posted: Wed, 14th Jul 2010, 9:10pm

Post 31 of 35

DigiSm89

Force: 815 | Joined: 2nd Jun 2002 | Posts: 1898

Windows User

Member

Atom wrote:

Are you serious?
Yes. I wrote a sizable post about it.

Atom wrote:


Then it seems to me you're arguing ease-of-design over planning.
No. Pitfalls of creating a layout before having an idea of what the content will be and how to best present that content.

Atom wrote:

I'd bet you most people figure out what and how in-depth their content is because of the way they've started designing their pages.
I'm pretty sure that comes from looking at the content itself on a page. If already your design has really nothing to do with the content (not content centered), then surely changes that need to be made to the content come about independent of any design decision.

If your design does restrict you to a certain size - as you mention in your later example - then your thoughts about the content and how to best represent that content had to have influenced your decision to allot just that amount of space in your design. If you did not actually place sample text and design around it (or put in careful thought), your decision came from experience of designing those types of pages over and over - you know that ultimately, a max six sentence movie summary is ideal so as not to detract focus from any other elements on the page. And thus, accordingly, your subsequent designs will restrict a movie summary to just six sentences.

I recommend for the inexperienced to place some sample content first to develop an understanding of how the content will be read/viewed and what can be done fundamentally to enhance the experience. Do you section off the content? Maybe you want one part to be a page grabber, and thus in your design, you box it off and set it outside the margins. Maybe you realize it's awkward putting a bio on the first page, and decide not to put any text at all.


I will backtrack and say that, Rody, you should choose the page that's most important to you and will feature most of your content, and thoroughly design that with some sample content. Use that page to brainstorm all sorts of neat ideas. Then, for the other pages that use the same template, feel free to use filler text/lorem ipsum since you've already gone through the exercise of figuring out your design.
Posted: Fri, 16th Jul 2010, 2:20pm

Post 32 of 35

RodyPolis

Force: 805 | Joined: 28th Apr 2007 | Posts: 1839

CompositeLab Lite User FXhome Movie Maker Windows User

Gold Member



Even simpler and straight to the point. I think I might go with something like that.
Posted: Fri, 16th Jul 2010, 2:40pm

Post 33 of 35

DigiSm89

Force: 815 | Joined: 2nd Jun 2002 | Posts: 1898

Windows User

Member

Nice, I like it.

Consider what you want to emphasize between About Us and Services. Maybe the Services describe you, and thus, you only need a quick tagline that summarizes what you would have said in "About Us".

Also, I find it a little weird that "Social Networks" is a section. Be a little subtler with that?
Posted: Fri, 16th Jul 2010, 3:02pm

Post 34 of 35

RodyPolis

Force: 805 | Joined: 28th Apr 2007 | Posts: 1839

CompositeLab Lite User FXhome Movie Maker Windows User

Gold Member

Yes a more subtle "Follow Us" would be better you mean?
Posted: Fri, 16th Jul 2010, 3:27pm

Post 35 of 35

DigiSm89

Force: 815 | Joined: 2nd Jun 2002 | Posts: 1898

Windows User

Member

Yeah, that might work. I was thinking reducing the size, too. But it looks like you need to fill that space, so rather keep that size.

Also, I noticed something cool...not sure if it was intentional or not.

Your logo slants to the right and is offset horizontally, as if it were actually flying in from the left. It's pretty neat. If you want to emphasize that effect, I suggest moving the Home, Portfolio, Contacts menu to be in line with the right margin.