Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Quick basic designing, CMS, 'drawing' sites

Featured Replies

You'll notice I'm a new user.

 

I'm here because I want to take a second look at website design.

 

I'm a creative guy with a lot of entrapenurial ideas. I know if I could get my head round website design I'd find it really rewarding. It would be really useful to put some of my ideas into practice.

10 years ago I made a few basic sites. But at some point a knowledge of programming has become so important. These days I find it hard to keep up. I can't stand programming but I love to be creative. I started finding it frustrating to be designing visual things in code. I just couldn't get on with this and so I threw in the towel.

 

Fast forward 10 years.

The other day I had a go with the new ipad3. Using a sketch program I found I could draw pretty well for the first time. I always remember this was a sticking point for my websites in the past - designing quality media I found difficult.

This made me think. Isn't there a way to design a website visually rather than by coding? Is it really possible to separate visual design from engineered coding?

 

I've looked at paying companies to make websites for me but I found it incredibly frustrating and I'm not sure I want to go there again without a mentor. Any comments on that?

 

One thing has changed greatly in the past few years and that's the availability of CMS systems. I'd like to harness this.

 

I'm trying to imagine how I can make the most of all these things around me:

- ipad for graphics

- CMS systems

- contracting database and coding backend for the heavy lifting in whatever idea I can think of

 

 

Choosing an example that I won't be exercising, but it's an easy example, a bitcoin exchange.

 

- Wordpress or various CMS systems offer a basic quick startup, front end only that can be customised

- media drawable to give a brand image

- using code from freely licenses intersango exchange code

- ^ but that backend code is customised and checked by a contractor

- also making use of any available code I can find for uploading ID documents etc

- tweaking the CMS for better security (outsource this)

(remember this is a fictious example, just an example of website design for bootstrapping an entrapanurial idea, not talking about legal aspect)

 

 

I want to be involved in the creative process,

but I also don't want to spend an age learning website design when that really isn't my goal. I just want to be able to throw up websites quickly and easily but reduce the reliance on 3rd parties.

You don't have to code at all to be a website designer, though personally I think you should at least know how. HTML and CSS are very, very easy.

 

But if you really don't want to, you can just design websites in Photoshop or FireWorks and then hand the designs to a developer who can code them up for you and attach them to the platform you want them to work on, be it WordPress, Magento or whatever.

 

Having said that, there's no such thing as "quickly and easily" in web design. Web Design is a professional career choice and to be any good at it, let alone make a living from it, you need to be putting in serious hard work and you have to be willing to learn.

 

Also, you can't draw websites on an iPad. That's never going to work, you need to design websites on a proper laptop/desktop, be that OSX or Windows.

Edited by brightonmike

  • Author

Thanks. Believe it or not I wasn't aware of Fireworks, only Photoshop/Gimp/Sketchup etc. Or rather, I wasn't aware that passing a mockup like that to a professional can be a good way to go!

 

Since looking into it there's also other vector drawing stuff like the Pencil firefox plugin & Inkscape. Redhat have a tutorial for website mockups with Inkscape.

There's a few vector drawing apps for ipad but none in a quick search I see mentioning website mockups.

 

Since touch interface I can't stand using a mouse for this subject. I met a creative type once and I noticed he was using using a multitouch pad with his iMac.

 

This also looks interesting but is probably rubbish:

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

 

I like the sound of Fireworks via touch interface. mmm ouch.

Don't confuse the trend for "I've got an iPad, I'm a creative" and "I've got photoshop, I'm a web designer" with actually making websites that work. You're going to have to learn to at least understand CSS and HTML. Don't Panic!

 

The only way to "simply draw a website" is to place a single image online, which is your page. Google won't pick up on any of the text, there won't be any interactivity, it'll take an age to load, and to edit it you're going to have to go back to photoshop. Basically, it'll suck.

 

Sorry, but you really are better off learning the basics of HTML and CSS (don't worry about javascript, php etc etc, that all comes later). Images aren't a website, the text is the website, images just make it look pretty. If you turn off all the images (some browsers do) you still need to have all of the information available.

Also, you can't draw websites on an iPad. That's never going to work, you need to design websites on a proper laptop/desktop, be that OSX or Windows.

 

{holy OS flame war}

*cough* or Linux *cough*

{/holy OS flame war}

 

;)

  • Author

The main thing I want to say is that I despise the approach of making the visual aspects in a non visual programming way.

 

It was just about manageable in the early days of basic html4 but since then things have become so much more complicated. That's hwy I threw in the towel.

 

Don't get me wrong, I understand that in handling other aspects programming is essential. But I don't like the idea of doing visual design by code.

 

An analogy. I learnt music on Commodore Amiga trackers, the Atari ST & C64. That was great and a perfectly valid way of approaching music making and I'm not knocking that approach. But as soon as I picked up a guitar I found everything was a lot quicker and natural.

 

I am overflowing with business ideas and most require a website. I just want to make these ideas reality but I had no clue on how to communicate the ideas to a web dev. At least now I've heard of Fireworks and CMS should make it a bit simpler.

 

I guess what I need to see is a flow process of how a team design a website - who handles what and when, what is outsourced and how the requirements were agreed without people getting confused as to what the goals are.

 

I only want to be the visionary, I just don't think I have time to learn all the tech to make these things happen alone. It was possible 10 years ago but these days there's so much to learn it doesn't make sense to me.

Here's how I do it (as a one-man-band)

 

1: Get client specs. Decide on a colour scheme.

2: Write a basic stylesheet based on the colour scheme.

3: Put together a rough HTML template, divs etc in their respective places (including more work on the stylesheet).

4: Start work on the graphics.

5: Embed the graphics in the site.

6: Add database, facebook/twitter integration, jquery effects, mailforms, bells, whistles etc.

 

Generally you want to treat content and style as two completely different issues. As you can see, most of the real work is in two simple things, the stylesheet (CSS) and the main template (HTML). The graphics are pretty much an add-on once all of this is in place, and you can change the entire look and feel of the site by editing style.css and index.htm (or whatever you call your stylesheet and template)

 

Most CMS (content management systems) use this approach. A style (colours etc), a theme (layout and positioning), then they plug all of the content in from a database. If you can understand the concepts by putting together a very basic site yourself then everything will be much clearer and you'll have a good idea of what you can do and what is worth paying out for.

 

 

The main drawbacks with trying to do things visually (eg using Dreamweaver) is that the programs which let you do it invariably produce pretty messy code which can do unpredictable things. You also get into the mindset of "there, that's how it will look!" when it usually won't. Depending on the users browser, device, screen size and a host of other settings you'll probably find that your carefully designed layout will flow off the edge of the screen, miss out information, the text will be too big/small/in the wrong font and so-on. Web design isn't like designing a poster, you don't end up with a single final product which will never change, you end up with a final product which has several million variations, your job is to make sure each of them is acceptable to the end user.

Edited by T-G

  • Author

Thanks T-G that's the sort of thing I'm looking for :-)

 

