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?

[DevTech]

When it comes to web stuff, every player that matters is on GitHub - they could just rename it JavascriptHub (I jest, lot of other stuff there)

So poke around and use the search. Because if anything really weird like an Illustrator to HTML converter exists somebody will have uploaded it to GitHub. Also search SVG to HTML since you can save your work as an SVG and SVG is "cool" to the Web Hipsters...(hint: Adobe is "not cool")

You might want to look into static site generators which is a trendy way to bypass the hassle of server side dynamic sites.

You can also search on the terms "boilerplate" and "bootstrap" where a lot of people have put some effort into making packages of all the tech you need to hit the ground running fast and these starter kits range from beginner to advanced.

The super trendy tech right now is Facebook React so take at look at bootstraps that include that...

 

 

[Seahorsepip Veteran]

The design itself can be made in any program, photoshop, illustrator, gimp etc.
The actual implementation has to be in steps:

1. Write html for the content, menubar etc. Just plain html tags
2. Start matching the background and big details to your design with css
3. Workout the small details in css
4. Use javascript when necessary

Start with a simple editor like notepad++, don't use a tool like dreamweaver, it only makes it more complex and harder to understand.

If you get stuck at a step, feel free to post at the forums. 

 

Css isn't that hard at all once you get the hang of it, making an illustrator design into a working html website with css is possible in less then a day after gaining some experience.

[+Zagadka Subscriber²]

Get a few sheets of paper, draw some rectangles, sketch shapes and think about colors. Figure out how to portion it into divs (not dissimilar from drawing a person by starting with ovals).

Pop open Photoshop, draw everything out as an image, crop it into bits (background images etc).

Then I prefer using a text editor to combine it all together.

[wrack]

I am going to add my experience from a Web Developer's (ASP.NET, MVC, SQL Server, Java Scripts etc etc) point of view. I can't design but I can code. So, for a smaller projects, I hunt around the web to find a nice html website template that meets client's needs (responsive, theme colour etc etc). Then I buy that template and convert that template from pure html to either ASP.NET or MVC and then build upon it by loading data dynamically and in the process learn a little bit on how the template works.

[+Zagadka Subscriber²]

Oh, also, chop up designs as much as possible (another analogy, like normalizing a database). I use a lot of includes to make site-wide changes quickly and changes to specific pages easily.

But everyone has their own method. You can attack the problem as a designer or a programmer or any number of methods.

In code, though, be absolutely consistent in file names, relative path names, variables, syntax, capitalization, etc.

[firey]

Personally I find whatever bootstrap theme fits my needs, then modify it to be used however I need.  Be it PHP, AngularJS, jQuery, ASP.NET.   

[Seahorsepip Veteran]

My last project didn't use any framework, it's written from scratch. The freedom in that is refreshing

[patseguin Global Moderator]

Jeez, sounds really complicated. I was hoping I wouldn't have to code. I designed a basic layout in Illustrator CC last night just to have something to start with. I hoped it might be as easy as doing that and then cutting out the parts and pasting into a layout in Dreamweaver. Possibly even import the AI file into Photoshop and then just save elements as images and load them into Dreamweaver, create links, etc. I don't really need any flashy animations or anything. Just a very simple couple of pages to show some information to start. Once I have it in place I could add some more advanced stuff as I learn. Is there something better than Dreamweaver for a beginner?

[Jub]

I don't do WYSIWYG and as such haven't tried Macaw, but it's supposed to be the best of the lot. RapidWeaver is also supposedly good.

You can't come out of this without doing any work. There's a reason why web developers make a thousand bucks per day.

[episode]

Jeez, sounds really complicated. I was hoping I wouldn't have to code. I designed a basic layout in Illustrator CC last night just to have something to start with. I hoped it might be as easy as doing that and then cutting out the parts and pasting into a layout in Dreamweaver. Possibly even import the AI file into Photoshop and then just save elements as images and load them into Dreamweaver, create links, etc. I don't really need any flashy animations or anything. Just a very simple couple of pages to show some information to start. Once I have it in place I could add some more advanced stuff as I learn. Is there something better than Dreamweaver for a beginner?

You don't have to. Use WordPress for the backend. Takes care of everything, plenty of plugins, very extendable, constantly updated. No reason to do work you don't have to do. There are also tens of thousands of themes and plenty of 'theme builders' to start your designs from. 

[+InsaneNutter MVC]

You could work backwards, as in base the site on Wordpress so you have a CMS. Next find a theme you like as a starting point, then adapt that theme to your tastes. You would need to understand enough CSS to change colors and styles to do this, then of course you already have the knowledge to do any graphics.

[Joxbox]

Patsequin, what you want to use is Adobe Muse.  I am a Photoshop Expert who does not Code.  Adobe Muse was create for ARTISTIC people like us to Create beautiful, functional & professional websites!  Highly Recommended WYSIWYG Website Design App.  Best of Luck!

[Joxbox]

Link to Adobe Muse

http://www.adobe.com/products/muse.html

 

 

 

[patseguin Global Moderator]

Link to Adobe Muse

http://www.adobe.com/products/muse.html

 

 

 

Thank you! I will check that out.

[StuvWxyz]

You might want to have a look at this simple guide.

[sundayx Veteran]

I pretty much do everything in Photoshop and hand it over to our developers.

Icons are often drawn in Illustrator and brought into Photoshop, then are exported in bigger sizes for app development.

If I have to to front-end work, then it's mostly in Dreamweaver. But then again I'm not a coder so I just do basic non-dynamic stuff.

[MikeChipshop Member]

Ah... time for my old favourite graphic...

 

Fact of the matter is, you're going to have to choose what matters to you most, but your absolute last resort should be WYSIWYG. Visual builders like Dreamweaver in design view (not code view), Muse, Serif etc, spit out low performing, bloated, horrible code that'll be as slow as crap and just as putried.

If you're after something cheap, that performs well but isn;t bespoke, then grab a copy of WordPress and stick a theme you like, on there.

If you're after bespoke design, well coded, then you'll have to look at hiring someone to do it, or start the long learning process. 

[patseguin Global Moderator]

I've been playing around with Muse and it is right up my alley. It is making it extremely easy for a graphics guy like me design a site.

[MikeChipshop Member]

I've been playing around with Muse and it is right up my alley. It is making it extremely easy for a graphics guy like me design a site.

It's the better of the design view style editors, but just remember that the code it spits out is still not really up to scratch, quite bloated and under performs. If this doesn't bother you, then that's fair enough

[patseguin Global Moderator]

It's the better of the design view style editors, but just remember that the code it spits out is still not really up to scratch, quite bloated and under performs. If this doesn't bother you, then that's fair enough

Would I eventually be able to import it into Dreamweaver and optimize it? Right now, I just have a very simple 5 page site with some info, pricing, etc. Nothing too fancy.

[MikeChipshop Member]

Would I eventually be able to import it into Dreamweaver and optimize it? Right now, I just have a very simple 5 page site with some info, pricing, etc. Nothing too fancy.

Not actually used it myself, but i'd say the likelihood is yes. We all damn Adobe for many things, but one thing they get right is having their various software's play nice together.

[perochan]

go to some pages that you like, right click it and click view page source.

study it and duplicate it if you want.

[MikeChipshop Member]

go to some pages that you like, right click it and click view page source.

study it and duplicate it if you want.

There's a damn site more going on than "View Source" shows you.

[remixedcat]

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!

[patseguin Global Moderator]

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