Beginning Website design

[razzler]

Hi! I'm new here and I've just started learning making websites. I've just finished reading Building Your Own Website The Right Way Using HTML and CSS by Ian Lloyd and I wanted to start implementing ideas for a sample website. My end goal here is to be able to create a website/website template that will pass the standards the likes of Themeforest.

But my dilemma in starting doing a sample website/website template is, I get confused on what are the basic parts of the website that should be present? By parts I mean the pages present in the website like home/index page, contact page. etc and their respective features present. (Generally speaking regardless of what type of website is to be implemented.)

GAAHH!! I'm sorry if I'm confusing, I'm confused too. I just don't know what to do. Is there a general flight plan in web design? I'm already reading the books suggested by Ian Lloyd and I see nothing at all. Is this the case of information overload?

I'm really sorry again. But thank you for all you future help and suggestions.

[ralph.m]

Hi razzler. Welcome to SitePoint.

I get confused on what are the basic parts of the website that should be present? By parts I mean the pages present in the website like home/index page, contact page. etc and their respective features present.

Even though there appears to be a formula for websites, really it is the content that a site needs to present that should dictate the structure and features. That's the problem with themes: you end up forcing content where it doesn't really fit. I guess the best thing to do is to design something flexible enough that it can accommodate whatever is needed. Have a look at how others do templates and see what they do and don't include.

To be honest, it seems a little ambitious to jump from a beginner book straight to creating templates for sale. The ideal would be to build a few sites first and get used to working with HTML and CSS.

[asif33]

you can visit this sites. its help me lot http://www.w3schools.com

[razzler]

To be honest, it seems a little ambitious to jump from a beginner book straight to creating templates for sale.

No, I was thinking that if they were on such sites like themeforest the standards they adhere must be pretty high. I thought working on something to achieve the same level of those templates will help me in establishing a good foundation and practices on web design.

By the way, thank you. I more or less understand now that a design of a website depends on the content to be presented.

The ideal would be to build a few sites first and get used to working with HTML and CSS

Are there types of website designs that I should try my hand on re-creating to help me harness my skills? And is creating the website on Photoshop then embedding the HTML/CSS the norm because in the book, it says it's best to harness the "full power" of CSS?

Thanks again!

[behati]

Hey there, great that you're getting into web development, it's great fun!

To answer your first question, as ralph said, the different pages depend on the scope of the project, meaning what is required. If it's a small business for example, or an individual (artist, painter etc.) they often only need a simple frontpage (your index page) and maybe a contact page (with contact information or a form to send them a message) and a gallery perhaps.

As for themeforest, I don't personally know that site, but mostly premade themes come with one or two "sample" pages (possibly like the ones mentioned above) which can be (for example yet again!): A frontpage, a sample text page and a sample form page. The good thing about a sample text page and frontpage, is that developers can very easily transform the design into a dynamic content page (which you will quickly learn when you get more into webdev.) which can then hold any content that is fetched from a database.

So if you create a sample text page design, a developer can purchase or use your template, change the text into a dynamic textbox and use the same template for mutliple pages! So if there's an about us and a contact information page for example, they can be using the exact same template while just "grabbing" different content from a database.

Hope that's not too confusing

As for CSS, it's absolutely true that using the "full power" of it is the way to go, basically you want to use CSS as much as possible instead of using direct images from Photoshop. Partly because of performance (text loads a lot faster because it's smaller in size than images) and for the usability, and in the future even SEO (Search Engine Optimization) of a website.

My advice is, start building some simple pages with a few content containers to practice HTML and CSS. CSS is a "Cascading Style Sheet" meaning that the different elements "rely and inherit from eachother", it's a bit like building a house brick by brick and the only real way to learn it is to work with it to get the feel of how that works.

Phew.. sorry for the long post! But as you can tell, and as ralph said, there's no "formula" to building websites! It's our jobs as developers to listen to the customer/plan the project in the best way (again just like an architect would plan a building site).

Hope this hasn't scared you away from web design!

/behati

[ralph.m]

is creating the website on Photoshop then embedding the HTML/CSS the norm

Some people design a layout in Photoshop, then slice a lot of that up and use it on the web, but more and more people are (rightly) turning away from this workflow and designing in the browser itself. Photohop isn't a web design tool. It's handy for creating graphics, no doubt, but it really has nothing to do with web design, so is better kept out of the picture. Photoshop can only create fixed, static images, and the web is a fluid environment where page elements need to be able to stretch and expand. So as behati says, put your focus on HTML and CSS, as these are the real page layout tools for the web.

[razzler]

Thank you very much! I appreciate it! I'm rev up more than ever to start practicing my newly acquired HTML/CSS skills. I'll keep you updated on my "forays". This forum helps a lot in soothing the frazzled and the confused!

[ralph.m]

Glad to hear it, razzler. Do keep us up to date, and good luck! We enjoy the questions.

[behati]

Glad to hear it, razzler. Do keep us up to date, and good luck! We enjoy the questions.

They are strangely addicting, yes.... Good luck razzler

[wilcoxa]

I think your better off to start with a wordpress theme and then go in the back end and do minor html changes to it. Wordpress offers a lot out there now to fit any time of web site you need.

[Sanctus]

Build a basic website in the raw a couple of times. At first it might take a couple days to do. Eventually you will grasp it after doing it a few times. There are hundreds of tutorials online that you no longer have to purchase a book. w3schools.com is a good place for reference. A quick Google search will fill the gaps.

[TechnoBear]

My suggestion would be to build a few practice sites for real people, even if there's no intention of putting those sites on-line. In other words, think of a real-life group - your granny's knitting group, your uncle's Scout company, your sister's ballet class, whatever - and imagine you're building a site for them. Once you have a real-life example in mind, it's easier to decide what kind of information will go on the site, and how that should be organised into pages.

I would disagree with w3schools as a reference - try the SitePoint references instead, as they're generally more accurate.

[royal86]

is there any website from which i can get tips for making a website design?

[phpgator]

I really don't think there is any substitute for simply getting your feet wet once you have the basic knowledge to get going. I've been doing HTML/CSS for years now and still refer back to books and w3cschool for syntax so don't feel like you're not "good enough". Generally, you should ask yourself why started getting into web development as a hobby to begin with. Obviously, you're reading the book on your own, perhaps you had a website idea in mind. Go ahead and get after it, start building your website. When you get stuck, ask!

[coloradojaguar]

w3schools is perhaps one of the best first learning sources if you are a true beginner. You may also want to get a basic free web editor and go back and forth between the HTML view and the browser view. This method helped me to understand how what I was doing in the background would appear to a viewer as I performed it. Don't over look the videos that are also available on YouTube and of course it is more than helpful to find a good design forum and make a few friends. It never hurts to ask.

[TehYoyo]

My suggestion would be to build a few practice sites for real people, even if there's no intention of putting those sites on-line. In other words, think of a real-life group - your granny's knitting group, your uncle's Scout company, your sister's ballet class, whatever - and imagine you're building a site for them. Once you have a real-life example in mind, it's easier to decide what kind of information will go on the site, and how that should be organised into pages.

I would disagree with w3schools as a reference - try the SitePoint references instead, as they're generally more accurate.

Yes...although w3schools was my first learning tool, they are somewhat incomplete (although inaccuracy was never a problem). They're a quick reference for me, but I wouldn't use them as a go-to.

The website is dependent on the client, not on universal standards. The client defines the webpage.

~TehYoyo

Note: Whenever I see an expert do something (or in your case, read about an expert doing something), I get really inspired and try to do what they do...and fail epically. Then I get discouraged. I pseudo-guarantee that this will happen to you. Just keep pluggin' away...or, if Sitepoint Forums can substitute for a psychologist, post here. I'm sure we can pull some help out of our back pockets.

