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]

 

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. 

Same here, I always take care of hosting libraries and fonts myself, if the website loads so will the font and js because it's on the same server ^^

[MikeChipshop Member]

Same here, I always take care of hosting libraries and fonts myself, if the website loads so will the font and js because it's on the same server ^^

Also, i meant 'TypeKit' not 'FontKit' Doh!

[Seahorsepip Veteran]

Also, i meant 'TypeKit' not 'FontKit' Doh!

Yeah I know, I actually read TypeKit without noticing you wrote FontKit

[patseguin Global Moderator]

Here we go. I change the text do a medium gray on the home page and changed the menu items to have the same rollover state as the active state, getting rid of the ugly blue. Looking better?

http://coveredwagonembroidery.com/index.html

[patseguin Global Moderator]

I've designed 2 websites using Muse and am working on my 3rd. While it is very powerful and easy to use for a designer like me, I am already eyeballing Dreamweaver for my embroidery digitizing site www.patriotdigitizing.com because I eventually want to add an commerce ordering page. My question is can I still use Dreamweaver if I have no coding experience? Or am I going to haver to take a class or something to learn coding?

[Seahorsepip Veteran]

I've designed 2 websites using Muse and am working on my 3rd. While it is very powerful and easy to use for a designer like me, I am already eyeballing Dreamweaver for my embroidery digitizing site www.patriotdigitizing.com because I eventually want to add an commerce ordering page. My question is can I still use Dreamweaver if I have no coding experience? Or am I going to haver to take a class or something to learn coding?

You're gonna need to learn to write code or hire someone since you're gonna need to make a theme(css, html, js, php) for software like opencart, magento, woocommerce etc.

[DevTech]

Here we go. I change the text do a medium gray on the home page and changed the menu items to have the same rollover state as the active state, getting rid of the ugly blue. Looking better?

http://coveredwagonembroidery.com/index.html

Do you have any overall objectives?

That site looks like something from 2002 but sometimes cheesy looking site are actually more effective for certain types of markets where the idea is to look homespun or anti-establishment etc.

Maybe you can pay somebody like seahorse to help you because it will take a long time for you to learn this stuff if you want to make commercial sites that do commerce.

Certainly in 2015 one would think software tools could get people started and still provide all the detail level stuff but I don't know of any.

[MikeChipshop Member]

You're gonna need to learn to write code or hire someone since you're gonna need to make a theme(css, html, js, php) for software like opencart, magento, woocommerce etc.

Got to agree with this.

Dreamweaver is a fine code editor (although for the price you're better off using something like Sumblime or Atom.io) but it's design view is worse than Muse.
Neither are going to be able to handle any dedicated frameworks particularly well because most of these frameworks require some sort of logical thinking that design view style editors just can't fathom.

The one idea that might work for you is using PayPal (spits) buttons, as they tend to be able to be inserted any where with ease. Of course this leaves you paying hefty charges on any sales made and having all your funds sitting in PayPal until release day, but it will solve the issue for you.

[MikeChipshop Member]

Here we go. I change the text do a medium gray on the home page and changed the menu items to have the same rollover state as the active state, getting rid of the ugly blue. Looking better?

http://coveredwagonembroidery.com/index.html

Sorry, missed this.

Yeah definitely an improvement on the original. Did you save a copy so we can see them side by side?

[DevTech]

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.

Flat is simply a design choice.

You can make great looking stuff with gradients and glows and whatever effects as long as you have design sense. Slapping a bunch of effects just to be "effects" is not design. It will look horrible.

That being said, there is a fashion industry for websites just like every other commercial thing on the planet and you can usually date the design of a website from the overall fashion it is copying...

Right now the trendy Hipster fashion is a Bootstrappy thing with Parallax and a top fuzzy background video showing shiney happy Hipsters at work or a zoomed in view of a Macbook and coffee cup or any similar San Francisco Hipster sensibility.

As much as I hate social thinking, that layout catches the eye immediately drawing you into the main message presented in clean minimalism and then big arrows encourage you to scroll down to receive more of the message while parallax animation keeps it moving and provides the illusion of a coherent wholeness. That's 2015. Come back in a year for the next new thing...

 

[DevTech]

The noise level to locate web hosting is insane. Here is a heavily moderated forum with strict rules to cut out hosting spam:

http://www.webhostingtalk.com/

The legitimate non-scammy hosters stand out if you poke around a while.

 

[patseguin Global Moderator]

 

Do you have any overall objectives?

That site looks like something from 2002 but sometimes cheesy looking site are actually more effective for certain types of markets where the idea is to look homespun or anti-establishment etc.

Maybe you can pay somebody like seahorse to help you because it will take a long time for you to learn this stuff if you want to make commercial sites that do commerce.

Certainly in 2015 one would think software tools could get people started and still provide all the detail level stuff but I don't know of any.

2002? Ouch! I guess I need to thicken my skin when I ask for feedback, lol. ;-)

