Scroll down
v
View the
project
Let's talk!
Navigation Menu

This is the Simón Calle Laverde - Portfolio 2021 page for Simón Calle Laverde - Portfolio 2021 - Modern Web & Design

Web.UX Simón Brand
Web.UI Calle Visual

Hi, I'm a Publicist & Front-end Developer
focusing on Web Design, Branding, & SEO

Gif cycling through various websites I have developed
Gif cycling through various websites I have developed

Recent
Independent
Projects

Projects I
Developed For
Code Nation

See All Projects - See All Projects - See All Projects - See All Projects - See All Projects - 

Phases I
follow to
create great
projects

UX Research<br>/ Strategy Logo

UX Research
/ Strategy

Every great project starts with the strategy, this is the base and main pillar of a website or branding project. After receiving or composing the first brief with the purpose and goals, the UX Research and Strategy phase will consist of taking me through your business, your vision, and your expected results, in a series of meetings at the beginning of the journey. This allows me to get insights into what you desire and align expectations from the start of the design process.

UX Research or User Experience Research is also a crucial part to start a project. This is the way to align user needs and business needs. UX answers the why and how a person uses a product or a service, this is a way to ensure designing for the users and to be their voice. This should cover from research, to principles of accessibility and heuristic design, brainstorming possible ideas and solutions, creating the information architecture, wireframing and prototyping. Depending on the project’s size we could create user testing and even personas; testing with real users representing a bigger target audience, including journey maps between a user and the product or service, to create a better digital experience as a whole.

If you don’t have branding, we can create your visual identity based on various things. For example, references of what you have seen or liked, your competitors’ brand, your name, the culture and feel of your company, the experience we want to transmit, your specific target public, a supported and well founded color scheme, amongst others. In this first phase, you will get to understand our use of any visual concept or even why we are choosing a certain color, and you will be able to give feedback on the direction we are taking. Branding is an important step to have a consistent visual identity that should ultimately include a complete visual guideline, but aside of it, should go deep into the culture of the company itself.

UI Design<br>/ Mockup Logo

UI Design
/ Mockup

The UI Design is the second stage of a website project.

This phase of the project consist of creating mockups and the visual concept of the site, showing how it will look, using mostly placeholder images and texts with some real content. Although, it is better to use real headlines and prepare some texts and quotes from the beginning, or at least a first approach to them, a sitemap, and the general website’s concept in order for the site to become a platform that you can easily edit in the future and suits your exact needs, brand feel, and ever changing content. For example replacing an image or any other information as your needs evolve.

The design should make users find the product or service easy to use, intuitive, and seamless. It should use hierarchy, good typography, readability, spacing which lets the user breathe and better consume the content, and maintain brand consistency. They will associate a good experience with the brand as a whole.

My project websites are 100% custom, following any type of design trend we perceive better for the type of project. I will start by showing you similar sites, concepts, and design visuals to see what would be a good fit for your business. A first version design will take around a week after the first strategy stage and communication. With a whole branding concept it can take until two weeks or even a little longer.

Development<br>/ Launch Logo

Development
/ Launch

Although development could be done directly withouth a design, prototyping in web format, and reiterating on the product, it is always better to have a visual and approved design concept or mockup to follow and re-create in a web language to literally design the site again using CSS for styling, HTML which gives the main structure, and JavaScript or GSAP (which is JavaScript based) to animate, create effects, and create interactions.

Having a design concept will also help us ensure that nothing slips through the cracks when building the actual website in languages that the browsers understands and can display: HTML, CSS, and JavaScript. This phase has its own creative concerns, a lot of unique problem solving depending on each project unique features, and can be the longest phase of the project to get to a final result.

This Front-End Development phase can take anywhere from 1 week for a very small project, to even a month or 2 for a more complex project. To include a backend, customizing, and configuring it can also be an option in the development phase. With this, I can make a site completely dynamic and all texts and images in it can be editable. I can also give the possibility to add and publish news, events or videos at will through a custom backend.

After a couple of iterations, the site should be able to launch and you will have control of many features throught the backend.

Some of my
skills set

Markup &
Programming
Languages

