• 0

Best way to design a web site?


Question

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

Recommended Posts

  • 0

 

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

  • Like 2
  • 0

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

  • 0

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?

  • 0

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.

  • 0

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.

  • 0

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.

  • 0

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?

  • 0

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

 

  • 0

 

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?

  • 0

 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?

 

  • 0

 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?

  • 0

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.

 

 

 

  • 0

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.

  • 0

 

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.

 

  • 0

 

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.

  • 0

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" ?

 

 

  • 0

 

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

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • The quantum search for Time's origin had an equally mind-boggling conclusion by Sayan Sen Image by Steve Johnson via Pexels A theoretical study from researchers at the University of Surrey suggested that the direction of time may not be fundamentally fixed in certain quantum systems. The work, published in Scientific Reports, examined how the “arrow of time” could emerge from microscopic physics and found that time-reversal symmetry can remain intact even in models used to describe processes such as energy loss and thermalisation. The arrow of time refers to the observed one-way direction from past to future in everyday life. In macroscopic processes, this is easy to see. Spilled milk spreads across a table and does not gather back into a glass, and heat flows from hotter objects to colder ones. These processes shape the common sense idea that time moves in a single direction. However, at the level of fundamental physics, many equations do not prefer a direction of time. Time-reversal symmetry means that the same physical laws can describe a system whether time moves forward or backward. This has made it difficult to explain why irreversible behaviour appears in the large-scale world even when the underlying rules do not require it. Dr Andrea Rocco, Associate Professor in Physics and Mathematical Biology at the University of Surrey, described this contrast: "One way to explain this is when you look at a process like spilt milk spreading across a table, it's clear that time is moving forward. But if you were to play that in reverse, like a movie, you'd immediately know something was wrong – it would be hard to believe milk could just gather back into a glass. However, there are processes, such as the motion of a pendulum, that look just as believable in reverse. The puzzle is that, at the most fundamental level, the laws of physics resemble the pendulum; they do not account for irreversible processes. Our findings suggest that while our common experience tells us that time only moves one way, we are just unaware that the opposite direction would have been equally possible." The study focused on open quantum systems, which are quantum systems that interact with a surrounding environment. This environment, often described as a heat bath, can exchange energy and information with the system. The researchers used this framework to study how a direction of time might appear even when the underlying physics does not enforce one. A key part of the analysis involved the Markov approximation. This is a simplification used in many models where the system is assumed not to retain memory of its past states. The idea is that changes depend only on the current state, not on earlier history. This is commonly used when studying thermalisation, which is the process where a system settles into equilibrium with its environment. The study also used concepts such as master equations, including the Lindblad and Pauli equations, which describe how probabilities of different quantum states change over time. Another related model discussed was quantum Brownian motion, which describes the random-like movement of a quantum particle interacting continuously with its environment. In these descriptions, a “memory kernel” can appear, which is a mathematical term that accounts for how past states influence current behaviour. The researchers found that applying the Markov approximation did not break time-reversal symmetry. Even when the system interacted with an effectively infinite heat bath, the resulting equations of motion remained symmetric in time. This meant that the same mathematical description could, in principle, run forward or backward in time without contradiction. The study further showed that standard frameworks used in open quantum systems, including quantum Brownian motion and master equations like the Lindblad and Pauli forms, could be written in a time-symmetric way. These equations are typically used to describe processes that look irreversible, such as dissipation and thermalisation, but the results suggested they can also be interpreted as allowing evolution in both time directions. Thomas Guff, Research Fellow in Quantum Thermodynamics, said: "The surprising part of this project was that even after making the standard simplifying assumption to our equations describing open quantum systems, the equations still behaved the same way whether the system was moving forwards or backwards in time. When we carefully worked through the maths, we found that this behaviour had to be the case because a key part of the equation, the "memory kernel," is symmetrical in time. We also found a small but important detail which is usually overlooked – a time discontinuous factor emerged that kept the time-symmetry property intact. It’s unusual to see such a mathematical mechanism in a physics equation because it's not continuous, and it was very surprising to see it appear so naturally." The researchers also noted that deriving a one-way arrow of time from time-reversal symmetric microscopic dynamics remains an open problem across fields such as thermodynamics, statistical mechanics, particle physics, and cosmology. Their results suggested that some standard descriptions of irreversible behaviour in open quantum systems may be better understood using a time-symmetric formulation of Markovianity. According to the study, processes such as thermalisation, which are usually treated as irreversible, could in theory be described in a way that allows evolution in either time direction under the same rules. This does not imply that time reversal occurs in everyday life, but rather that the underlying equations do not strictly enforce a single direction. Overall, the findings suggested that the perceived direction of time may emerge from how physical systems are modelled and approximated, rather than from a fundamental asymmetry in the laws themselves. The researchers noted that this perspective could have implications for ongoing work in quantum mechanics, thermodynamics, and cosmology on the origin of time’s arrow. Source: University of Surrey, Nature This article was generated with some help from AI and reviewed by an editor. Under Section 107 of the Copyright Act 1976, this material is used for the purpose of news reporting. Fair use is a use permitted by copyright statute that might otherwise be infringing
    • A bit premature... 100% Marketing. Bizarre.
    • A $300 price hike is insane! No one is going to want to pay that much!
    • Since the 1st one flopped, there is really no reason to make another one. It's just losing money left and right.
  • Recent Achievements

    • Reacting Well
      BizSAR earned a badge
      Reacting Well
    • First Post
      AndreaB earned a badge
      First Post
    • Week One Done
      Huge Trailer earned a badge
      Week One Done
    • Week One Done
      Classifyskilleducation earned a badge
      Week One Done
    • One Month Later
      eurospharma62 earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      579
    2. 2
      +Edouard
      182
    3. 3
      PsYcHoKiLLa
      74
    4. 4
      Michael Scrip
      71
    5. 5
      neufuse
      64
  • Tell a friend

    Love Neowin? Tell a friend!