Course project
Mi Proyecto del curso Diseño web: Be Responsive!
by Francisco Aveledo @fad
- 4421
- 54
- 19
Este es el proyecto que he realizado para el curso de Diseño Web Responsive (visual). Se trata del rediseño de mi portafolio digital. A lo largo del curso explico el proceso desde la concepción de la idea hasta la preparación de los ficheros para ser usados por un programador.
Desktop design
Tablet design
Mobile design
19 comments
LuisPinaLopes
Congratulations Francisco, I love your work. The visual experience as a user is great with the graphics.
See original
Hide original
fad
Teacher PlusHi Luis,
Thank you for your comments, it is appreciated!
See original
Hide original
microbians
StaffHandsome!
See original
Hide original
myteachingcrew
How cool the project @fad Congratulations!
See original
Hide original
fad
Teacher PlusThanks guys! I have done it in a simple way so that the process is well understood. It will be interesting to see the students' projects.
See original
Hide original
Juan Guillermo Rodríguez
I would like to learn how to program this type of website, which program do you recommend using?
See original
Hide original
fad
Teacher PlusHello John,
It depends on the programming language you use. There are many visual applications to program, although a pure and simple programmer usually uses a text editor and little else.
There are also programs with which you don't need to know a lot about code, such as Adobe Muse, Macaw, Webflow and recently (still in a trial period) Adobe Edge Reflow. They are visual programs with which you can set up a website without knowing programming.
See original
Hide original
edusaenz
Congratulations on the @fad project
Following the thread of the previous comments ... what program do you use to layout the webs? Or do you prepare them with photoshop for someone else to program them?
Is photoshop really the most suitable program to design webs? What about sketch3, fireworks (knowing that it disappears), illustrator ... or any of the ones you mentioned above?
I know that they are all questions :)
See original
Hide original
fad
Teacher PlusHi @edusaenz ,
I stopped designing (building) websites a long time ago, I used to use Dreamweaver and today I still use it to make some modifications to the code, CSS and things like that. I think this topic can be better answered by a programmer.
Photoshop is a typical option for those of us who come from the world of visual design, but it is used less and less to design websites *. What happens is that it is more and more common for the web designer to come from a technical education, development, for which many current web designers are designing directly in the application where they mount, even that previous stage of visual design is sometimes suppressed from somehow and that is why we see so many similar websites and with very similar structures. This is where I argue that it is necessary to delve deeper into the pure design part, before entering the technical part. This is done by many, others not so much, it also depends on each project.
Sketch is an option, although I understood that it was more focused on apps, but to be honest I don't know it well. Many designers are now designing websites in Illustrator because with HTML5 you can use elements of SVG format, which is vector format and therefore the elements can be scaled to any size without losing quality. I think this is a good option.
In principle Fireworks is more practical than Photoshop since it is designed to make the web. If another disappears, it will replace it. You have to think that Photoshop is not a design application for all of these, but it has been so important in the world of design that it has been used for a lot of areas that do not correspond to it, such as making logos. I once met a designer who had put together a whole magazine in Photoshop, puff! :)
* The reason why Photoshop was chosen for this course was to facilitate the process for many graphic designers who already know this application, but it is not vital to make websites with PS, there is nothing wrong with using it, in the end it is simply the tool that we use it to capture a visual idea that will later be mounted in another way.
See original
Hide original
unmedia
Hi @edusaenz ,
And how about Indesign to design a website ? Personally I feel very comfortable with it, but I don't usually find grids as easily as for photoshop.
I was wondering if it is correct to work with indesign to design a website and if you know of any site where there are Grids for Indesign.
Thank you and congratulations for the course, I think it will help me a lot.
See original
Hide original
fad
Teacher PlusHello @unmedia
I have heard that some people use InDesign for webs, as it also has output options for HTML and CSS, but I understand that these functions are not reliable.
The great thing about InDesign is that you have a number of practical resources when it comes to creating master pages and objects that you can easily repeat across libraries. This can help you make the sketch of an entire website in a practical and easy to re-edit way. It can be a good tool for making digital wireframes, or the preliminary sketch of a website to be assembled.
I believe that any option that is practical for each one is valid. At the end of the day, websites are not assembled by cutting all the elements from another application, so it does not matter if you assemble them in Photoshop, InDesign, Illustrator, etc. What you do in these programs will always be a sketch prior to assembly, the important thing is to follow a logical structure that is easy to develop taking into account the technical principles of the webs.
Here are some links to articles (in English) on the topic of InDesign for webs:
https://www.oss-usa.com/blog/best-web-design-tool-indesign-vs-photoshop
http://www.creativebloq.com/indesign/build-websites-61412106
http://dingdigital.co.uk/building-a-web-page-from-an-indesign-file
http://indesignsecrets.com/indesign-create-uxui-designs.php
See original
Hide original
edusaenz
Hello @unmedia and @fad , @fad for not having answered before, but between the parties ... Etc etc ...
I personally use Illustrator to design websites, in the studio we make websites very tailored to the client, wireframes in balsamiq, custom landings, content very focused on seo, etc. But I do not know to what extent it is profitable, today you can modify ready-made templates and the truth is very showy.
I do not see in photoshop an optimal tool to make webs, at least not webs that have many pages, if that is fine for webs (one page). Indesign is a good option to create master pages, icon library, etc.
Anyway, each teacher has his booklet.
Anyway, I'm still looking for the program that allows me to design websites with its responsive version, etc.
Thank you for responding to both and for the info sent.
See original
Hide original
fad
Teacher Plus@danielpechugas Thank you very much for your comment Daniel! Cheers
See original
Hide original
nattibortega
Hello Francisco, I just got involved in everything that is Domestika, I am interested in this course, and I would like to know if this helps me to make web pages? apart from generating the portfolio ... Thank you very much !!
See original
Hide original
fad
Teacher Plus@ortega-natalia-b Hello, yes, in this course I teach the basic principles of web design. The project that I carry out for the course is a portfolio but the principles will help you to face websites in general. Take into account that the course covers the visual design phase only, it does not touch programming. The idea of this course is that any designer has the ability to develop the visual design of a website, but this will have to be assembled by a programmer, unless you have technical knowledge.
Domestika will probably launch a course on programming or modifying WordPress templates in the coming months. These courses will be a perfect complement to this visual part.
If you have more questions or want to ask me something else, you can write to me at: design @fa-d .com
Cheers!
fa
See original
Hide original
lluna
Hi @fad ,
I find your project for the Responsive Web Design course interesting (the screenshots you show here, at Domestika) although I don't see them applied online. That is, I have gone to your online portfolio (www.fa-d.com) but I don't see that it is responsive ... is it?
Greetings.
See original
Hide original
fad
Teacher Plus@la_m Hello Marta, that's right! Unfortunately I have been so busy with other things that I have not had time to set up my own website, at the blacksmith's house ... The website that I have now I designed 5 years ago and I have not updated it in a long time.
At first, I wanted to do it with an assembly application without knowing the code, such as Webflow or Adobe Muse. The idea was to test these applications to see how simple they are so that I can make a review for my students, but I have been unable to get on with that and I may have to hire a programmer to build it.
Anyway I have to have my website soon, possibly for January or February.
See original
Hide original
viajeradelaluz
Hello, I come here because I am looking for a course on pure web design, that is, leaving aside the development part since I am working on it in other workshops. But I was wondering, given the age of the course, if it would have an update regarding the tool used, that is, PS. I am starting in this world of the Web and at least where I have consulted, using PS is frowned upon. It is considered a waste of time because (they say) the true design of the web begins in its development, this is without more or less, code. Every time I dare to bring up the subject, the solution seems to be either learning code to advanced levels to achieve the results you want, or designing the Web using programs that write the code in internal work like Muse, or designing only very fast sketches. to immediately go to code. Suddenly, I get into trouble.
See original
Hide original
fad
Teacher PlusHi @jonna ,
I do the course using Photoshop, there is no update on it. It is true that Photoshop has been phased out in recent years and that the development part of a website has covered the entire process from the beginning. But Photoshop itself has been updated to remain useful in web design. It is also true that the prominence of the code has led web design to its most boring and simple stage, where the vast majority of websites today are practically the same. It is difficult to find a good programmer who designs well or vice-versa.
The ideal is to master both areas, but programming is not something that any visual designer wants to master or appreciate, they are two different disciplines and programming is a fairly complex area if you want to master it well. This also depends on how you work, I always offer visual design without programming and there will always be clients who do well that way. Take into account that finding a good visual designer is more complicated than a good programmer, that's why many companies tend to look for visual design separately and solve the programming internally or they know that it will be easier to find a programmer. They value the visual part more.
I would recommend the use of programs such as Muse or Webflow. For me they are the true current tool of a visual designer, since it allows you to assemble websites without having to become an expert in programming. At least with these programs you can create functional mockups so that clients have a better idea of the project, and if they need more complex programming then they can hire an expert in that area. Whether you can start projects directly in those applications or start sketching in Photoshop will depend on your design process. It is better for me to start with Photoshop because I have mastered it and there I can make many changes. This is personal, each one will be different. I prefer to concentrate purely on the visual and then the code to adapt to the design, and not the other way around, which is what is happening a lot today.
My course tries to teach the principles of visual design and how to create a web portfolio (something simple) in its visual stage. It is a simple course for beginners in web design and helps to visualize that stage of design. In this sense, you will do well and you can complement it by learning Muse or any similar program.
For any other questions you can send me a message.
Cheers!
Francisco
See original
Hide original
Log in or join for Free to comment