HTML5
I have over 7 years of experience working with this markup language and I have worked and collaborated on at least 40 web projects using HTML5. I love using good HTML semantics, coherent, organized, and hierarchical markup code. Also always trying to think in accessibility.

CSS3 (SCSS & SASS)
CSS is an easy to learn, but hard to master styling language that I have 7 years of experience with. I have experience working with pure CSS and especially with CSS preprocessor languages like SCSS. When used to its full extent, CSS can be very powerful. I love CSS.

JavaScript
I have implemented some JavaScript for simple interactions in most of the sites I have worked on. I can also implement more complex JS interactions like the ones in this portfolio and my other recent projects. I can follow documentation, modify JS examples and create almost anything. But now in 2021 & 2022 I have focused around 3 months on improving and cementing my vanilla JavaScript to have a stronger base and then having a smoother transition to ReactJS.

ReactJS
My short term goal now is to become proficient at ReactJS and its stack. Using NextJS, GatsbyJS, and React Native is my main goal. In 2021 I was taking some courses and learning React. I was and currently are working on some small experiments, projects, and Apps using ReactJS and NextJS, some APIs, and more. Everything is currently in my GitHub.

NextJS
I'm currently learning NextJS (a ReactJS framework) as it is becoming very popular, to be able to take advantage of its Server-side Rendering, Static site generation, Incremental Static Regeneration, and more capabilities using ReactJS, in addition to the default ReactJS's Client-side rendering for single-page Apps. I'm currently building my new website in NextJS.

Liquid Code
I worked for at least 5 years using Liquid Code, the templating language created by Shopify and used to create dynamic and easy to edit websites, pulling dynamic content from data-bases or content management systems, looping through data, using conditionals and logic, and rendering static HTML from ever changing sources.

Design
Applications

Adobe XD & Figma
Adobe XD is the primary tool that I use for creating wireframes, mockups, and prototypes. Although I've been learning some Figma too as it is widely used for collaboration scenarios.

Adobe Illustrator
Is a tool I have used extensively from the beginning of my career for vector based graphics like ad designs, flyers, business cards, posters, and creating or re-creating logos during my career.

Adobe Photoshop
Is a complimentary tool for photo edition to be used in conjunction with Adobe Illustrator and other apps. Adobe Illustrator is 'object' based while Adobe Photoshop is 'image' based. I used it extensively especially at university. I also took a course in photography for over 5 years since school and worked in a photography studio where I also learned and used Adobe Photoshop. I created a monograph project for school graduation about Photography for Advertising, so I learned a lot of photo edition since. This work also took me to choose my university career.

Advertising
& MarketingAdvertising
& Marketing

Advertising
I have a bachelor's degree and title as a Publicist having undertaken a 5 year career focused in advertising, a branch of marketing which is mainly about persuasion. I studied design, history of design, visual semiotics, linguistics, psychology, sociology, created all types of ads, full campaigns, copy, slogans, created branding, analized all types of brands and campaigns worldwide, created ATL & BTL campaigns, created story boards, filmed and edited commercials, created radio spots, implemented messages in all type of communication channels, set digital marketing campaigns, and even learned some web design which took me to continue that digital path, taking a course after graduating.

Digital Marketing
I had the oportunity at the end of 2021 to work about 2 months for Instituto De Negocios located in USA in a spanish speaking area, to impulse their social media marketing and digital marketing strategy especially introducing LinkedIn Ads and LinkedIn's organic content. In a few days we went from around 120 followers to more than 600. I took around 3 courses from LinkedIn Training, Udemy, and other sources we found. I taught them all what I learned, we created organic content, small test campaigns, managed bids, budgets and timelines, different ad formats. We also got the approval to create LinkedIn Live Streams and Videos which required a few steps to apply for.

Branding
I can help businesses build a strong brand conceptual and visual identity that reflects their company's culture and feel. Branding encompasses much more than just a logo or graphic design, it goes into the whole experience and the brand's recognition and positioning in people's minds, looking to accomplish top-of-mind awareness.

Copywriting
I believe language is essential; one word can change everything. I studied a few semesters of linguistics at university. My native language is Spanish though I am also able to produce native-level English for projects for you.