[Paul O'B]

w3schools is perhaps one of the best first learning sources .

This might be of interest.

[Hugo_]

Hey dude. Glad you're doing the work. Check this resource out though:

http://blog.themeforest.net/screenca...rockstar-book/
http://blog.themeforest.net/author/drewdouglass/page/2/

Themeforest made a screencast series that takes you through how to build your own custom themes. I'm working through it now and it's REALLY good . You'll need to know a bit of HTML/CSS/PHP. But just enough to not be overwhelmed.

Good luck with everything.

[ralph.m]

Nice links, Hugo_. Welcome to the forums.

[bo5ton]

more and more people are (rightly) turning away from this workflow and designing in the browser itself.

I'm not sure I totally agree. Yes, Photoshop does have the word 'photo' in it. It is primarily a image editing suite. However, I don't think it can be dismissed as a powerful tool for creating websites. Some people may not have the cognitive process to design and develop straight in the web browser i.e. straight to html and css. People can benefit from designing in Photoshop first and porting it into HTML CSS later. Photoshop (along with many other image editing suites and design applications) can also be used for creating static images that can add graphical diversity to your site.

[deathshadow60]

Some people may not have the cognitive process to design and develop straight in the web browser i.e. straight to html and css.

Honestly, those people probably have no business designing Jack for the web.

People can benefit from designing in Photoshop first and porting it into HTML CSS later.

Or it leads them down the garden path on design concepts that have no business being on a website in the first place, and makes them think about just one specific target (desktop screen of a certain size) instead of the ENTIRE POINT OF THE INTERNET AND HTML -- targeting MULTIPLE devices, resolutions, and capabilities.... which is just part of how one ends up with px metric fonts 'neccessary' on everything in absurdly useless sizes, illegible color contrasts, and 1 megabyte page-loads of 30-40 separate files to deliver 2k of plaintext and 3 content images... you see it every day on "design firm" and "personal artsy" pages... when the big success stories of the Internet, well... let's just say it's unlikely Amazon, E-Bay or Craigslist used photoshop to make a mockup first.

[Cythes]

This might be of interest.

I second this motion. I started on W3schools and ended up picking up everything (As limited as it might be since there is always room to learn.).
@op:
I usually set things up in a basic frame and built from there. Its quick, effective and it gets the job done that I need to have done
(I am going to be building a portfolio here soon on the site I am working with)

[bo5ton]

Honestly, those people probably have no business designing Jack for the web.

If a person hasn't had experience designing for the web before and isn't sure the capabilities of HTML & CSS, or they need to see the initial design beforehand, they can freely design in Photoshop as they see fit, Especially for those starting out. They don't necessarily have to use any assets from that design. They need not 'slice' up what they want, but having the ability to visualize the design on screen can be of some help to them. It's prototyping, and it has it's place.

[deathshadow60]

This might be of interest.

Which again, I've been calling W3Schools webrot for almost a decade now. Possibly one of the worst places to try and learn ANYTHING about writing HTML/CSS.

[TehYoyo]

Honestly, those people probably have no business designing Jack for the web.


Or it leads them down the garden path on design concepts that have no business being on a website in the first place, and makes them think about just one specific target (desktop screen of a certain size) instead of the ENTIRE POINT OF THE INTERNET AND HTML -- targeting MULTIPLE devices, resolutions, and capabilities.... which is just part of how one ends up with px metric fonts 'neccessary' on everything in absurdly useless sizes, illegible color contrasts, and 1 megabyte page-loads of 30-40 separate files to deliver 2k of plaintext and 3 content images... you see it every day on "design firm" and "personal artsy" pages... when the big success stories of the Internet, well... let's just say it's unlikely Amazon, E-Bay or Craigslist used photoshop to make a mockup first.

I disagree. I think it's a powerful part of the design process to design and set out comps in Photoshop first...while that doesn't mean that one should slice it up and then use all images to make a website, it helps to give a better idea of what you want to make. Going in blind is never a good idea. In life, in anything, and especially in web design.

Photoshop is absolutely necessary, in my opinion.

The difference between using photoshop and using bad web practices is very different.

~TehYoyo