Results 1 to 16 of 16
  1. #1

    * Need help to design website

    Hi to all professional web designers here!

    I want to built a website, I am a noob with that. I want to know does all HTML/CSS websites designed by professional web designer start with designing a PSD first or you directly start coding and linking custom graphics to it?

    Is PSD the 1st step to develop a professional website in HTML/CSS? or anything else?

    And what about the PHP websites does it follow the same procedure of development as of HTML CSS websites or we need to start with something else for that too?

    Please help me I want to know how professionals do their work! I will appreciate your views and response and also guide me with proper steps required or development procedure for website.

  2. #2

    Re: Need help to design website

    Hello,

    I'm no expert in web design or development, however from my personal experience all of my designs have started as a PSD then been sliced and coded to HTML & CSS. As with PHP I would code the HTML & CSS first then implement the PHP where ever it's needed within the site.

    If you visit tutsplus.com there's loads of tutorials for PSD and HTML.
    Jiffy Domains - Affordable & Reliable UK Shared Web Hosting & Reseller Hosting UK
    Features: cPanel | Softaculous | CloudFlare | R1Soft Backups | RVSiteBuilder Pro| 24/7 Support | 30 Day Money Back Guarantee | 99.9% Uptime Guarantee | PayPal & Direct Debit Accepted

  3. #3
    Join Date
    Aug 2006
    Location
    USA/UK
    Posts
    112
    Hey I have designed 100s if not 1000s of sites, I would advise if you are starting a hosting type business to certainly use a CMS system ( Content management System) this will allow you to edit the site as your business evolves over time, update news, images and text etc.. A few good ones that i tend to stick with are

    Wordpress
    Drupal
    Joomla

    You would also require a whmcs integration if you want to include a billing system to bill your clients (WHMCS is probably the best option)

    Designing a site for the first time can seem a huge task but take a look around see what others are doing and some of the bigger companies out there you will notice certain trends and designs flows that you can take for inspiration.

    Remember the basics..

    Dont make it too wide, you should work with these pixels..

    960 pixels width - 1024 to make sure all visitors get a good experience (I wont go into mobile responsive here lol)

    Make sure you research which colours people react too, ie; red is deemed as a shouting colour or if someone is making a statement were as orange and light greens are softer and more welcoming.

    How it works after you have done the design for the pages is pretty straight forward, if you have html/css and a bit of php knowledge you should be fine, if not you may want to hire someone to do this for you..

    A PSD is the image you create in photoshop gets sliced and coded into html
    The html is then integrated into the CMS system so you can administer the site from an admin panel with a text editor etc..

    I hope this helps, and wish you the best of luck!
    “In the midst of chaos, there is also opportunity”
    ― Sun-Tzu, A Arte da Guerra

  4. #4
    Thank you all for your advice. It will help me a lot.

  5. #5
    Join Date
    Aug 2013
    Posts
    224
    PSD is not the first step for most websites. PSD is mostly used as a "mockup" by a designer, to show the client a preview of website before actually coding it, because editing PSD is a lot easier than editing HTML/CSS.
    You can start with HTML/CSS without any PSD, this is the way I design my websites.

  6. #6
    Join Date
    Dec 2005
    Location
    Finland
    Posts
    1,471
    Photoshop is good way to create a quick mockup of the layout. When you get client's feedback, you can iterate, get the design approved, and provide the finished layout to your web developer. It's a design tool, but also part of the communication.

    Some designers I know use other tools from the Adobe Suite. You also sometimes see wireframe mockups, but those are not that often used for fairly simple web properties.

    The output of a PHP web site script should be HTML with styling from CSS.


    Quote Originally Posted by todo1419 View Post
    Hey I have designed 100s if not 1000s of sites, I would advise if you are starting a hosting type business to certainly use a CMS system
    The OP is asking about designing a site, so why are you talking about CMS? I'm not sure if you're talking about designing or developing, but in either case it's not likely that those "thousands of sites" would be professional and non-trivial.

  7. #7
    Join Date
    May 2011
    Location
    Singapore
    Posts
    107
    Quote Originally Posted by Andrew-x View Post
    PSD is not the first step for most websites. PSD is mostly used as a "mockup" by a designer, to show the client a preview of website before actually coding it, because editing PSD is a lot easier than editing HTML/CSS.
    You can start with HTML/CSS without any PSD, this is the way I design my websites.
    This is the way I design my websites too. Just code.

  8. #8
    try

    http://www.artisteer.com

    I do not like it much but it can come in handy

  9. #9
    Quote Originally Posted by Andrew-x View Post
    PSD is not the first step for most websites. PSD is mostly used as a "mockup" by a designer, to show the client a preview of website before actually coding it, because editing PSD is a lot easier than editing HTML/CSS.
    You can start with HTML/CSS without any PSD, this is the way I design my websites.
    I agree, I make websites without image. I simply write a CSS and HTML code. If you have it in your head, you can write without image.
    If you need a web developer from Serbia - check: Web design Belgrade
    And check my page for SEO optimisation: SEO Belgrade

  10. #10
    Hello saurabhnsonar,

    There have been some great answers here, and the weird thing is, all of them are correct. There are many ways to build a website. The scripting languages such as HTML, CSS, php, Perl, SQL, and CMSes such as WordPress, Drupal, Joomla, etc are all different tools.

    They each have their own uses and specializations. For example, HTML is used for content layout, CSS is used to format that content. PHP is used to do processing on the server side and serve dynamic content. Javascript is used to process things adn serve content on the client side. SQL is used to pull data from a database, usually processed by php and then sent to the browser for display. They each have their own purpose.

    You can certainly build a nice static site using just HTML and CSS, for many many sites that is all that is needed. If you are just beginning that is where I would suggest you start.

    PSD is not required to build a site, it is simply another tool used to build your mockup, or blueprint of your visual display. Many people use PSD as a start, but many choose not to use it at all.

    Content Management Systems such as WordPress, Joomla, Drupal, etc can be very helpful for building dynamic sites with lots of features without having to learn to code. WordPress is by far the most popular and easiest to use, however Joomla and Drupal can likely do more in the long run but they have MUCH longer learning curves, especially Drupal. These are all platforms built with languages such as php or perl and use SQL to talk to a database backend where they store their data.

    As you become more experienced in building sites you will likely touch a little of all of the scripting languages and likely some database stuff as well. Just pick them as you need them and do not let the sheer number of things out there scare you. It is like building a toolbox, acquire the right tools as you go along.
    [B]Scott M

  11. #11
    Join Date
    Aug 2011
    Posts
    340
    The 'PSD' way is helpful if coder and designer are different person. Since 'PSD' is merely a 'mockup' and you'll need to double your work if you design 'PSD' and then write the makeup.

    I prefer to start writing makeup directly and add custom graphics as required.
    OaaS - Optimization as a Service
    Your application, Your infrastructure, Our expertise.

  12. #12

    getting started with web design

    Hi Saurabhnsonar,

    Scott M has given an excellent and helpful overview of the myriad of different options available... thank you!

    I am on a similar web design learning curve too and I have found the free software Wordpress to be easiest to use so far. There are loads of great themes and plugins - just make sure to backup your site before doing updates.

    I use Gimp which is a free version of photoshop for logos and editing my images. I use open office for creating quick drafts of text and images for my blogs and pages that I can then copy and paste into Wordpress or Drupal. It is free software too. You have nothing to loose here

    My host mywebtonet.com has an easy installer for downloading Wordpress and Drupal so that part was a breeze. I am developing a site in Drupal (I paid £40 for a Drupal theme and it is brilliant) and I'm finding it more difficult than Wordpress to program. I am enjoying the challenge and now I will read up on the extensive Drupal and Wordpress tutorials...it is fun to learn and gives you a boost when you make things work how you want!

    Good luck and let us know how you get on!

  13. #13
    You can start with Joomla! or Wordpress. You must know how to install it to your server. You can read documentation in Joomla! and Wordpress site. It's very easy to install and for use. Good luck...
    If you need a web developer from Serbia - check: Web design Belgrade
    And check my page for SEO optimisation: SEO Belgrade

  14. #14
    Join Date
    Oct 2013
    Location
    Byfleet, Surrey, UK
    Posts
    40
    For me I think until you have much more experience you always need to start with a design/layout, this can be in the form of positioned images or drawings so that you know where your heading straight from the off - the most ideal situation is of course to have everything pixel perfect and measured out from the start. This could depend if you pay a designer for a mock-up or complete measured layout of the pages.

    These days when building websites it's probably best to go with a CMS, this way the site can be updated easily and not just by the dev. Once you have chosen you can then start to apply the design - the internet is full of useful information to help you with this.

    If you plan well things will go a lot smoother during the build process.

    Good luck
    4D Hosting - premium hosting solutions
    VPS | Reseller Hosting | Exchange Email |
    www.4dhosting.com |@4dhosting

  15. #15
    Join Date
    Mar 2013
    Posts
    1,328
    Quote Originally Posted by saurabhnsonar View Post
    Is PSD the 1st step to develop a professional website in HTML/CSS?
    Nope, most of the times it is not.

    I believe only designers that attended courses do that, certainly not improvised designers like me.

  16. #16
    Join Date
    Dec 2005
    Location
    Finland
    Posts
    1,471
    Quote Originally Posted by cloudxplore View Post
    PSD is the Adobe Photoshop Document file that is sliced or embeded in the web page to attract visitors
    Sometimes they are, but you're seriously missing the point of the thread.

    Quote Originally Posted by saurabhnsonar
    I believe only designers that attended courses do that, certainly not improvised designers like me.
    I'm not really a designer at all, but I tend to use Photoshop or some other graphical tool even with my own web pages. It's so much faster to see if the design idea works. Of course, there's not going to be nice PSD file because I'm taking the working ideas straight to the website.

Similar Threads

  1. Replies: 2
    Last Post: 05-25-2013, 10:08 AM
  2. Replies: 1
    Last Post: 05-16-2013, 02:22 AM
  3. Replies: 0
    Last Post: 10-24-2011, 04:19 PM
  4. Replies: 1
    Last Post: 08-10-2011, 08:36 PM
  5. Replies: 0
    Last Post: 05-04-2011, 08:46 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •