Canva ile Profesyonel Web Portföyü
Web Portfolio Profesional con Canva
ile cristinacalima @cristinacalima
- 576
- 23
- 1
(İspanyolca dilinden otomatik çeviri)
giriiş
Introducción
Bu proje için, başlangıçta grafik tasarım için tasarlanmış olsa da artık web sitesi oluşturma için giderek daha kapsamlı özellikler sunan bir araç olan Canva'yı kullanarak bir portföy web sitesi tasarladım. Grafik ve UX/UI tasarımcısı olarak genellikle daha teknik platformlarla çalışırım, ancak Canva'nın web siteleri oluşturmanıza izin verdiğini keşfettiğimde bu seçeneği keşfetmeye karar verdim.
Proje gerçek bir ihtiyaçtan doğdu: Bir sanat yönetmeni arkadaşımın profesyonel portföyünü oluşturmak. Asıl niyetim daha uzmanlaşmış başka bir yazılım kullanmak olsa da, #CanvaContest duyurusu beni alternatif bir çözüm olarak Canva'yı denemeye motive etti. Amaç, sosyal medya gönderileri, sunumlar ve sosyal reklamlar için çok kullandığım bu ücretsiz aracı, görsel olarak çekici, açıkça gezinilebilen ve kullanımı kolay bir web sitesi tasarlamak için potansiyelinden tam olarak yararlanarak ne kadar ileri götürebileceğimi görmekti.
Para este proyecto, he diseñado una página web portfolio utilizando Canva, una herramienta que, aunque inicialmente concebida para diseño gráfico, hoy en día ofrece funcionalidades cada vez más completas para la creación de sitios web. Como diseñadora gráfica y UX/UI, suelo trabajar con plataformas más técnicas, pero al descubrir que Canva permite construir páginas web, decidí explorar esta opción.
El proyecto surgió a partir de una necesidad real: crear el portfolio profesional de una amiga directora de arte. Aunque mi intención original era utilizar otro software más especializado, el anuncio del #CanvaContest me motivó a experimentar con Canva como solución alternativa. El objetivo fue ver hasta dónde podía llevar esta herramienta gratuita que tanto he utilizado para posts de redes, presentaciones o social ads, aprovechando al máximo su potencial para diseñar una web visualmente atractiva, clara en navegación y fácil de usar.
Malzemeler
Materiales
Bu projeyi gerçekleştirmek için yalnızca ücretsiz sürüm olan Canva'yı kullandım. Bu aracın ücretli özelliklere başvurmadan sunduğu olanakları keşfetmenin ve göstermenin ilginç olduğunu düşündüm, böylece herkes herhangi bir finansal yatırım yapmadan süreci tekrarlayabilir.
Yazılımın yanı sıra, portföyün oluşturulduğu sanat yönetmeninin sağladığı aşağıdaki materyallerle de çalıştım:
1. Sitenin görsel temelini oluşturan projelerinizin görselleri (yüksek kalitede).
2. Çalışmanızın sunumunu tamamlamak için web sitenize entegre edilmiş, harici platformlarda barındırılan videoların URL'leri.
3. Şeffaf arka planlı PNG formatında teslim edilen elle çizilmiş kişisel imza.
Tüm içerikler doğrudan Canva'da düzenlendi ve uyarlandı.
Para llevar a cabo este proyecto utilicé únicamente Canva, en su versión gratuita. Me pareció interesante explorar y demostrar las posibilidades que ofrece esta herramienta sin recurrir a funciones de pago, lo cual permite que cualquier persona pueda replicar el proceso sin necesidad de inversión económica.
Además del software, trabajé con los siguientes materiales proporcionados por la directora de arte para quien fue creado el portfolio:
1. Imágenes de sus proyectos (en alta calidad), que forman la base visual del sitio.
2. URLs de vídeos alojados en plataformas externas, integrados en la web para complementar la presentación de su trabajo.
3. Firma personal dibujada a mano, entregada en formato PNG con fondo transparente.
Todo el contenido se organizó y adaptó directamente en Canva.
Adım 0: İçerik organizasyonu, ilham ve tel çerçeveler
Paso 0: Organización del contenido, inspiración y wireframes
Projeye başlamadan önce, mevcut kaynaklara dair net bir görüşe sahip olmak ve sitenin yapısını tanımlamaya başlamak için aldığım tüm materyalleri düzenledim. Her proje için kullanmak istediğim görselleri ve videoları ve ayrıca Ana Sayfa Kahramanı'na ekleyeceğim parçaları kategorilere ayırdım ve derledim.
Süreçte asla eksik olmayacak bir şey ilhamdır. Genellikle yaptığım şey, kafamda bir fikri bir araya getirmeye başlamama yardımcı olabilecek diğer tasarımcıların ortaya koyduğu görsel örnekleri ve çözümleri özümsemektir. İyi referanslar bulmak için bir sürü platform var. En çok Pinterest, Dribbble ve Savee.it'i kullanma eğilimindeyim. Referansları bulup kaydederken, her şeyi tek bir yerde tutmak ve yolumu kaybettiğimi hissettiğimde geri dönmek için kullanabileceğim bir ruh hali panosu oluşturuyorum.
Ayrıca, Canva ile çalışmaya başlamadan önce tel kafesler çizmeye başladım. İlk çizimler, daha sonra kullanacağımız araçla sınırlı kalmadan nihai fikre ulaşmak için çok önemlidir. Proje için aklımızda olanlardan başka hiçbir şeyi düşünmeden, kağıda elle çizmek iyidir: web sitesini nasıl hayal ettiğimiz, hangi bölümleri dahil edeceğimiz ve bilgileri nasıl önceliklendireceğimiz. Bu ilk, çok basit tel kafesler, daha sonra Canva'da nihai tasarımı oluştururken daha verimli olmak için bir kılavuz görevi gördü.
Bu adım, hem görsel hem de gezinme açısından net bir temel oluşturmak, portföyün çekici, aynı zamanda sezgisel ve kullanımı kolay olmasını sağlamak açısından önemliydi.
Antes de comenzar el proyecto, me encargué de organizar todo el material recibido para tener una visión clara de los recursos disponibles y empezar a definir la estructura del sitio. Clasifiqué y reuní las imágenes y vídeos que quería utilizar para cada uno de los proyectos, así como las piezas que colocaría en el Hero de la Homepage.
Algo que nunca puede faltar en el proceso es la parte de inspiración. Lo que suelo hacer es empaparme de ejemplos visuales y soluciones a las que han llegado otros diseñadores que puedan servirme para empezar a montarme una idea en la cabeza. Hay muchísimas plataformas para encontrar buenas referencias. Yo suelo usar sobre todo Pinterest, Dribbble, y Savee.it. Mientras voy encontrando y guardando referencias, voy construyéndome un moodboard que me servirá para tener todo en un mismo sitio y para volver a él cada vez que sienta que pierdo el rumbo.
También, antes de ponerme a trabajar con Canva, me puse a dibujar wireframes. Los bocetos iniciales son muy importantes para llegar a la idea final sin limitarnos por la herramienta que utilizaremos luego. Es bueno dibujar a mano sobre papel, sin tener en cuenta nada más que lo que tenemos en la cabeza para el proyecto: Cómo nos imaginamos la web, qué secciones incluiríamos y cómo jerarquizaríamos la información. Estos primeros wireframes, muy sencillos, me sirvieron de guía para después ser más eficiente al construir el diseño final en Canva.
Este paso fue clave para establecer una base clara, tanto a nivel visual como de navegación, asegurando que el portfolio fuera atractivo, pero también intuitivo y fácil de utilizar.
Adım 1: Canva'da yapıyı oluşturma
Paso 1: Construcción de la estructura en Canva
Tel çerçeveler oluşturulduktan ve takip etmek istediğim yapı hakkında daha net bir fikre sahip olduktan sonra, bunları Canva'ya aktarmaya başladım. Platform önceden tasarlanmış şablonlar sunsa da, kendim tasarladığım ve tasarladığım sonucu elde ettiğimden ve sanat yönetmeninin görsel stilini yansıtacağını düşündüğümden emin olmak için tasarımı sıfırdan oluşturmayı seçtim.
Web sitesini oluşturmaya başladığımda, Canva'nın ücretsiz sürümünde önemli bir sınırlamayla karşılaştım: tek bir URL içinde yalnızca beş sayfaya kadar yayınlamanıza izin veriyor. Bu durumda içerik daha fazla bölüm gerektiriyordu. Bu sınırlamaya uyum sağlamak için siteyi şu şekilde yapılandırmaya karar verdim:
1. Birkaç bölümü tek bir sayfada birleştiren bir ana sayfa:
· Kahraman, öne çıkan projelerin görselleriyle
· Proje dizini, ana bilgiler ve her biri için bir görsel ile
· Hakkımda, kısa profesyonel sunum
· İletişim bağlantıları ve seçili ağların bulunduğu alt bilgi
2. Portföyden seçilmiş dört projenin sunulacağı dört ayrı sayfa (diğer ikisi sanat yönetmeninin ilgili Behance sayfalarına bağlanacaktı, böylece o videolara sahip olmadığım için kullanıcıyı bunları görebileceği bir sayfaya yönlendirmek daha verimli olacaktı.)
Bu yapı netleştikten sonra Canva'da ilk düzen üzerinde çalışmaya başladım, görsel hiyerarşiler, kenar boşlukları ve beyaz boşluklar oluşturdum ve estetiği hem ana sayfa hem de proje sayfaları için bir sonraki adıma bıraktım. Bu aşamada, yazı tipleri, renkler veya son görseller hakkında endişelenmiyorum; sadece gri tonlamalı metin blokları, çizgiler ve kare veya dikdörtgen şekiller kullanıyorum. Metinleri mümkün olduğunca son versiyona yakın yazmaya çalışıyorum çünkü bu şekilde bloklar ve boşluklar son tasarıma çok benziyor, bu yüzden uyum sağlamada çok fazla zorluk çekmiyorum.
Una vez hechos los wireframes y habiendo tenido una idea más clara de la estructura que quería seguir, comencé a trasladarla a Canva. Aunque la plataforma ofrece plantillas prediseñadas, opté por construir el diseño desde cero, para asegurarme de obtener el resultado que había pensado y diseñado por mi cuenta, y que pensaba que reflejaría el estilo visual de la directora de arte.
Al comenzar a montar la web, me encontré con una limitación importante de la versión gratuita de Canva: solo permite publicar hasta cinco páginas dentro de una misma URL. El contenido en este caso requería más secciones. Para adaptarme a esta restricción, decidí estructurar el sitio de la siguiente manera:
1. Una homepage que integra varias secciones en una sola página:
· Hero, con imágenes de proyectos destacados
· Index de proyectos, con la información principal y una imagen cada uno
· About me, breve presentación profesional
· Footer, con links de contacto y redes seleccionadas
2. Cuatro páginas individuales para presentar cuatro proyectos seleccionados del portfolio (los otros dos restantes los enlazaría a las páginas correspondientes de Behance de la directora de arte, aprovechando que no contaba con esos vídeos, por lo que era más eficiente enviar al usuario a una página donde sí podría verlos.
Con esa estructura clara, comencé a trabajar la maquetación inicial en Canva, estableciendo jerarquías visuales, márgenes y espacios en blanco, dejando la parte estética para el siguiente paso, tanto para la Homepage como para las páginas de proyecto. En esta fase no me preocupo por las tipografías, los colores o las imágenes finales, simplemente utilizo blosques de texto, líneas y formas cuadradas o rectangulares en escala de grises. Sí intento ya escribir los textos lo más cercanos a la versión final, porque así los bloques y espaciados se acercan al diseño final, por lo que no habrá tanto problema para adaptar.
Adım 2: Görsel kimliğin tanımlanması
Paso 2: Definición de la identidad visual
Site yapısı Canva'da tanımlanıp kurulduktan sonraki adım portföyün görsel kimliğini şekillendirmek ve sanat yönetmeninin estetiğiyle uyumlu, tutarlı ve profesyonel bir sunum sağlamaktı.
Genel tasarım stili minimalisttir, beyaz alanı ve düzenli bir görsel düzeni vurgular. Bu yalnızca tarama deneyimini iyileştirmekle kalmaz, aynı zamanda her projenin tek başına durmasını sağlar.
Nötr bir renk paleti (beyaz, siyah ve gri) seçtim, ancak kişiliği artıracak bir renk patlaması arıyordum, bu yüzden tasarım ayrıntılarının bazılarını vurgulamak için koyu bir kırmızı tonu seçtim. Unutmayın, odak noktasını her zaman projelerde tutmak istiyoruz.
Genellikle tutarlılığı ve iyi bir bilgi hiyerarşisini korumak için mümkün olduğunca az yazı tipi seçmeye çalışırım. Bu durumda, iki sans serif seçtim: Başlıklar ve bağlantılar için büyük harflerle kullanacağım ana yazı tipi olan Open Sauce; ve geri kalan içerik için, özellikle uzun paragraflar için küçük harflerle kullanacağım bir diğer çok benzer yazı tipi olan Open Sans.
Ek olarak, bazı metin stilleri seçmek önemlidir. Örneğin, bu durumda, bölüm başlıkları için yazı tipi 46px yazı tipi boyutuyla Open Sauce, Black'tir; genel bağlantılar için yazı tipi 12px yazı tipi boyutuyla Open Sauce, Regular'dır. Ayrıca metnin altına kısa bir 1px kalınlığında çizgi ve yanına basit bir simge ekleyeceğiz.
Con la estructura del sitio definida y montada en Canva, el siguiente paso fue dar forma a la identidad visual del portfolio, asegurando una presentación coherente, profesional y alineada con la estética de la directora de arte.
El estilo general del diseño es minimalista, dando importancia a los espacios en blanco y a una composición visual ordenada. Esto no solo mejora la experiencia de navegación, sino que también permite que cada proyecto luzca por sí mismo.
Elegí una paleta de colores neutra (blanco, negro y gris), pero buscando un "pop" de color que añadiese personalidad, por lo que seleccioné un tono de rojo potente para destacar algunos detalles del diseño. Recordemos que buscamos que el foco esté siempre en los proyectos.
Normalmente intento seleccionar el menor número de tipografías posibles para mantener la coherencia y una buena jerarquía de la información. En este caso, me decanté por dos de palo seco, Open Sauce, la principal que utilizaría en mayúscula, para headlines y enlaces; y otra muy similar, Open Sans, que utilizaría en minúscula para el resto de contenido, principalmente para párrafos más largos.
Además, es importante seleccionar unos estilos de texto. Por ejemplo, en este caso para los títulos de sección la tipografía es Open Sauce, Black, con cuerpo de letra 46px; y para los enlaces generales la tipografía es Open Sauce, Regular, con cuerpo de letra 12px, y además añadiremos una línea corta de 1px de grosor debajo del texto y un icono sencillo al lado.
Adım 3: İçerik ekleme ve tasarım ayarlamaları
Paso 3: Inserción de contenidos y ajustes de diseño
Görsel kimlik belirlendikten ve görseller düzenlenip seçildikten sonra, sitenin her bölümüne nihai metin ve görseller de dahil olmak üzere nihai içeriğin eklenmesi aşamasına geçtim.
Bu aşamada ayrıca her bağlantıya yönlendirmek istediğim URL'leri ekledim ve yapı aşamasında kullanılan geçici yazı tiplerini ve renkleri görsel sistemde tanımlanan son versiyonlarla değiştirdim.
Ana unsurlardan biri, siyah PNG formatında sunulan sanat yönetmeninin kişisel imzasıydı. Bunu yeni kimliğe entegre etmek için Canva'nın Duotone resim düzenleme aracını kullandım ve şirketin kırmızısını ana renk olarak uyguladım. Bu özellik, portföyün stiline mükemmel bir şekilde uyum sağlarken orijinal imza tasarımını korumamı sağladı.
Bu aşama boyunca, hizalamaları düzelterek, kenar boşluklarını ince ayarlayarak ve farklı bölümler arasında görsel tutarlılığı sağlayarak tasarım değişiklikleri de yaptım. Bu aşama, işlevsel bir maketten daha cilalı ve profesyonel bir sunuma geçmek için önemliydi.
Una vez definida la identidad visual, y teniendo organizadas y seleccionadas las imágenes, pasé a la fase de inserción del contenido definitivo en cada una de las secciones del sitio, incluyendo textos finales e imágenes.
También me encargué en esta fase de añadir las urls a las que quería redirigir con cada enlace y sustituí las tipografías y colores provisionales utilizados durante la etapa de estructura por las versiones finales definidas en el sistema visual.
Uno de los elementos clave fue la firma personal de la directora de arte, entregada en formato PNG en color negro. Para integrarla dentro de la nueva identidad, utilicé la herramienta de edición de imagen Duotone de Canva, aplicando el rojo corporativo como color principal. Esta función permitió mantener el diseño original de la firma mientras se adaptaba perfectamente al estilo del portfolio.
A lo largo de esta fase, también fui realizando modificaciones de diseño, corrigiendo alineaciones, afinando márgenes y asegurando una coherencia visual entre las distintas secciones. Esta etapa fue clave para pasar de una maqueta funcional a una presentación más pulida y profesional.
Adım 4: Etkileşim ve animasyonlar
Paso 4: Interactividad y animaciones
Tasarımın tamamlanması ve içeriğin entegre edilmesiyle, bir sonraki aşamayı navigasyon deneyimini daha dinamik ve ilgi çekici hale getirmek için temel etkileşim ve animasyonlar üzerinde çalışmaya adadım. Öncelik, etkileşimi sezgisel ve basit hale getirmek, net bir görsel hiyerarşiye saygı göstermek ve genel tasarımın stilistik tutarlılığını korumaktı.
Canva'da, özellikle ana sayfa Hero ve proje dizini girişlerinde belirli görsel geçişleri kolaylaştırmak için öğe animasyon seçeneklerinden yararlandım. Ana içerikten uzaklaşmadan deneyimi zenginleştirme amacıyla aşırılıktan kaçınarak ince animasyonlar kullandım. Tek tek öğelerin hareket etmesini önlemek için, bir proje kartı gibi bir yapı oluşturan öğeleri grupladım, böylece animasyonlar eklediğimde her şey birlikte canlanacaktı.
Web sitesinde gezinmeyi kolaylaştırmak için, şirketin resminin bulunduğu ana sayfaya bir bağlantı ekledim; bu, web sitesinin tüm sayfalarındaki gezinme çubuğunda bir logo görevi görecekti. Ayrıca, kullanıcının kaydırmak zorunda kalmaması için sayfanın en üstüne doğrudan erişim sağlayan bir bağlantı da ekledim.
Con el diseño finalizado y los contenidos ya integrados, dediqué la siguiente fase a trabajar la interactividad básica y las animaciones, para que la experiencia de navegación fuera más dinámica y atractiva. La prioridad fue que la interacción fuera intuitiva y sencilla, respetando una jerarquía visual clara y manteniendo la coherencia estilística del diseño general.
Dentro de Canva, aproveché las opciones de animación de elementos para dar fluidez a ciertas transiciones visuales, especialmente en el Hero de la homepage y en las entradas del directorio de proyectos. Utilicé animaciones sutiles, evitando excesos, con el objetivo de enriquecer la experiencia sin distraer del contenido principal. Para que no se muevan todos los elementos por separado, agrupé todos aquellos que formasen una estructura, como por ejemplo una tarjeta de proyecto, para que al añadir animaciones, se anime todo junto.
Para facilitar la navegación de la web, añadí enlace que llevase a la homepage a la imagen de la firma, que actuaría como logotipo en la barra de navegación de todas las páginas de la web. También añadí un en enlace para tener un acceso directo al principio de la página, para evitar que el usuario tenga que hacer scroll.
Adım 5: Yayınlama ve İnceleme
Paso 5: Publicación y revisión
Tasarım tamamen tamamlandıktan, içerik entegre edildikten ve animasyonlar uygulandıktan sonra projenin son aşamasına geçtim: web sitesinin yayınlanması ve revize edilmesi.
Öncelikle, dört ayrı proje sayfasının yanı sıra ana sayfayı yayınladım ve hepsinin birbirine ve Behance'de barındırılan iki ek projeye düzgün bir şekilde bağlandığından emin oldum. "Gezinme menüsünü dahil et" seçeneğini devre dışı bıraktım çünkü bunu zaten manuel olarak oluşturmuştum. Web sitesi yayınlandıktan sonra, etkileşimlerin, bağlantıların ve animasyonların çalıştığını kontrol etmek için doğrudan tarayıcıda tam bir tasarım incelemesi gerçekleştirdim.
Bu inceleme sırasında, bazı animasyonların görsel olarak beklediğim gibi çalışmadığını fark ettim, bu yüzden bazı efektleri ayarladım ve daha akıcı olanlarla değiştirdim. Ayrıca, tasarımı mobil cihazlarda görüntülerken içerik düzgün şekilde akmıyordu. Tasarımın benim anlayışıma sadık kalmasını sağlamak için Canva'daki "Mobil cihazlarda yeniden boyutlandır" seçeneğini devre dışı bırakmayı düşünsem de, bu seçeneği devre dışı bırakırsam özellikle metnin küçük boyutunu önlemek için yapıda değişiklikler yapmaya karar verdim.
Her şeyi mobil formatta iyi yeniden boyutlandırılacak ve hala mükemmel görünecek şekilde ayarlamak karmaşık ve biraz zaman alıcıdır, bu yüzden mobil versiyonda da mükemmel tasarıma ulaşmaktansa iyi okunabilirlik ve işlevsellik sağlamaya öncelik verdim. Bu görev için Canva'nın masaüstü ve mobil önizlemesi çok kullanışlıdır, böylece her değişiklik yaptığınızda yayınlamanız gerekmez. Bu, biraz deneme yanılma, öğeleri ayarlama ve yeniden boyutlandırma ve önizleme sırasında nasıl değiştiklerini görmeyi içerir. Bir püf noktası, çoğu öğeyi yaklaşık 440 piksel genişliğinde tutmaya çalışmaktır, böylece mobil versiyon için düzenlendiklerinde, bu 440 piksel mobil ekran genişliğine sığdığında boyutlarını çok fazla değiştirmeleri gerekmez.
Bu son inceleme, tutarlı, akıcı ve profesyonel bir tarama deneyimi sağlamak ve projeyi hem görsel hem de işlevsel olarak sağlam bir sonuçla tamamlamak için önemliydi.
Yayınlanan web sitesini burada görebilirsiniz: https://elenagilportfolio.my.canva.site/
Con el diseño completamente armado, el contenido integrado y las animaciones aplicadas, pasé a la etapa final del proyecto: la publicación y revisión del sitio web.
Primero, publiqué la homepage junto con las cuatro páginas de proyectos individuales, asegurándome de que todas estuvieran correctamente enlazadas entre sí, así como con los dos proyectos adicionales alojados en Behance. Desactivé la opción de "Include navigation menu", pues ya lo había construido yo manualmente. Una vez publicada la web, realicé una revisión completa del diseño directamente en el navegador, para comprobar el funcionamiento de las interacciones, los enlaces y las animaciones.
Durante esta revisión, detecté que algunas animaciones no terminaban de funcionar como esperaba visualmente, así que ajusté y sustituí ciertos efectos por otros más suaves. Además, al visualizar el diseño en dispositivos móviles, el contenido no se redistribuía del todo bien, y aunque me planteé desactivar la opción “Resize on mobile” en Canva para asegurar así que el diseño se mantuviera fiel a lo que había concebido, me decidí por hacer cambios en la estructura para evitar el tamaño pequeño, sobre todo de los textos, si desactivaba esta opción.
Es complicado y algo lento ajustar todo para que se reajuste bien en formato móvil y se siga viendo perfecto, así que puse por encima asegurar la buena legibilidad y la funcionalidad antes que conseguir el diseño perfecto también en versión móvil. Para esta tarea, es muy útil la previsualización de desktop y mobile de Canva, para no tener que publicar cada vez que realizas cambios. Aquí se trata un poco de prueba-error, ajustando y redimensionando elementos y viendo cómo cambian al previsualizarlos. Un truquito, es intentar que la mayoría de elementos tengan un ancho de aproximadamente 440px, para que al ser manipulados para la versión móvil, estos no necesiten cambiar demasiado de medidas al entrar esos 440px dentro del ancho de la pantalla del móvil.
Esta última revisión fue clave para garantizar que la experiencia de navegación fuera consistente, fluida y profesional, dando por finalizado el proyecto con un resultado sólido tanto a nivel visual como funcional.
Puedes ver la web publicada aquí: https://elenagilportfolio.my.canva.site/
1 yorum
Senin sayende böyle güzel bir eser yaratabiliyorum
Yorum yapmak için Ücretsiz olarak giriş yapın veya katılın