Wilson Tarbuckles Posted February 6, 2021 Share Posted February 6, 2021 Hi All, I've always been, more or less, a hand coder when it comes to creating websites. I've seen some videos about making websites in Designer or Publisher. But all of them leave out how you actually turn the design into code. Is there something I'm missing? Have a great day! Thank you!! Wilson Quote Link to comment Share on other sites More sharing options...
walt.farrell Posted February 6, 2021 Share Posted February 6, 2021 17 minutes ago, Wilson Tarbuckles said: But all of them leave out how you actually turn the design into code. Is there something I'm missing? You don't do that part of it in the Affinity applications; they are not for building websites. They can build objects you can put into the websites you build, but not the sites themselves. Wilson Tarbuckles 1 Quote -- Walt Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases PC: Desktop: Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 Laptop: Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU. iPad: iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard Mac: 2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1 Link to comment Share on other sites More sharing options...
v_kyr Posted February 6, 2021 Share Posted February 6, 2021 27 minutes ago, Wilson Tarbuckles said: I've always been, more or less, a hand coder when it comes to creating websites. Which is still the most flexible way! All you usually need is a good text editor or IDE here. - Though there are also a bunch of WYSIWYG tools available. 30 minutes ago, Wilson Tarbuckles said: I've seen some videos about making websites in Designer or Publisher. But all of them leave out how you actually turn the design into code. Well they probably made the UI/UX design with the help of the Affinity tools. Meaning, they sketched/prototyped how things should finally look like. And they probably created the icons, buttons, logos, banners etc. (... so the graphical image parts) with the Affinity tools. - However, the Affinity tools don't export and generate any web based HTML/XML or CSS format code for you, thus you didn't saw in those videos how they finally turned designs into code! Wilson Tarbuckles 1 Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
Wilson Tarbuckles Posted February 6, 2021 Author Share Posted February 6, 2021 Makes perfect sense guys! Thanks!!! walt.farrell 1 Quote Link to comment Share on other sites More sharing options...
All Media Lab Posted February 6, 2021 Share Posted February 6, 2021 Hi @Wilson Tarbuckles, It's also interesting to read this old article: https://blog.alexdevero.com/html-rapid-prototyping-facts-need-know/#:~:text=and rapid prototyping.-,What is HTML rapid prototyping,to user's problem or need. and https://medium.com/@andreas.johansson.dev/do-you-find-yourself-designing-the-same-screen-over-and-over-html-prototyping-may-help-f87d45787e11 and https://blog.prototypr.io/stop-designing-in-sketch-design-in-the-browser-c102bcdcdbb You can of course make a mock up in Photo or Designer, but I think it makes no sense for web design it simply doubles your work for no particular reason. A very common way of creating websites nowadays is HTML Prototyping . I use Affinity Photo And Designer aside to create the responsive images, logos etc. and do my HTML prototyping in Bootstrap. Have used Sketch too but it's to much extra work. A very good editor for this is https://www.pinegrow.com It spits out: Bootstrap, Tailwind and Foundation or normal HTML websites. You can even export your site to WordPress if needed. It installs a complete Bootstrap or other framework setup in seconds and you can start building your design. It works perfect with Sublime Text, Atom or VS code next to it. SASS is implemented and more. At the end you have your website ready for upload to the server or to show your client how it really is going to look like. Regards, David Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.