• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Best way to design a web site?

Question

patseguin    1,323

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?

Share this post


Link to post
Share on other sites

Recommended Posts

  • 0
DevTech    1,518

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

 

 

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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.

Share this post


Link to post
Share on other sites
  • 0
+Zagadka    4,106

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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
wrack    456

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.

  • Like 4

Share this post


Link to post
Share on other sites
  • 0
+Zagadka    4,106

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.

Share this post


Link to post
Share on other sites
  • 0
firey    4,132

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.   

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
patseguin    1,323

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?

Share this post


Link to post
Share on other sites
  • 0
Jub    505

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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
episode    629

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. 

  • Like 2

Share this post


Link to post
Share on other sites
  • 0
+InsaneNutter    1,369

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.

Share this post


Link to post
Share on other sites
  • 0
Joxbox    1

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!

Share this post


Link to post
Share on other sites
  • 0
sundayx    127

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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
MikeChipshop    3,458

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. 

Share this post


Link to post
Share on other sites
  • 0
patseguin    1,323

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.

Share this post


Link to post
Share on other sites
  • 0
MikeChipshop    3,458

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

Share this post


Link to post
Share on other sites
  • 0
patseguin    1,323

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.

Share this post


Link to post
Share on other sites
  • 0
MikeChipshop    3,458

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.

Share this post


Link to post
Share on other sites
  • 0
perochan    151

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

study it and duplicate it if you want.

Share this post


Link to post
Share on other sites
  • 0
MikeChipshop    3,458

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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
remixedcat    2,767

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!

Share this post


Link to post
Share on other sites
  • 0
patseguin    1,323

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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.