Best way to design a web site?

[patseguin Global Moderator]

This may be a very general topic, but I have no experience with web design. I have Adobe CC 2015 with Dreamweaver so I can use that. I have messed with it and I am really not very good with it yet. Is there better software for beginners? I want to design a very simple web site for my business that just has basic information pages and a price sheet.

I am very versed in Illustrator. Is it feasible for me to create web page designs in Illustrator and then just extract the elements and place them in the web design software to recreate it?

[Seahorsepip Veteran]

I just wouldn't host with windows azure they hiked pricing up drastically in the past 2 months... my site that only got 1000 hits in one month racked up 50 dollars in charges!!! and it was sitting low at 10/mo till they mucked with the database tiers 2 months ago!

Damn I feel happy hearing that at $2/m xD

[Seahorsepip Veteran]

Here is what I have so far designed totally with Muse. The copy was all just put in kind of fast because I wanted something on each page. What do you guys think?

http://coveredwagonembroidery.com/index.html

 

The design makes me feel nostalgic

And It doesn't look and work bad but the fact that the text is actually an image is bad for a lot of reasons: high res screens see a low res image of text which results in blurry text, seo obviously, page size(mobile devices have a network data limit) and since the content is an image it's hard to update the text with some sort of cms.

[patseguin Global Moderator]

The design makes me feel nostalgic

And It doesn't look and work bad but the fact that the text is actually an image is bad for a lot of reasons: high res screens see a low res image of text which results in blurry text, seo obviously, page size(mobile devices have a network data limit) and since the content is an image it's hard to update the text with some sort of cms.

What do you mean? I created all the text with the text box tool in Muse.

and what do you mean nostalgic? Dies it look dated or something?

[Seahorsepip Veteran]

What do you mean? I created all the text with the text box tool in Muse.

and what do you mean nostalgic? Dies it look dated or something?

The text tool in muse generated images with text in them  Which means your website is made out of multiple images instead of text.

And yes it looks a bit dated

Gimme 1min and I'll rewrite your current website in proper code so you can take a look at that  Which font did you use?

[patseguin Global Moderator]

Hmm, why would it render the text as an image? The font is Unisans.

[Seahorsepip Veteran]

Hmm, why would it render the text as an image? The font is Unisans.

That's probably how the program you use works

Anyway here's the frontpage in proper code: https://dl.dropboxusercontent.com/u/4281191/cw.zip

I used OpenSans Instead of Unisans since Unisans was a licensed font for which I don't have a license ^^

[Jose_49]

Strange nobody has suggested Google's Web Designer:

https://www.google.com/webdesigner/

I know it can be daunting at first (Web), but if it's something easy and fast to use, no better tool than the one above... Plus it's free!

[Seahorsepip Veteran]

Strange nobody has suggested Google's Web Designer:

https://www.google.com/webdesigner/

I know it can be daunting at first (Web), but if it's something easy and fast to use, no better tool than the one above... Plus it's free!

As far as I remember it was meant to be used to create ads and such right?

[MikeChipshop Member]

What do you mean? I created all the text with the text box tool in Muse.

and what do you mean nostalgic? Dies it look dated or something?

That's the problem with ~WYSIWYG builders, they take the easy route rather than the correct one. Not a lot you can do about that.
Your most important thing there is that your brand name, main navigation and contact details are all images which is baaaaaaaad.

As for design, yeah it's very dated. Try cutting out the drop shadows and glows. That should help it look a tad more modern.

As far as I remember it was meant to be used to create ads and such right?

Yeah originally. I've seen a few sites it spits out and it's chilling

[remixedcat]

Damn I feel happy hearing that at $2/m xD

how many hits you get though? and how many databases?

[MikeChipshop Member]

I just wouldn't host with windows azure they hiked pricing up drastically in the past 2 months... my site that only got 1000 hits in one month racked up 50 dollars in charges!!! and it was sitting low at 10/mo till they mucked with the database tiers 2 months ago!

$50 for 1000 hits! Unless your site is distributing massive ISO's or films, that's just ridiculous.
We only use Amazon/Azure fr large scale sites where scalability is a major factor, otherwise it's a VPS on a reputable hosting company.

[MikeChipshop Member]

That's probably how the program you use works

Anyway here's the frontpage in proper code: https://dl.dropboxusercontent.com/u/4281191/cw.zip

I used OpenSans Instead of Unisans since Unisans was a licensed font for which I don't have a license ^^

That's how it's done! Look at Sea's code along side the Muse code, and you'll see a brilliant example of what i'm talking about. 

[remixedcat]

 

$50 for 1000 hits! Unless your site is distributing massive ISO's or films, that's just ridiculous.
We only use Amazon/Azure fr large scale sites where scalability is a major factor, otherwise it's a VPS on a reputable hosting company.

Not really anything large... just a wordpress based site and a static html based site... no downloads and the wordpress based one only has a gallery with 1MB images, nothing really huge or 4K.

 

I am going to dispute it if I freakin find out how to thier system is so clunky and hard to find anything... and people are allready raging on forums bc of that recent change. This is BS and I have to move to another host..

