• 0

Best way to design a web site?

Asked by patseguin,

 Share

Question

Grand Master

patseguin Global Moderator

Posted
  • Global Moderator
Posted

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?

Link to comment
https://www.neowin.net/forum/topic/1275396-best-way-to-design-a-web-site/
Share on other sites

126 answers to this question

Recommended Posts

  • 0
Grand Master

DevTech

Posted
Posted

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

 

 

  • 0
Grand Master

Seahorsepip Veteran

Posted
  • Veteran
Posted (edited)

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.

  • 0
Grand Master

+Zagadka Subscriber²

Posted
  • Subscriber²
Posted

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.

  • 0
Grand Master

wrack

Posted
Posted

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.

  • President Devil, Royalty, Mohitster and 1 other
  • Like 4
  • 0
Grand Master

+Zagadka Subscriber²

Posted
  • Subscriber²
Posted (edited)

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.

  • 0
Grand Master

patseguin Global Moderator

Posted
  • Author
  • Global Moderator
Posted

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?

  • 0
Mentor

Jub

Posted
Posted

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.

  • MikeChipshop
  • Like 1
  • 0
Grand Master

episode

Posted
Posted

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. 

  • x.iso and _kane81
  • Like 2
  • 0
Grand Master

+InsaneNutter MVC

Posted
  • MVC
Posted

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.

  • 0
Grand Master

sundayx Veteran

Posted
  • Veteran
Posted

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
  • Like 1
  • 0
Grand Master

MikeChipshop Member

Posted
  • Member
Posted

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

Project-Management-Triangle-sm.png

 

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. 

  • 0
Grand Master

MikeChipshop Member

Posted
  • Member
Posted

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 :)

  • 0
Grand Master

patseguin Global Moderator

Posted
  • Author
  • Global Moderator
Posted

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.

  • 0
Grand Master

MikeChipshop Member

Posted
  • Member
Posted

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.

  • 0
Grand Master

remixedcat

Posted
Posted

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!

  • 0
Grand Master

patseguin Global Moderator

Posted
  • Author
  • Global Moderator
Posted

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

 

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.