I was all proud of what I did but now the consensus seems to be that it looks cheesy. Do you have some suggestions to make it look more modern? I obviously don't want people going to the site and thinking we are dated and not give us a second thought. I want the site to attract attention and portray our commitment to being current, if that makes sense.

Is a vertical menu structure more modern than the horizontal view that I currently have?

Here is another company that does the same thing as us: http://www.5bs.com/

Does their site look more modern or does it still look dated to you guys?

[MikeChipshop Member]

 Ah, but you've been listening to the feedback, and that's what matters.
What you started with was fine, you're not in the web design industry but you gave it a shot, and gave a decent framework to improve upon.
I run a web design forum, and some of the beginners stuff we see over there is far, far worse.

 

oes their site look more modern or does it still look dated to you guys?

A lot more dated than yours. See what we were saying about the bevels, drop shadows and glows?

 

[patseguin Global Moderator]

 Ah, but you've been listening to the feedback, and that's what matters.
What you started with was fine, you're not in the web design industry but you gave it a shot, and gave a decent framework to improve upon.
I run a web design forum, and some of the beginners stuff we see over there is far, far worse.

 

A lot more dated than yours. See what we were saying about the bevels, drop shadows and glows?

 

Where is your forum?

[MikeChipshop Member]

http://thewebdesignforum.co.uk

Despite the name, we're a global community. We also have a Slack channel for quick questions and the like.

[DevTech]

2002? Ouch! I guess I need to thicken my skin when I ask for feedback, lol. ;-)

I was all proud of what I did but now the consensus seems to be that it looks cheesy. Do you have some suggestions to make it look more modern? I obviously don't want people going to the site and thinking we are dated and not give us a second thought. I want the site to attract attention and portray our commitment to being current, if that makes sense.

Is a vertical menu structure more modern than the horizontal view that I currently have?

Here is another company that does the same thing as us: http://www.5bs.com/

Does their site look more modern or does it still look dated to you guys?

 

That site is about 2004-ish

My dates might be a bit off since I'm not pulling up any references but it's amazing how fixed in time these fashions can be.

It means they paid a consultant to do a site and never bothered to maintain their site other than keep data up to date perhaps. It you want to give users an impression of an active business, then the rule of thumb is do do a minor site "look" "refresh" every season (i.e. "The Fall Refresh") and then a major refresh every year or every two years. The internet runs on "doggie years" so two years is like a decade in real time. (blame the founders of Netscape and their "internet time" )

You need to bootstrap yourself to the point where people say your site looks like "just another boring bootstrap site" - then you will have hit the year 2013

So bootstrap has three meanings. One is the english/computer meaning of starting from zero to something that works. Two is a package of minimal software and templates that achieves that in web design. Three is Twitter Bootstrap a CSS starting place/foundation for a website.

People often put together lots of bootstrap packages and make them freely available on GitHub. Searching is a bit confusing because most of these packages will include Twitter Bootstrap but not all and search results will not always be a bootstrap "package" but will also often be a Twitter Bootstrap Template (also useful) - Nobody uses the word Twitter (because it is so well known) which is why it is initially very confusing.

The other common word to look for is Boilerplate which is usually a super-template of stuff but less comprehensive than a "bootstrap package"

The other thing to look for is packages that include React, which is the newest Hip trend on the block by Facebook. Again all the big players hang their hat on Github.

I threw all this stuff at you in my first post on the thread but I didn't realize that you didn't know anything. Sorry about that.

 

 

 

[patseguin Global Moderator]

I guess first of all I need to know what the heck "bootstrap" is. I never knew exactly how much of a noob I was until I started talking to you guys.

[DevTech]

 

Is a vertical menu structure more modern than the horizontal view that I currently have?

 

A business in 2015 has to deal with the big elephant in the room which is mobile. The bare minimum is to have a Responsive website design so users will actually not dismiss you right away when accessing from a mobile device and you can keep their attention long enough so they download your App.

The next level up from Responsive is Reactive/Adaptive where the Responsive design includes Device Awareness.

So once you realize that absolutely nothing is fixed on your website and it all flows like water, you can get that "Aha moment" where the old traditional design a site in Photoshop/Illustrator is not very helpful.

So once you realize that 70% of your site visitors will be mobile (if you are doing it right) we can then talk about Menus!

You can then bring yourself up-to-date on the great hamburger debate, but you can't go wrong by starting with a hamburger because you need a hamburger somewhere anyways.

BTW you might come across the term "Mobile First Web Design" and discard thinking about it because you plan to worry about Apps down the road. The concept is so poorly named that even people in the web design field get it wrong. It means simply to Design your Website in terms of appearance and layout as if it was an App on a mobile device before you do anything else even if you never plan to have an app Then adapt it to a desktop browser. It will save a whole lot of re-design later and it actually improves your desktop site design as well. (I will leave the architecture side of a web based API to your backend services for a later discussion, but limiting the exposure of the server side code to an API is also a starting point because it is hard to retrofit it later and also enforces great design thinking)