The only aspect I struggle with is the process of CSS then previewing what it looks like. I find it very slow. That said now I've seen your workflow I can reduce that part of the process now so it's just the framework stage. Personally I like things efficient first. I'm used to browsing over slow links so CSS and html is the stage I like to have beauty, things arranged nice, clean code. I get irritated at these >2mb pages that are becoming commonplace these days. It's a nightmare over satellite, poor 3G signal and 3rd world countries (I think it's more common than we think).

 

I can see that for many the creative outlet can be in the images. Go wild at that later stage. That's an aspect that can be hand drawn and managed in the context of the stylesheet and template. Thing is, coming from years of browsing with images turned off old habits die hard!

 

I'm currently browsing with images turned off in Chrome and outlook.com is now almost unusable on this 3-30kb/sec VSAT connection. Fewer and few people are even labeling the reply button; I'm having to hover to find it on many sites now.

It seems to me that you think it'll be better to use images than CSS to style your website?

 

Don't. You've already said that when you turn images off in Chrome, it's near impossible to navigate a page.

 

A CSS file is tiny when compared to jsut a single image on a page.

 

Also, you're talking about doing work for clients, yet seem to only care about your browsing habits.

 

Use photoshop to mock up the website, and then use it as a reference to how a website will look.

 

Then, code it using HTML,CSS etc until you get the desired affect. It's not slow once you get to grips with it.

 

The one thing I do agree with is the large websites, but that is something that has to be balanced. Should you really take away from the experience of the 98% of people that will view your websites, just to benefit the 2%?

I'm on a pretty slow connection here (Scottish Highlands), but as long as your browser caches images then you should find a refresh is very quick.

 

I'd strongly advise setting up a local server for testing things on, just google "Apache" and see if you can get it installed, then you can test websites without even being connected to the internet - I've been known to work while sat in the car at the beach waiting for the wind to pick up!

 

Also, make sure your images are a sensible size. There's no point in a user downloading a 1000px square image if it's going to be scaled down to 100px square.

 

I'm all for making sites as small and quick to load as possible. In the 1990s you really had to because most people were on dialup, in the 2000s you really had to because people were using slow wireless connections on six different machines at once (and browsing YouTube on 3 of them...), and in the 2010s you have to because everybody is accessing sites on mobile phones with iffy signals. There's always going to be a demand for low-bandwidth sites because people are always going to try to fill up their bandwidth.

Edited by T-G

Also, you can't draw websites on an iPad. That's never going to work, you need to design websites on a proper laptop/desktop, be that OSX or Windows.

 

That's not true, ive designed at least 10 in the last year this way and they look professional and sell.

That's not true, ive designed at least 10 in the last year this way and they look professional and sell.

 

How are you getting the precision required without a mouse?

  • Author

It seems to me that you think it'll be better to use images than CSS to style your website?

 

Don't. You've already said that when you turn images off in Chrome, it's near impossible to navigate a page.

 

A CSS file is tiny when compared to jsut a single image on a page.

 

Also, you're talking about doing work for clients, yet seem to only care about your browsing habits.

 

Use photoshop to mock up the website, and then use it as a reference to how a website will look.

 

Then, code it using HTML,CSS etc until you get the desired affect. It's not slow once you get to grips with it.

 

The one thing I do agree with is the large websites, but that is something that has to be balanced. Should you really take away from the experience of the 98% of people that will view your websites, just to benefit the 2%?

 

I just had to reply to you Jason because I was really meaning to express the opposite really of what you're saying :D

 

I'm not a webdev and I don't want to be.

 

But I want to make my entrepreneurial ideas happen. I want to know how to do the basics to communicate ideas to someone who is and hopefully go a bit further where I can in time. I'd consider employing a webdev to help me create my sites, but I don't want to be completely reliant on other people because:

 

- it's expensive and I've a LOT of ideas to try out

- if you want something done properly, do it yourself

- I like to be in the driving seat

 

That said, I understand it would takes years to catch up on all the tech we have these days. So I'm planning a workflow where I can imagine bringing in specialists to carry out stuff like database backends (thanks T-G :-)

 

Regards the ipad thing. All I'm saying is that the ipad has made me realize just how tactile things can be. I'm certainly not saying to use images, especially raster images... (well, maybe svg a little...) I'm saying that I don't really like the whole approach of designing the visual aspects of a website in code. Did Leonardo DaVinci describe a painting to an assistant who then draw it by numbers?

 

I think it's just a fact I can't get round though; just the way it is that stylesheets and templates have to be done by hand.

This isn't a major big deal for me. It's just that this was the thing that put me off webdev years ago because I'm visual person and I like to use my hands rather than a linguistic person who does well with code.

I saw the ipad3 in particular with all those levels of pressure and also the ability to use a real brush and had a go at painting with it and kind of thought... I wish I could design websites this easily.

 

However I think to do that you're only going to have a basic mockup and then pay (alot?) of money to someone who can make it happen and the end result is going to be limited to straight lines and compromises.

 

I was looking to see if anything has changed on this front but I'm getting the impression that... no it hasn't really. There is a lot of new tech but the actual process is just as hard work. The only thing to help since I last had a look 10 years ago is a lot of progress in CMS systems afaik.

- if you want something done properly, do it yourself

 

That only actually works though if you can actually do what you need doing.

- if you want something done properly, do it yourself

 

 

Whoa? Really?

 

Nothing has ever been more wrong IMO. This statement completely ignores the need for professionals. Professionals exist because they know how to do something properly. That is why they get hired.

 

You sound like you haven't got a scooby how to make a website. Yes, I understand you don't want to code yourself, but if you don't want to code then you have to find somebody that can code. You cannot, categorically cannot, build a website without code. Doesn't exist. They run on computers, computers run code. That is how it works.

 

 

 

Regards the ipad thing. All I'm saying is that the ipad has made me realize just how tactile things can be. I'm certainly not saying to use images, especially raster images... (well, maybe svg a little...) I'm saying that I don't really like the whole approach of designing the visual aspects of a website in code. Did Leonardo DaVinci describe a painting to an assistant who then draw it by numbers?

 

 

Then use Photoshop. What's the problem? Most web designers don't design in code. They design in Photoshop. The designs are then turned into code by a developer, often this will be the same person (in my mind it should be) but it doesn't have to be.

 

 

I saw the ipad3 in particular with all those levels of pressure and also the ability to use a real brush and had a go at painting with it and kind of thought... I wish I could design websites this easily.

 

What are you saying? You want to, literally, draw a website, like you would a painting or a picture? Because if so, people already do. But the fact is, if you want a squiggly line and it can't be replicated in code, you have to use an image. That's fine, but you do have to understand that much as though CSS and HTML have advanced massively over the last 10 years (you need to look into this) there still are, and always will be, limitations. Websites are websites, they are not art. They are there to serve a functional purpose. They are interactive. They have users. As design, they are subject to limitations in exactly the same way any other functional design is. Cars are an excellent example, they are extremely limited in terms of design because of aspects such as aerodynamics, safety, performance. You can't just have a car that looks like a squiggly ball of silly putty with windows stuck anywhere you want. There are, and always will be, limitations. This is the difference between design and art that you have to understand, art can be purely aesthetics but design has to be functional, it has to work.

 

However I think to do that you're only going to have a basic mockup and then pay (alot?) of money to someone who can make it happen and the end result is going to be limited to straight lines and compromises.

 

Again, for a designer, with anything, that is a fact of your job. A chair has to be comfortable, a car has to be economical, and a website has to work. That is why the limitations exist. If you could do whatever the hell you liked with the design of a website, damn we would end up with such a messy, unusable system, that just wouldn't work. Sometimes designers do disregard limitations, the Philippe Starck lemon squeezer is an excellent example. It looks fantastic. But it doesn't work, it is completely useless for squeezing lemons.

 

I was looking to see if anything has changed on this front but I'm getting the impression that... no it hasn't really. There is a lot of new tech but the actual process is just as hard work. The only thing to help since I last had a look 10 years ago is a lot of progress in CMS systems afaik.

 

The industry has changed massively, you just need to look into it more. CSS3, HTML5, and other progressions such as the wonderful jQuery library mean as web developers we can do a million times more than we could five years ago, let alone ten years ago.

Is it rude of me to point out that you describe yourself as creative and entrepreneurial with 'loads of business ideas', yet you're also happy to admit you haven't looked into web design for 10 years?

 

Being a 'creative' is of no real value in web design. If you want to draw something, become an artist. And having business ideas doesn't make you an entrepreneur.

 

If you are an entrepreneur, and want to implement a business idea that involves a website, then if you really believe in your idea you won't be afraid to hire someone who can help you make it happen.

Edited by notbanksy

I just had to reply to you Jason because I was really meaning to express the opposite really of what you're saying :D

 

I'm not a webdev and I don't want to be.

 

But I want to make my entrepreneurial ideas happen. I want to know how to do the basics to communicate ideas to someone who is and hopefully go a bit further where I can in time. I'd consider employing a webdev to help me create my sites, but I don't want to be completely reliant on other people because:

 

- it's expensive and I've a LOT of ideas to try out

- if you want something done properly, do it yourself

- I like to be in the driving seat

 

That said, I understand it would takes years to catch up on all the tech we have these days. So I'm planning a workflow where I can imagine bringing in specialists to carry out stuff like database backends (thanks T-G :-)

 

 

If you can't do it yet then you'll have to hire someone who can. You say expensive but you really do get what you pay for and if you skimp on a cheap developer then that will reflect badly upon yourself and your sites.

Take the time to research a decent developer that will make things happen the way you want and this will take care of a lot of your issues, such as wanting to be in the driving seat etc.

 

Of course you can always learn the trade but as with all professions you've got may years until you'll be able to churn out decent sites.

 

What you need is to build up a decent relationship with freelancers who understand you and what you want from them.

You can then throw them any ideas you have and they can come back at you with the end result.

 

 

Regards the ipad thing. All I'm saying is that the ipad has made me realize just how tactile things can be. I'm certainly not saying to use images, especially raster images... (well, maybe svg a little...) I'm saying that I don't really like the whole approach of designing the visual aspects of a website in code. Did Leonardo DaVinci describe a painting to an assistant who then draw it by numbers?

 

I think it's just a fact I can't get round though; just the way it is that stylesheets and templates have to be done by hand.

This isn't a major big deal for me. It's just that this was the thing that put me off webdev years ago because I'm visual person and I like to use my hands rather than a linguistic person who does well with code.

I saw the ipad3 in particular with all those levels of pressure and also the ability to use a real brush and had a go at painting with it and kind of thought... I wish I could design websites this easily.

 

You can design the basic idea that easily but it really will be a rough idea. An iPad doesn't have the complexity to create proper designs it also doesn't have the ability to output proper sized, proper definition images or export well optimised images.

 

Best bet is to use something like Photoshop/Fireworks or Illustrator for Vectors. Of course there are alternatives the to the above.

 

 

 

However I think to do that you're only going to have a basic mockup and then pay (alot?) of money to someone who can make it happen and the end result is going to be limited to straight lines and compromises.

 

 

Not at all.

Anything you mockup can be bought to life by a developer/designer.

CSS isn't about straight lines and boxes. Every decent site on the web is a combination of HTML, CSS, Images, Javascript and usually a server side script as well.

I was looking to see if anything has changed on this front but I'm getting the impression that... no it hasn't really. There is a lot of new tech but the actual process is just as hard work. The only thing to help since I last had a look 10 years ago is a lot of progress in CMS systems afaik.

 

So much has happened in 10 years i can't even begin to explain but trust me when i say it's been a lot!

I think you may be thinking of WYSIWYG web builders (correct me if i'm wrong) if this is the case then prepare to be dis-heartened.

These will NEVER be any good. They don;t have a designer or developers knowledge, common sense or ability to use their imagination or solve even the smallest of puzzles and therefore will remain the terrible alternative.

 

That only actually works though if you can actually do what you need doing.

 

Aint that the truth :p

I've been looking for a business partner for a long time, you see I'm the opposite to you I'm a wizzard with building backends to websites but I'm crap at designing, I think we could really help each other out! ^___^ PM me all your ideas in detail and we can get started.

I've been looking for a business partner for a long time, you see I'm the opposite to you I'm a wizzard with building backends to websites but I'm crap at designing, I think we could really help each other out! ^___^ PM me all your ideas in detail and we can get started.

 

I've worked with Chris before so I can vouch for his work it's awesome, he's a great guy and very professional you should do it!

I feel like this article is relevant to this thread ; http://worrydream.co...eractionDesign/

 

tl;dr? Touchscreen is fake and it sucks but it hints at how the digital world will be in the future. Natural, tactile, intuitive.

 

Kinda why I love product design. There's something about designing and creating physical objects that creates a challenge of user interaction that doesn't exist or is possible with websites/computers/screens yet.

 

Devices like Kinect are getting closer but they're still such a long way off.

What you're asking for is a skyscraper based on a really pretty oil painting. That doesn't work, it may look pretty but as soon as there's the slightest breeze the skyscraper will fall over and thousands will die. You can only build a skyscraper with proper architectural blueprints and a few sums from an engineer. The oil painting may give the architect a good idea of what you want, but the architecture bit has to go in the middle.

I have used iDraw on ipad to create vector based graphics and mock-ups quickly.

 

You can use a stylus to get precision if you really want, you can export the graphics in a number of formats.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.