[patseguin Global Moderator]

I updated the site with a web safe font. I guess I learned that if you create a text object with a font that is not web safe, it makes it an image?

I also took out the glows and drop shadows. I do still have the glow on the menu words for active status. Do you guys recommend something else other than glow to make it look more modern?

[MikeChipshop Member]

I updated the site with a web safe font. I guess I learned that if you create a text object with a font that is not web safe, it makes it an image?

I also took out the glows and drop shadows. I do still have the glow on the menu words for active status. Do you guys recommend something else other than glow to make it look more modern?

Personal opinion...

• Remove the gradients from the purple bars
• Pick a better font pair for use on the headers and body text (have a look at http://fontpair.co/), currently you're using Arial which falls back to Helvetica on Macs, neither are particularly good at readability on screen.
• Make your text a darker grey rather than solid black (#000) as it makes font blending less apparent and easier on the eye. Don;t go crazy though, you'll still need some contrast.
• Have a look at your colours. I'm not going to go in to all aspects of colour theory right now, but some of the choices are very clashing (light blue hovers on purple, for instance).

Those adjustments should go some way to perking it up a bit.

[remixedcat]

Google font embedding FTW though... works very solidly... I would use those if you were to use a different font.

[patseguin Global Moderator]

 

Personal opinion...

• Remove the gradients from the purple bars
• Pick a better font pair for use on the headers and body text (have a look at http://fontpair.co/), currently you're using Arial which falls back to Helvetica on Macs, neither are particularly good at readability on screen.
• Make your text a darker grey rather than solid black (#000) as it makes font blending less apparent and easier on the eye. Don;t go crazy though, you'll still need some contrast.
• Have a look at your colours. I'm not going to go in to all aspects of colour theory right now, but some of the choices are very clashing (light blue hovers on purple, for instance).

Those adjustments should go some way to perking it up a bit.

I will certainly try all of that, thanks I really appreciate it. I think I am starting to learn what is more modern but boy am I a noob at web design.

I guess flat is what looks modern? People seem to be consistently saying that the bevels, gradients, glows, etc. don't look good. Do you have a recommendation for the states of the menu text? I have them white and just made the highlight color blue just because it seemed visible, And the glow seemed like the best option to show the active menu.

[MikeChipshop Member]

Google font embedding FTW though... works very solidly... I would use those if you were to use a different font.

It is quick and easy, but personally i never trust a third party with the performance and stability of a client (or personal) site.

An example of this is FontKit. It went down for three days at the beginning of the month and caused havoc with sites using it. Some of my colleagues were getting 30 calls a day from ###### off clients, even more ###### off when they were told there was nothing that could be done. Having a decent font stack in place goes some way to alleviating the issue, but it is still an issue none the less.

 

@font-face ftw. 

[MikeChipshop Member]

I will certainly try all of that, thanks I really appreciate it. I think I am starting to learn what is more modern but boy am I a noob at web design.

I guess flat is what looks modern? People seem to be consistently saying that the bevels, gradients, glows, etc. don't look good. Do you have a recommendation for the states of the menu text? I have them white and just made the highlight color blue just because it seemed visible, And the glow seemed like the best option to show the active menu.

No problem mate, every one starts somewhere, most importantly is you want the help and you're listening. I've worked in the industry since 2001 (when gradients, glows, drop shadows and bevels were par the course!), run my own business since 2006 and run a web design forum so i actually enjoy helping

The flat thing is very 'in' right now, but it's actually more the web finding it's own style, just so happens "flat" is trendy at the same time. I'd say less 'flat' is the way forward and more 'subtlety' is the way forward.

In regards to the navigation items, i'd have the items, that are the current pages, stay as the same as the hover effect. Either that or have the current items underlined. Again subtlety is the key. 

[remixedcat]

 

It is quick and easy, but personally i never trust a third party with the performance and stability of a client (or personal) site.

An example of this is FontKit. It went down for three days at the beginning of the month and caused havoc with sites using it. Some of my colleagues were getting 30 calls a day from ###### off clients, even more ###### off when they were told there was nothing that could be done. Having a decent font stack in place goes some way to alleviating the issue, but it is still an issue none the less.

 

@font-face ftw. 

Ouch!! That sucks...

[Seahorsepip Veteran]

how many hits you get though? and how many databases?

I got 100GB bandwidth so hits are kinda infinite
And I got unlimited databases

It's shared hosting btw, if you want an actual vps: http://vpsdepot.com It's a part of webhostingpad ^^

[remixedcat]

with azure or what hosting provider?

[Seahorsepip Veteran]

with azure or what hosting provider?

The website is called webhostingpad.com, idkw if they have their own servers or rent servers from amazon, azure etc.

[remixedcat]

okiesssss

[MikeChipshop Member]

Ouch!! That sucks...

Yeah it was a bit of a headache for them. None of my clients using TypeKit (I haven't used it for a commercial project for a while) actually noticed the down time because i'll always put as close as possible web safe fonts in the font stack just in case. Either that or they just never looked