So the answer to the menu question is Hamburger.

A quick test to see if your website is mobile friendly (during your design) is to drag the browser window from desktop size to a small mobile phone size and see it flows like liquid to adapt to each size. You can't always do this on a "real" website since it will often include device aware code.

 

[patseguin Global Moderator]

 

A business in 2015 has to deal with the big elephant in the room which is mobile. The bare minimum is to have a Responsive website design so users will actually not dismiss you right away when accessing from a mobile device and you can keep their attention long enough so they download your App.

The next level up from Responsive is Reactive/Adaptive where the Responsive design includes Device Awareness.

So once you realize that absolutely nothing is fixed on your website and it all flows like water, you can get that "Aha moment" where the old traditional design a site in Photoshop/Illustrator is not very helpful.

So once you realize that 70% of your site visitors will be mobile (if you are doing it right) we can then talk about Menus!

You can then bring yourself up-to-date on the great hamburger debate, but you can't go wrong by starting with a hamburger because you need a hamburger somewhere anyways.

BTW you might come across the term "Mobile First Web Design" and discard thinking about it because you plan to worry about Apps down the road. The concept is so poorly named that even people in the web design field get it wrong. It means simply to Design your Website in terms of appearance and layout as if it was an App on a mobile device before you do anything else even if you never plan to have an app Then adapt it to a desktop browser. It will save a whole lot of re-design later and it actually improves your desktop site design as well. (I will leave the architecture side of a web based API to your backend services for a later discussion, but limiting the exposure of the server side code to an API is also a starting point because it is hard to retrofit it later and also enforces great design thinking)

So the answer to the menu question is Hamburger.

A quick test to see if your website is mobile friendly (during your design) is to drag the browser window from desktop size to a small mobile phone size and see it flows like liquid to adapt to each size. You can't always do this on a "real" website since it will often include device aware code.

 

Very good info there. Muse does have phone/tablet versions which I haven't messed with yet. I will have to try that out because you're right about a majority being on mobile.

 

You raise another point. I've been using Illustrator to design my concepts. WOuld InDesign be better? I'm not really sure when it is better to use Illustrator or InDesign.

[MikeChipshop Member]

Stick with illustrator over indesign.

[DevTech]

Very good info there. Muse does have phone/tablet versions which I haven't messed with yet. I will have to try that out because you're right about a majority being on mobile.

 

You raise another point. I've been using Illustrator to design my concepts. WOuld InDesign be better? I'm not really sure when it is better to use Illustrator or InDesign.

I am a programmer of code. I generally hate webby stuff most of the time due to the huge noise level of nonsense in the field and in the best case it is a cobbled together mishmash of technologies re-purposed to do stuff never intended (or imagined) by Berners-Lee.

So never feel like you won't get to a useful point as long as you find it interesting. It is very very complicated not just because you are new to it but also because it is unusually complicated even for computer stuff because it grew up out of a hyper-linked information utility into the pandoras box of crazy ad-hoc stuff it is today. It is complicated even to people who understand the complicated stuff.

That is a round-about way of saying you will have to follow the rabbit Down The Hole at some point in your journey. The Adobe tools are not going to cover what you need to do and to the extent they could be useful they could only be properly used after you have returned from the rabbit-hole.

You need a basic feel for HTML, CSS and Javascript (JS)

Then you need a basic feel for how those get mashed together in a modern way - perhaps you could study the HTML5 Bootstrap code a bit. (another project on GitHub)

I would dearly love to find a design.edit tool with broad coverage but still has drill-down and maybe one exists. Until then you could try Atom with some plugins that appeal to you. (again on GitHub)

And by now, you have been searching around Github and sorting various JS and CSS searches by number of stars etc to get an idea of what is going on right? The entire web design ecosystem is playing out in noisy real time right now on GitHub.

Your "design" tool for a website as small as yours is paper. Just scribble text. Forget all graphical elements until it all looks good in plain text. And before you scribble this stuff you need to get your head out of the static thinking of Adobe Designer tools. The website is a living fluid digital lifeform that won't reveal itself in a static image. So you need to download all sorts of "responsive" templates and look at them in your browser. You can't design until you understand how they morph. Like the Transformers movies!

You can also check the "awesome" lists of links that various people make on GitHub. I don't know how much hand holding you need. Do I need to say go to GitHub and search on the word "awesome" ?

 

 

[MikeChipshop Member]

There's a good saying I think you'll like.

"learn the code, not the tools"

[DevTech]

Stick with illustrator over indesign.

Yes. Best to visit the rabbit hole first, but illustrator has the very useful "Export to SVG" for various design elements. But read up on "Responsive SVG" first...

[patseguin Global Moderator]

SO what exactly am I looking for on github again? Starting templates? I feel like a guy who has never touched a computer before, lol.

[adrynalyne]

 

$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.

Azure kills you on database plans. They are really bad.